React中的wangeditor富文本编辑器

这边配置简单带过，主要是记录一下图片如何插入

工具栏的配置

  // 工具栏配置
  const toolbarConfig = {
   //你不要的
    excludeKeys: [
      'group-video', //视频
    ],
   //你要的
    // toolbarKeys: [
    //   'headerSelect', //正文
    //   'blockquote', //引号
    //   '|', //分隔线
    //   'bold', //加粗
    //   'underline', //下划线
    //   'italic', //倾斜
    //   'color',
    //   'bgColor',
    //   '|',
    //   'fontSize',
    //   'fontFamily',
    //   'lineHeight',
    //   '|',
    //   'bulletedList',
    //   'numberedList',
    //   'uploadImage',
    //   // 'image', // 插入图片
    //   // 'table', // 表格
    //   // 'undo', // 撤销
    //   // 'redo', // 重复
    // ],
  }

  // 编辑器配置
  const editorConfig = { MENU_CONF: {} }
  editorConfig.placeholder = '请输入内容...'

图片上传和插入的editorConfig配置

 主要是在constomUpload自带的函数（完成上传时触发），需要通过自己配置接口，通过FormData来进行图片文件上传格式的转化

  editorConfig.MENU_CONF['uploadImage'] = {
    // server: `${API_URL}api/files/upload`,
    // 自定义增加 http  header
    // headers: {
    //     Accept: 'text/x-json',
    //     otherKey: 'xxx'
    // },
    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //   userName: 'yunjin_file_upload',
    //   password: 'yunjin_upload_password',
    //   domain: 'product',
    //   secret: 'N',
    // },
    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 10 * 1024 * 1024, // 10M
    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 10,
    // 小于该值就插入 base64 格式（而不上传），默认为 0
    //base64LimitSize: 5 * 1024 // 5kb
    // 自定义插入图片
    customInsert(res, insertFn) {
      // res 即服务端的返回结果
      console.log(res, insertFn)
      // 从 res 中找到 url alt href ，然后插图图片
      insertFn(`/file${res.result.fileList[0].url}`)
    },
    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒
    // 上传之前触发
    onBeforeUpload(file) {
      // file 选中的文件，格式如 { key: file }
      return file

      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress) {
      // progress 是 0-100 的数字
      console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file, res) {
      console.log(`${file.name} 上传成功`, res)
    },
    // 单个文件上传失败
    onFailed(file, res) {
      console.log(`${file.name} 上传失败`, res)
    },
    // 上传错误，或者触发 timeout 超时
    onError(file, err, res) {
      console.log(`${file.name} 上传出错`, err, res)
    },
    customUpload(file, insertFn) {
      const data = new FormData()
      data.append('file', file) // file 即选中的文件 主要就是这个传的参数--查看接口需要带什么参数

      request
        .post(`api/files/upload`, {
          // file: file,
          data,
        })
        .then(function (res) {
          console.log('qz-用户自定义上传图片', res)
          // const url = "https:// /" + res.data.data.path; //拼接成可浏览的图片地址
          insertFn(res.msg.url) //插入图片
        })
        .catch(function (error) {
          console.log(error)
        })
    },
  }

主体

import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
   <Toolbar
            // editor为Editor组件生成的实例，关联Toolbar和Editor组件
            editor={editor}
            //默认配置，可以不提供
            defaultConfig={toolbarConfig}
            mode="default"
            style={{ borderBottom: '1px solid #ccc' }}
          />
          <Editor
            //默认配置，可以不提供
            defaultConfig={editorConfig}
            // value: 编辑器中显示的文本
            value={location.state?.id ? editArtical.content : html}
            // 2. onCreated: 编辑器创建完毕时的回调函数,会把编辑器实例存入editor状态
            onCreated={setEditor}
            // 3. onChange: 编辑器内容变化时的回调函数。
            // editor.getHtml() 获取编辑器的内容
            onChange={(editor) => setHtml(editor.getHtml())}
            mode="default"
            style={{ height: '500px', overflowY: 'hidden' }}
          />