ckeditor 5 在线生成器未显示答案

【问题标题】：ckeditor 5 online builder not showingckeditor 5 在线生成器未显示
【发布时间】：2020-09-15 16:54:09
【问题描述】：

我使用了 ckeditor 5 在线生成器，下载了一个压缩文件。我将其解压缩并创建了一个 html 文件以包含编辑器，如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Connect</title>

    <script src="ckeditor5/build/ckeditor.js"></script>
    
</head>

<body>
    <div id="editor"></div>
    
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>

</html>

这不起作用并产生此错误Uncaught ReferenceError: ClassicEditor is not defined 但是，当我使用来自 here 的完整版时，它运行良好。

在使用在线生成器之前我需要做些什么吗？

【问题讨论】：

标签： javascript html ckeditor ckeditor5

【解决方案1】：

您可以在脚本标签中使用 CDN，而不是使用下载的文件（ckeditor.com 本身提供）。它会起作用的。否则你应该把你的 html 文件放在你的解压文件所在的同一个文件夹中，或者你可以在脚本标签中提供你下载文件的正确路径。

【讨论】：

它们在同一个文件夹中。我不想使用cdn，我在我的android应用中使用它并想离线使用它。

【解决方案2】：

以这种方式设置工具栏对我有用。

let editor;

ClassicEditor.create(document.querySelector('#id-textarea'), {
  toolbar: [
    'heading',
    'bold',
    'italic',
    'underline',
    'fontFamily',
    'fontSize',
    'fontColor',
    'undo',
    'redo',
    'alignment',
    'indent',
    'list',
    'horizontalLine',
    'paragraph',
    'removeFormat',
    'specialCharacters',
    'wordCount',
  ],
})
  .then((newEditor) => {
    editor = newEditor;
  })
  .catch((error) => {
    console.error(error);
  });

【讨论】：

【解决方案3】：

将此 CDN 用于经典编辑器：https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js

【讨论】：

我不想使用cdn，我在我的android应用中使用它并想离线使用它
检查路径是否正确。在ckeditor5/build/ckeditor.js 之前放一个/
我检查了路径，它是正确的。当我在前面放一个“/”时，它会给出另一个错误“ERR_FILE_NOT_FOUND”
这里是我从网站下载的编辑器文件，如果你想尝试一下gofile.io/d/ymtUpe
从ckeditor.com/ckeditor-5/download下载文件。我认为您缺少构建文件夹中的文件。尝试该链接并下载最新版本的经典编辑器，将所有文件放入您的文件中。它肯定会奏效。