时间戳

首页 > 解决方案 > CKEditor 4 有效，但 CKEditor 5 无效

javascript - 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

我错过了什么？

标签： javascriptckeditor

解决方案

所以，最终我在 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 错误。

推荐阅读