React函数式组件中使用CKEditor并配置插件 & 解决CKEditor -duplicate -modules报错问题

最近公司需要使用CKEditor进行富文本编辑,最后相中了CKEditor,毕竟看中他的word导出功能和优秀的样式。 但是在配置插件的时候遇到了一些小坑，在这里记录一下。

React集成CKEditor文档地址:React component - CKEditor 5 Documentation

基本使用CKEditor(React)

按照官网安装了 CKEditor和CKEditor-classic 想通过配置config来添加ExportWord功能
此时会报错 : CKEditor -duplicate -modules

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js'; // <--- ADDED

export default function Editer() {
    return (
        <CKEditor
            editor={Editor}
            data="<p>Hello from CKEditor 5!</p>" //编辑器初始内容
            config={...} // 里面按官网配置添加的Alignment插件
	    {...}
        />
    );
}

因为官方的classic-Editor中没有这个插件 这样添加会加载两次编辑器

我们需要自己重新自定义一个编辑器 不使用官方的classic编辑器

使用官方提供的在线构建器(React集成文档中找到"Using the CKEditor 5 online builder")

1. 选择自己需要的功能 进行排版

2. 解压下载好的zip包 将其放在项目的node_modules同级下

3. 项目中执行 yarn/npm add file:./ckeditor5 将此文件夹设置为项目依赖 package.json中会出现custom-build包 为当前文件

4. 之后在项目中使用自定义的Editor即可

import React, { Component } from 'react';
import MyEditor from 'ckeditor5-custom-build/build/ckeditor'; // 用户自定义的编辑器
import { CKEditor } from '@ckeditor/ckeditor5-react'

export default function Editer() {
    return (
        <CKEditor
            editor={MyEditor}
            data="<p>Hello from CKEditor 5!</p>"
	          {...}
        />
    );
}