如何在 react/js ckeditor 5 中添加字体颜色和字体大小

Question

我在我的 React 项目中使用 ckeditor 5，我想在我的编辑器中添加字体颜色。我正在尝试添加字体插件，但出现错误

ckeditor-duplicated-modules

。任何从事此工作的人请告诉我该怎么做。

import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import Font from '@ckeditor/ckeditor5-font/src/font';

return (
    <div>
        <CKEditor
            editor={ClassicEditor}
            config={{
            plugins: [ Font ],
            toolbar: [
                'heading',  'bold', 'italic', 'fontColor','bulletedList', 'numberedList', 
                'undo', 'redo'
            ],
            fontColor: {
            colors: [
                {
                    color: 'hsl(0, 0%, 0%)',
                    label: 'Black'
                },
                {
                    color: 'hsl(0, 0%, 30%)',
                    label: 'Dim grey'
                },
                // ...
                ]
            },
            }}
            data={this.state.data}
            onChange={this.handleCkeditorState}
            onInit={(editor) => {
            this.setState({
                data: `<div>
                    ${messages.messageHTML}
                    </div>`,
            });
            }}
        />
    </div>
)

错误： CKEditorError：ckeditor-重复模块 阅读更多：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

Answer 1

尝试添加这些：

1. 检查您的插件版本是否与其他插件版本相同。例如在 package.json -

   "@ckeditor/ckeditor5-basic-styles": "^35.4.0",

   所以你的 ckeditor5-font 包应该匹配 35.4.0
2. 看起来你只是在使用

   FontColor

   插件，所以你不需要字体 - 是这样，尝试替换：

import { FontColor } from '@ckeditor/ckeditor5-font';


<CKEditor
  //...
  config={{
    plugins: [ FontColor ],
  }}
  //...

Answer 2

您不能以这种方式同时导入插件Font和构建ClassicEditor。您必须进行个人构建。

别担心，这很容易；只需使用他们的在线构建器：https://ckeditor.com/ckeditor-5/online-builder/。您将能够选择不同的字体相关插件（并毫不犹豫地通过删除所有与您的应用程序无关的插件来优化您的构建），并根据您将选择的插件构建您想要的默认工具栏。

完成后，在您的组件文件中：

• 从组件中删除 Font 和 ClassicEditor 的导入
• 从构建中导入自定义编辑器（例如

  import MyEditor from '[customBuildLocation]/build/ckeditor'

  ）
• 使用自定义编辑器作为 CKEditor 组件的编辑器
• 摆脱插件和工具栏配置