CKEditor 4 有效，但 CKEditor 5 不起作用

这有效：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CKEditor Classic Editing Sample</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="scripts/ckeditor/ckeditor.js"></script>
<!-- this is with CKEDITOR 4 -->
<script>
window.addEventListener("load", function() {
CKEDITOR.replace ('editor1');
});
</script>
</head>
<body>
<form method="post">
<p>
My Editor:<br>
<textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>

但是完全相同的 HTML，脚本路径更改为 CKEditor 5，<textarea>不会被替换：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CKEditor Classic Editing Sample</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="scripts/ckeditor5-build-classic/ckeditor.js"></script>
<!-- this is with CKEDITOR 5 -->
<script>
window.addEventListener("load", function() {
CKEDITOR.replace ('editor1');
});
</script>
</head>
<body>
<form method="post">
<p>
My Editor:<br>
<textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>

我下载了 CKeditor 5 zip 文件并按照指示解压缩到路径。在第二种情况下，chrome 错误控制台显示：

Uncaught ReferenceError: CKEDITOR is not defined

我错过了什么？

所以，最终我在CKEditor网站上找到了相关的文章： https://cdn.ckeditor.com/#ckeditor5

v5 的 API 需要不同的语法：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CKEditor Classic Editing Sample</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
<script>
window.addEventListener("load", function() {
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
});
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
</body>
</html>

也许只有我一个人，但我认为基本的"入门"指南可能会更好。在我将初始化代码放入事件侦听器之前，我也遇到了 v5 错误。

CKEditor 5 可以提供任何所见即所得的编辑器类型。选择带有少量配置的经典编辑器，以确保使用editor.updateSourceElement((方法更新文本区域内容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CKEditor Classic Editing Sample</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script>
window.addEventListener("load", function() {
ClassicEditor
.create( document.querySelector( '.kt_ckeditor' ), {
toolbar: ['heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
'outdent', 'indent', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'insertTable', '|',
'uploadImage', 'blockQuote', '|',
'undo', 'redo', 'editor'],
shouldNotGroupWhenFull: true
})
.then( editor => {
editor.editing.view.document.on( 'change', ( evt, data ) => {
editor.updateSourceElement();
} );
} )
.catch( error => {
console.error( error );
})
});
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
</body>
</html>

请注意，替换的元素会在提交之前由 CKEditor 自动更新。如果您需要使用 JavaScript 以编程方式访问值(例如，在 onsubmit 处理程序中验证输入的数据(，则元素仍有可能存储原始数据。为了更新被替换的值，请使用 editor.updateSourceElement(( 方法。

如果您需要随时使用 JavaScript 从 CKEditor 获取实际数据，请使用 editor.getData(( 方法，如下一节所述。

相关内容

最新更新

热门标签：