React Editor - 富文本编辑器推荐

需求

• 基本内容的输入，缩进、换行、居中、字体大小、颜色；
• 图片上传到自己的CDN服务器，不用Base64；
• 可以输入视频的URL，并在线播放，暂不纳入

实现

编辑器有哪些？这里只列出个人使用过的几个

• react-quill （轻量，基本功能齐全，但自定义上传有阻碍）
• CKEditor （新版用的ES6语法，需要编译，UI友好，其他功能都OK、React版）
• wangeditor （功能齐全、有自定义上传的配置，兼容支持较好）
• tinymce-react （功能强大、想用的功能、配置都有，自己的项目在用，但只支持IE11+）

---

列出 wangeditor 的使用，及自定义上传配置

1. npm install依赖

npm install wangeditor --save

2. 在jsx文件中引入

import E from 'wangeditor'

 

3. HTML结构

4. 初始化使用

componentDidMount () {
   this.initEditor()
}

initEditor () {
    const elem = this.refs.editorElem
    const editor = new E(elem)

    this.editor = editor

    editor.customConfig.zIndex = 100
    editor.customConfig.uploadImgServer = utils.url + '/fileclient-management/api/uploadpic'
    // 限制一次最多上传 1 张图片
    editor.customConfig.uploadImgMaxLength = 1
    editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      console.log(files)
      if (files[0]) {
        const formData = new window.FormData()
        formData.append('file', files[0], 'cover.jpg')
        fetch(utils.url + '/fileclient-management/api/uploadpic', {
          method: 'POST',
          body: formData
        }).then((res) => {
          return res.json()
        }).then((res) => {
          const data = res.resultData
          if (data) {
            // 上传代码返回结果之后，将图片插入到编辑器中
            insert(data.resourceUrl)
          } else {
            console.log(data.msg)
          }
        })
      } else {
        message.info('請選擇要上傳的圖片')
      }
    }
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      // 'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      // 'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      // 'emoticon', // 表情
      'image', // 插入图片
      // 'table', // 表格
      // 'video', // 插入视频
      // 'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    editor.customConfig.lang = {
      '设置标题': 'Title',
      '字号': 'Size',
      '文字颜色': 'Color',
      '设置列表': 'List',
      '有序列表': '',
      '无序列表': '',
      '对齐方式': 'Align',
      '靠左': '',
      '居中': '',
      '靠右': '',
      '正文': 'p',
      '链接文字': 'link text',
      '链接': 'link',
      '上传图片': 'Upload',
      '网络图片': 'Web',
      '图片link': 'image url',
      '插入视频': 'Video',
      '格式如': 'format',
      '上传': 'Upload',
      '创建': 'init'
    }
    editor.create()
  }

5. 提交或赋值的方法

提取内容：

this.editor.txt.html()

获取内容后填入：

this.editor.txt.html(data.content)

---

tinymce-react 的使用，及自定义上传配置，需要去官网申请一个密钥apiKey: https://www.tiny.cloud/get-tiny/

1. npm install 依赖

npm install @tinymce/tinymce-react --save

2. 文件中引入

import { Editor } from '@tinymce/tinymce-react'

3. HTML结构，填写apiKey，注意这里自定义上传图片或文件时需要写自己的方法（imagesUploadHandler）

4. 初始化使用，自定义上传图片的方法，imagesUploadHandler

componentDidMount () {
    this.initEditor()
}

  initEditor () {
    const editor = this.refs.tinyEditor
    this.editor = editor.editor
  }

  imagesUploadHandler = (blobInfo, success, failure) => {
    if (blobInfo.blob()) {
      const formData = new window.FormData()
      formData.append('file', blobInfo.blob(), blobInfo.filename())
      fetch(utils.url + '/fileclient-management/api/uploadpic', {
        method: 'POST',
        body: formData
      }).then((res) => {
        return res.json()
      }).then((res) => {
        const data = res.resultData
        if (data) {
          // 将图片插入到编辑器中
          success(data.resourceUrl)
        } else {
          failure(data.msg)
        }
      })
    } else {
      message.info('請選擇要上傳的圖片')
    }
  }

5. 提取内容、设置内容的方法

提取内容：

this.editor.getContent()

设置内容（设置state的content）：

data，是服务器返回的数据

this.setState({
    content: data.content
})

 

至此