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

Posted 2023-02-16

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

【英文标题】：CKEditor5 Toolbar is not showing in Angular when using Online Build Generator

【发布时间】：2020-09-13 16:39:29

【问题描述】：

我正在使用从online build generator 生成的自定义构建。

然后我遵循Rich text editor component for Angular 中编写的文档，但使用自定义构建而不是使用official editor builds 之一。

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

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

【参考方案1】：

目前也在经历同样的事情。

我假设您也只是简单地从 build 文件夹中导入了 ckeditor.js。在我的情况下，我必须为编辑器手动定义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 在here 中确认了该问题。

我可以确认，当您从在线构建器直接将编辑器构建添加到 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'
        ]
    ,

我已提交的相关问题 Toolbar not showing by default when using custom build generated from the online builder 已关闭并标记为 Packages created with online builder differs from official builds 的副本，该问题仍然

开放

（ATTOW，2020 年 11 月 20 日）。

【讨论】：

我在这里提交了一个问题：Toolbar not showing by default when using custom build generated from the online builder #232

我也遇到了同样的问题，线上builder还是有这个问题...

可以肯定地说，即使在其他第三方角度依赖项上，我们也不能期待进一步的修复。人们开始放弃 Angular 并放弃维护他们的库。

【参考方案2】：

从我对这个问题的调查来看，在线构建器似乎只在sample/index.html文件中设置了工具栏配置。

打开此文件后，您可以看到您使用在线构建器设置的编辑器工具栏配置。

只需将此对象复制到您的工具栏项目，您就可以开始了。