關(guān)于寫此文的目的：

第一次接觸富文本編輯器，尤其是react-quill這種，百度不到的各種坑，踩了無數(shù)的坑終于搞明白了。

1.安裝

npm i react-quill --save
需要用到emjo的話還需要npm i quillEmoji --save
安裝完之后頁面引進(jìn)

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import quillEmoji from 'quill-emoji';
import "quill-emoji/dist/quill-emoji.css"; //這個(gè)不引入的話會(huì)出現(xiàn)emoji框一直在輸入框下面的情況
import { ImageDrop } from './plugin/quill-image-drop-module'; //講圖片拖進(jìn)文本框，可以直接安裝quill-image-drop-module；但由于我的webpack版本過低，無法兼容es6，所以把插件拿出來了
//注冊ToolbarEmoji，將在工具欄出現(xiàn)emoji；注冊TextAreaEmoji，將在文本輸入框處出現(xiàn)emoji。VideoBlot是我自定義的視頻組件，后面會(huì)講，
const { EmojiBlot, ShortNameEmoji, ToolbarEmoji, TextAreaEmoji } = quillEmoji;
Quill.register({
  'formats/emoji': EmojiBlot,
  'formats/video': VideoBlot,
  'modules/emoji-shortname': ShortNameEmoji,
  'modules/emoji-toolbar': ToolbarEmoji,
  'modules/emoji-textarea': TextAreaEmoji,
  // 'modules/ImageExtend': ImageExtend, //拖拽圖片擴(kuò)展組件
  'modules/ImageDrop': ImageDrop, //復(fù)制粘貼組件
}, true);

next。

初始化富文本實(shí)例，我寫在constructor里，module也是寫在這里邊

constructor(props) { super(props); this.reactQuillRef = null; }

富文本組件react-quill參數(shù)

<ReactQuill
      ref={(el) => { this.reactQuillRef = el }}
      defaultValue={postRichText}
       key="1"
       id="textDiv1" theme="snow" modules={this.modules}  />

工具欄modules的定義基本屬性如下：

 this.modules = {
      toolbar: {
        container: [
          [{ 'size': ['small', false, 'large', 'huge'] }], //字體設(shè)置
          // [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //標(biāo)題字號，不能設(shè)置單個(gè)字大小
          ['bold', 'italic', 'underline', 'strike'],  
          [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
          ['link', 'image'], // a鏈接和圖片的顯示
          [{ 'align': [] }],
          [{
            'background': ['rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
              'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
              'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
              'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
              'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
              'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
              'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
              'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
              'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
              'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
              'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
              'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)']
          }],
          [{
            'color': ['rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
              'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
              'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
              'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
              'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
              'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
              'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
              'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
              'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
              'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
              'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
              'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)']
          }],
          ['clean'], //清空
          ['emoji'], //emoji表情，設(shè)置了才能顯示
          ['video2'], //我自定義的視頻圖標(biāo)，和插件提供的不一樣，所以設(shè)置為video2
        ],
        handlers: {
          'image': this.imageHandler.bind(this), //點(diǎn)擊圖片標(biāo)志會(huì)調(diào)用的方法
          'video2': this.showVideoModal.bind(this),
        },
      },
      // ImageExtend: {
      //   loading: true,
      //   name: 'img',
      //   action: RES_URL + "connector?isRelativePath=true",
      //   response: res => FILE_URL + res.info.url
      // },
      ImageDrop: true,
      'emoji-toolbar': true,  //是否展示出來
      "emoji-textarea": false, //我不需要emoji展示在文本框所以設(shè)置為false
      "emoji-shortname": true, 
    }

想要的最終效果如下圖：

image.png

到這一步，界面是能正常顯示了，但功能不完善，next

3.功能的開發(fā)

1.上傳本地圖片到服務(wù)器，代碼如下：

//這是點(diǎn)擊圖片圖標(biāo)觸發(fā)的事件
imageHandler() {
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.setAttribute('multiple', 'multiple')
    input.click()
    const that = this;
    input.onchange = async () => {
      Array.from(input.files).forEach(item => {
      //業(yè)務(wù)需求安裝了壓縮圖片的插件，可忽略
        new Compressor(item, {
          quality: 0.8,
          convertSize: 1024 * 1024 * 8,
          success(result) {
          //很很很很重要的一步
            const formData = new FormData();
            formData.append('file', result, result.name);
            Axios({
              method: 'post',
              data: formData,
              url: config.RES_URL + 'connector?isRelativePath=true'，//圖片上傳的接口
            }).then(res => {
              if (res.data.success) {
                let quill = that.reactQuillRef.getEditor();//獲取到編輯器本身
                const cursorPosition = quill.getSelection().index;//獲取當(dāng)前光標(biāo)位置
                const link = config.RES_URL + res.data.info.url;
                quill.insertEmbed(cursorPosition, "image", link);//插入圖片
                quill.setSelection(cursorPosition + 1);//光標(biāo)位置加1
              }
            })
          },
        });
      })
    }
  }

到這里已經(jīng)能實(shí)現(xiàn)本地圖片上傳到服務(wù)器的需求了
2.視頻自定義

 //上傳視頻處理
  addVideoItem = (img, url) => {
    let quill = this.reactQuillRef.getEditor();//獲取到編輯器本身
    let cursorPosition = quill.selection.savedRange.index
    quill.insertEmbed(cursorPosition, 'Video', {
      url,
      controls: 'controls',
      poster: img,
      width: '100%',
      controlslist: 'nodownload noremoteplayback',
      oncontextmenu: 'return false'
    })
    // 光標(biāo)不加1的話視頻刪不掉
    quill.setSelection(cursorPosition + 1);//光標(biāo)位置加1
    this.setState({
      upVideoShow: false
    })
  }

這段代碼功能實(shí)現(xiàn)的前提是，我剛開始引入的自定義視頻組件，創(chuàng)建視頻標(biāo)簽，代碼如下：

const Quill = require('quill');

const BlockEmbed = Quill.import('blots/block/embed')
export class VideoBlot extends BlockEmbed {
  static create(value) {
    let node = super.create()
    node.setAttribute('src', value.url)
    node.setAttribute('controls', value.controls)
    node.setAttribute('width', value.width)
    node.setAttribute('poster', value.poster)
    node.setAttribute('controlslist', 'nodownload noremoteplayback')
    node.setAttribute('oncontextmenu', 'return false')
    return node;
  }
  // 富文本初始化取參數(shù)，如果有編輯富文本的功能的話，這段代碼就需要加上
  static value(node) {
    return {
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      width: node.getAttribute('width'),
      poster: node.getAttribute('poster'),
      controlslist: node.getAttribute('controlslist'),
      oncontextmenu: node.getAttribute('oncontextmenu')
    };
  }
}
VideoBlot.blotName = 'Video';
VideoBlot.tagName = 'video';
VideoBlot.className = 'ql-video';

完結(jié)
踩坑無數(shù)搞了兩個(gè)星期才弄的明明白白，隔了一個(gè)月再來寫當(dāng)初怎么艱難開始的也都忘了，寫不出來什么了。如有遇到什么問題歡迎留言