使用在线构建生成器时，CKEditor5 工具栏未显示在 Angular 中

Question

我正在使用从在线构建生成器生成的自定义构建。

然后我按照用Angular 的富文本编辑器组件编写的文档进行操作，但使用自定义构建而不是使用官方编辑器构建之一。

不知何故，我的工具栏及其图像工具栏和表格工具栏等项目没有显示在我的 Angular 项目中。Executingnpm install提供了工具栏所需的文件，以"image"在在线构建示例页面上显示完整的项目（包括等）。

我在这里缺少什么才能成功显示使用在线构建生成器定义的工具栏及其项目？

Answer 1

目前也遇到同样的事情。

我假设您也只是ckeditor.js从build文件夹中导入了。就我而言，我必须config为编辑器手动定义：

成分

  import * as CustomEditor from "src/app/ckeditor5-custom-build/build/ckeditor";
  //...
  public Editor = CustomEditor;
  config: CKEditorConfig = {
    placeholder: "Write your answer here.",
    // BUG: Current CKEditor5's generated build does not 
    // show the default toolbar as defined in the online builder
    toolbar: [
     "bold", "italic",  "underline", "code", "|",
      "blockquote", "codeblock", "bulletedlist", "numberedlist", "|",
      "link", "image", "|",
      "Format",
    ],
  };

模板

  <ckeditor [editor]="Editor" [config]="config" [data]="data"></ckeditor>

免责声明

当前的问题是"image"工具栏项目未按预期工作。上面的代码仅显示工具栏并成功显示"code"和"codeblock"工具栏项（这是单独的 CKEditor 插件，就像"image"）

更新 （截至 2020 年 11 月 9 日）

• FilipTokarski在这里证实了这个问题。

我可以确认，当您将在线构建器的编辑器构建直接添加到 Angular 应用程序时，工具栏会丢失。这里的情况是 - 从 OB 构建builtinPlugins，但缺少defaultConfig- 配置在ckeditor5/sample/index.html. 如果将此配置添加到ckeditor5/src/ckeditor.js，例如如下所示：

Editor.defaultConfig = {
    toolbar: {
        items: [
            'heading', '|', 'bold', 'italic', 'link',
            'bulletedList', numberedList', '|', 'indent', 'outdent', '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo', 'redo'
        ]
    },
    language: 'en',
    image: {
        toolbar: [
            'imageTextAlternative',
            'imageStyle:full',
            'imageStyle:side'
        ]
    },

• 我提交的相关问题， 当使用在线构建器生成的自定义构建时，工具栏默认不显示，已关闭并标记为使用在线构建器创建的包的重复项，与仍然打开的官方构建不同（ATTOW，11 月 20 日， 2020）。