[英]How to get value of CKEditor 5?
我希望能夠返回 CKEditor textarea 的值,並在其中寫入我的文本。
我使用了 CKEditor 5 CDN。 首先這是我的 textarea 代碼,它工作正常
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.1/classic/ckeditor.js"></script>
<textarea class="inputStyle" id="editor" name="content" placeholder="Write your email.."></textarea>
<script>ClassicEditor.create(document.querySelector('#editor')).catch( error => { console.error( error ); } ); </script>
我曾經通過以下方式從 CKEditor 之前的 textarea 獲取數據:
var text = $('textarea#editor').val();
並通過以下方式設置數據:
$('textarea#editor').html("");
但我現在迷路了? 我嘗試了很多方法……正確的方法是什么?
您需要獲取或保存創建的編輯器,然后使用getData()
函數。 您可以在創建時添加.then()
以保存您的編輯器。
var myEditor;
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
myEditor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
然后使用獲取數據
myEditor.getData();
我使用另一種方式來使用 ckEditors。
首先是 - 我不想在我使用編輯器的每個頁面中初始化 ckEditor。
第二件事是 - 有時我需要按名稱訪問 ckEditors。
所以,有我的觀點:
添加到您的布局:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
在您的視圖中使用它:
<input type="text" name="tbxQuestion" class="ck-classic"/>
<input type="text" name="tbxAnswer1" class="ck-classic-min"/>
<input type="text" name="tbxAnswer2" class="ck-classic-min"/>
<input type="text" name="tbxAnswer3" class="ck-classic-min"/>
一點css:
.ck-classic {
display: none;
}
.ck-classic-min {
display: none;
}
將微小的 JS 添加到布局(添加為單獨的 JS 文件的更好方法):
const ckEditorClassicOptions = {
toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'insertTable', 'undo', 'redo'],
heading: {
options: [
{ model: 'paragraph', title: 'Параграф' },
//{ model: 'heading1', view: 'h1', title: 'Heading 1' },
{ model: 'heading2', view: 'h2', title: 'Заголовок 2' },
{ model: 'heading3', view: 'h3', title: 'Заголовок 3' },
{ model: 'heading4', view: 'h4', title: 'Заголовок 4' },
{ model: 'heading5', view: 'h5', title: 'Заголовок 5' }
]
}
};
const ckEditorClassicOptionsMin = {
toolbar: ['bold', 'italic']
};
var allCkEditors = [];
$(document).ready(function() {
// Initialize All CKEditors
allCkEditors = [];
var allHtmlElements = document.querySelectorAll('.ck-classic');
for (var i = 0; i < allHtmlElements.length; ++i) {
ClassicEditor
.create(allHtmlElements[i], ckEditorClassicOptions)
.then(editor => {
allCkEditors.push(editor);
})
.catch(error => {
console.error(error);
});
}
allHtmlElements = document.querySelectorAll('.ck-classic-min');
for (var j = 0; j < allHtmlElements.length; ++j) {
ClassicEditor
.create(allHtmlElements[j], ckEditorClassicOptionsMin)
.then(editor => {
allCkEditors.push(editor);
})
.catch(error => {
console.error(error);
});
}
});
function ckEditor(name) {
for (var i = 0; i < allCkEditors.length; i++) {
if (allCkEditors[i].sourceElement.id === name) return allCkEditors[i];
}
return null;
}
然后從您需要的地方獲取數據:
ckEditor("tbxQuestion").getData()
使用開發者控制台,我發現這對我有用:
CKEDITOR.instances.(textarea_id).getData();
實際上,有很多方法可以實現這一點,但這種方法非常簡短且經過優化,而且這種設置可以與單個和多個<textarea>
完美配合。
document.querySelectorAll('.ckeditor').forEach(e => { ClassicEditor .create(e) .then(editor => { editor.model.document.on('change:data', () => { e.value = editor.getData(); }); }) .catch(error => { console.error(error); }); })
<script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script> <!--Native Text Field--> <textarea class="ckeditor"></textarea>
最簡單的方法:
//global vars
var CKEditorArray = [];//CKEditor access array
//initialize function
function CKEditorInit(selector_name){
ClassicEditor
.create(document.querySelector(selector_name),{
//some options
toolbar: {
items: [
'undo', 'redo', '|',
'fontSize', 'bold', 'italic', 'underline', '|',
'alignment', 'bulletedList', 'numberedList', '|',
'outdent', 'indent', '|',
'fontColor', 'fontBackgroundColor', '|',
'sourceEditing'
],
},
})
.then(editor => {
console.log(editor);
CKEditorArray[selector_name] = editor;//save editor with selector name as index to array
})
.catch(error => {
console.error(error);
});
}
//then we need to init CKEditor, we just call function
CKEditorInit('#textarea-id');
//access to Editor like:
alert(CKEditorArray['#textarea-id'].getData());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.