CKEditor在React中的使用小贴士

最近接到一个需求要在react后台中集成一部分富文本的功能， 忙活了一下午基本搞定的时候， 接到业务方的通知，暂时不需要富文本直接上传了一张长图就行了

鉴于中间过程不是很顺利，简单记录下

富文本对于前端的同学一定不是很陌生，在以前图文混排的时代是个内容填充大杀（shen）器（keng）。

虽然核心就是一个简单的contenteditable属性，

但要是真想实现一个功能齐全，兼容性好，可扩展还bug少的富文本组件...

首先在众多开源组件之中挑选，借鉴了这篇文章汇总后，又去gayhub上看了下维护情况，最终选了CKeditor5上手。

1. 鉴于自身项目是react，用的classic版本的编辑器，直接安装

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

2. 在文件中进行引用

import CKEditor from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

3. 导入中文国际化

import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'

4. 在表单中使用

<CKEditor
  config={{
    language: 'zh-cn',  // 设置中文
  }}
  editor={ClassicEditor}
  placeholder='请编辑详情'
  data={this.state.detail} // 原始数据
  onInit={editor => {
    this.editor = editor // 缓存实例
  }}
  onChange={( event, editor ) => {
    const data = editor.getData()
    this.setState({
      detail:data
    })
    console.log( { event, editor, data } )
  }}
  // onBlur={editor => {
  //   console.log('Blur.', editor)
  // }}
  // onFocus={editor => {
  //   console.log('Focus.', editor)
  // }}
/>

ok，大功告成

等等，好像有哪里不对， 我们上传的图片好像要存到oss上去

看了下英文文档，官方给了几种方法供你选择

• 上传到Easy Image，即Ckeditor的云服务上去
• 集成CkFinder处理
• 使用SimpleAdapter进行ajax请求上传或者Base64Adapter进行转换上传
• 自己实现Adpater进行控制

看了下第三种的好像只能做简单的headers和上传地址配置

看来只好自己覆写了，

对着官方例子简单实（fu）现（zhi）

import { uploadOss, saveImgKey } from './uploadOss'

class MyUploadAdapter {
  constructor( loader ) {
    // loader实例
    this.loader = loader
  }

  // 实际上传步骤
  async upload () {
    // loader中file是个promise
    const file = await this.loader.file
    // 自己覆写此部分
    // 进行oss上传和处理
    const { result: { url, imgKey } } = await uploadOss(file)
    const { success } = await saveImgKey(imgKey)
    
    // 返回图片路径
    return {
      default: url // default字段暂不可改
    }
  }

  // 其他处理可参考官方示例
  abort() {
  }
  
  progress() {
  }
}

// 暴露adapter给组件使用
export default function CustomUploadAdapterPlugin (editor) {
  editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
    return new MyUploadAdapter(loader)
  }
}

在组件中添加配置

<CKEditor
  config={{
    language: 'zh-cn',
    extraPlugins: [ CustomUploadAdapterPlugin ], // 自定义图片上传
  }}
  ...
 />

再试下，图片经过oss和处理后，在富文本里有了正确的地址

其他功能还未做过多了解，不过Ckeditor维护很勤，整体来看不失为一个不错的解决方法。