如何使用 wangEditor 富态编辑器

介绍：wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor （欢迎 star）

下载

直接下载：https://github.com/wangfupeng1988/wangEditor/releases
使用npm下载：npm install wangeditor （注意 wangeditor 全部是小写字母）
使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

使用：

import E from 'wangeditor' //引用wangeditor

代码：

editor = null;

componentDidMount() {
	this.initEditor()
}

initEditor () {
    const div1 = this.refs.div1
    const div2 = this.refs.div2
    const editor = new E(div1, div2)
 
    this.editor = editor
 
    editor.customConfig.zIndex = 100
    editor.customConfig.uploadImgServer = 上传地址 + '/upload',
    // 限制一次最多上传 1 张图片
    editor.customConfig.uploadImgMaxLength = 1
    //限制图片大小
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
    //设置请求头
    editor.customConfig.uploadImgHeaders = {
      // Auth: 'token'
    }
    //自定义上传参数
    editor.customConfig.uploadImgParams = {
        // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
        // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
        id: 0,
    }
    //debug 模式
    editor.customConfig.debug = true;
	// 监听函数
	editor.customConfig.uploadImgHooks = {
    before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
    },
    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },
    timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.url
        insertImg(url)

        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
    }
}

    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()
  }

自定义上传图片事件

//自定义上传图片事件
editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      console.log(files)
      if (files[0]) {
        let formData = new window.FormData()
        formData.append('file', files[0])
        formData.append('id', 0)
        fetch(config.domain + '/v1/upload', {
          method: 'POST',
          body: formData,
          headers: {
            // Auth: 'token'
            'Access-Control-Allow-Origin': '*',
          },
        }).then((res) => {
          return res.json()
        }).then((res) => {
          console.log(res)
          if (res.sta == 0) {
            // 上传代码返回结果之后，将图片插入到编辑器中
            insert(res.data)
          } else {
            console.log(res.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()

获取内容

this.editor.txt.html()

设置内容

this.editor.txt.html('<p>aliezz！</p>')

HTML

return (
	<div>
		<div ref="div1" style={{border: '1px solid #ccc'}}></div>
	    <div style={{padding: '5px 0', color: '#ccc'}}></div>
	    <div ref="div2" class="div2" style={{border: '1px solid #ccc', height: 400}}></div>
    </div>
)