我用另一种方法来使用 ckEditor。
第一件事是 - 我不想在每个使用编辑器的页面中都初始化 ckEditor。
第二件事是 - 有时我需要通过名称访问 ckEditor。
因此,这是我的观点:
将以下内容添加到您的布局中:
<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: '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() {
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()