React项目中集成CKEditor并添加自定义插件的正确实现方式是什么

你当前使用预构建版本@ckeditor/ckeditor5-build-classic的核心问题是，预构建包已经完成编译，无法直接追加额外插件，修改源码再单独构建的方案开发效率极低。推荐使用如下方案彻底解决该问题：

推荐方案：将CKEditor5源码集成到项目自身构建流程 #

该方案可以实现插件配置修改后热更新，不需要单独执行CKEditor的构建命令，步骤如下：

• 卸载原有预构建包：npm uninstall @ckeditor/ckeditor5-build-classic
• 安装CKEditor核心依赖、React组件以及你需要的所有插件（含Base64上传适配器）：

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-heading @ckeditor/ckeditor5-bold @ckeditor/ckeditor5-italic @ckeditor/ckeditor5-block-quote @ckeditor/ckeditor5-link @ckeditor/ckeditor5-list @ckeditor/ckeditor5-image @ckeditor/ckeditor5-table @ckeditor/ckeditor5-media-embed @ckeditor/ckeditor5-undo @ckeditor/ckeditor5-upload @ckeditor/ckeditor5-adapter-base64

• 安装项目构建工具对应的CKEditor处理依赖：
  • Vite项目：npm install --save-dev vite-plugin-ckeditor5
  • Webpack/CRA项目：npm install --save-dev @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/ckeditor5-dev-utils css-loader postcss-loader raw-loader style-loader
• 调整项目构建配置，引入CKEditor对应的处理插件：
  以Vite为例，vite.config.js修改如下：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import ckeditor5 from 'vite-plugin-ckeditor5'
  
  export default defineConfig({
    plugins: [react(), ckeditor5()]
  })
  

  CRA未eject的项目可通过customize-cra添加对应的webpack loader规则。
• 项目内新建ckeditorConfig.js文件，自行组装编辑器实例：

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Bold from '@ckeditor/ckeditor5-bold/src/bold';
import Italic from '@ckeditor/ckeditor5-italic/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Base64UploadAdapter from '@ckeditor/ckeditor5-adapter-base64/src/base64uploadadapter';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  Paragraph,
  Heading,
  Bold,
  Italic,
  BlockQuote,
  Link,
  List,
  Image,
  ImageUpload,
  Base64UploadAdapter,
  Table,
  TableToolbar,
  MediaEmbed,
  Undo
];

ClassicEditor.defaultConfig = {
  toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
            'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo'],
  heading: {
      options: [
          { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
          { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
          { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
      ]
  },
  table: {
    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  },
  language: 'zh-cn'
};

• 修改App.js调用逻辑，导入自定义的ClassicEditor即可：

import ClassicEditor from './ckeditorConfig';
import { CKEditor } from '@ckeditor/ckeditor5-react';

// 组件内渲染逻辑
return(
  <CKEditor
    editor={ ClassicEditor }
    data={content}
    onReady={ editor => {
        console.log( 'Editor is ready to use!', editor );
    } }
    onChange={ ( event, editor ) => {
        const data = editor.getData();
        console.log( { event, editor, data } );
    } }
  />
)

方案优势 #

• 所有CKEditor的配置和插件都存放在项目源码内，不需要维护额外的CKEditor构建仓库
• 修改插件、调整配置后直接跟随项目的热更新生效，不需要单独执行CKEditor的构建命令
• 依赖管理更清晰，所有插件版本统一管控，不会出现版本不兼容问题

内容的提问来源于stack exchange，提问作者CCCC