如何在 React 应用程序中向 CKEditor 5 添加待办事项列表功能？答案

【问题标题】：How add To-do lists feature to CKEditor 5 in react application?如何在 React 应用程序中向 CKEditor 5 添加待办事项列表功能？
【发布时间】：2022-10-16 05:57:12
【问题描述】：

我的应用程序中有一个简单的 ClassicEditor 配置，它运行良好，但我还想添加一些额外的插件，例如 todo-list enter link description here

我很难做到这一点。如何使用 React 和 CKEditor 5 正确添加待办事项列表功能或其他功能？

当我尝试从 ckeditor 导入 TodoList 功能时，出现下一个错误

Uncaught CKEditorError: ckeditor-duplicated-modules

我的代码：

    import { CKEditor } from "@ckeditor/ckeditor5-react";
    import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
    import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
    
    export default function ScriptTextSection({ script, dispatch }) {
    
      const onChangeScript = (script) => {
        return dispatch(scriptTextFieldUpdateAction({ script }));
      };
    
      return (
        <div className="script_section">
          <CKEditor
            editor={ClassicEditor}
            data={script}
            config={{
              toolbar: [
                "heading",
                "|",
                "bold",
                "italic",
                "link",
                "bulletedList",
                "numberedList",
                "blockQuote",
                "|",
                "undo",
                "redo",
                "todoList"
              ],
             plugins: [TodoList]
            }}
            onReady={(editor) => {}}
            onChange={(event, editor) => {
              const data = editor.getData();
              return onChangeScript(data);
            }}
          />
        </div>
      );
    }

【问题讨论】：

标签： reactjs ckeditor

【解决方案1】：

在您提供的 Todo List 链接的安装部分，有一个指向与 installing plugins 相关的专用页面的链接。您不能只在导入的 CKEditor 中添加额外的插件。您需要 add a plugin to the build 稍后将其包含在您的项目中，或者 add a plugin to the editor 并重建它。

我没有在此处添加代码，因为有人可能只是复制粘贴它而没有阅读使其工作所需的完整步骤。

【讨论】：