背景

项目中需要新增系统说明功能，需要使用富文本编辑框实现系统说明的实时修改，选择了较为成熟的前端富文本解决方案CKEditor来实现。

CKEditor4与CKEditor5 比较

CKEditor5将富文本编辑框的几乎所有功能做了模块化分解，其特点总结如下：

使用方式	优点	缺点
下载源码，然后进行定制化配置，编译后将编译后的代码引入项目中	不需要单独编译，不影响原有项目编译速度	代码需要单独维护，且如果需要更改配置，需要重新编译打包
引入项目中	方便修改配置	需要更改原项目的webpack配置，并影响打包效率

除此之外，CKEditor5 版本最不方便的地方在于getData获取的表单不带有样式，不能直接显示，需要放在容器中才能自动继承容器中的样式。

CKEditor4给我的感觉就是文档更为详细，更容易入手，而且几乎所有功能只需要做配置，缺点可能是因为没有做模块化分离，更能代码上更为臃肿。

CKEditor5 使用总结

图片上传

需要自定义图片上传方法，并且如果上传失败，需要清除已经上传的图片

class UploadAdapter {
  constructor(loader, editor) {
    this.loader = loader;
    this.editor = editor;
    this.oldValue = editor.getData();
  }
  upload() {
    return new Promise((resolve, reject) => {
      const data = new FormData();
      data.append('upload', this.loader.file);
      data.append('allowSize', 10); //允许图片上传的大小/兆
      fetch({
        path: '/help/uploadImg',
        method: 'POST',
        postData: data,
        success: function (res) {
          resolve({
            default: res.url
          });
        },
        error: (res) => {
          this.editor.setData(this.oldValue);
          handleError({ message: res.message });
          reject(res.message);
        }
      });
    });
  }
  abort() {}
}
export default UploadAdapter;

CKEditor4 使用总结

高度适配

height:
            window.innerWidth > 1560
              ? window.innerHeight - 175
              : window.innerHeight - 205,

说明，因为上面的编辑框没有做两行，因此在1560分辨率以下会变成两行

多语言适配

直接使用language进行配置，需要注意切换语言需要重新渲染整个CKEditor组件

内容显示

<div
      style={{ height: window.innerHeight - 150 }}
      className='ckeditor-con'
      dangerouslySetInnerHTML={{ __html: data }}
    ></div>

超出内容显示滚动条

  .ckeditor-con {
    margin: 20px;
    overflow-y: auto;
  }

解决Token认证问题

需要在请求头部设置token的相关信息，并且将withCredentials设置为true（凭据信息(cookie、HTTP认证及客户端SSL证明等)）,代码如下所示：

<CKEditor
    onfileUploadRequest={(evt) => {
      var fileLoader = evt.data.fileLoader,
        configXhrHeaders = {
          Authorization: getToken()
        },
        header;
      if (configXhrHeaders) {
        for (header in configXhrHeaders) {
          fileLoader.xhr.setRequestHeader(header, configXhrHeaders[header]);
        }
      }
      fileLoader.xhr.withCredentials = true;
    }}
    config={{...}}
/>

CKEditor 使用总结

背景