富文本編輯器quill.js?開發(fā)之自定義插件示例詳解

更新時(shí)間：2023年08月14日 09:17:05 作者：Grewer

這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

quill

在 quill.js 中，擴(kuò)展性最強(qiáng)大的功能就是插件

本文主要以一個(gè)圖片擴(kuò)展的插件來介紹 quill 插件開發(fā)

在 quill.js 中他有著自己的名字: Modules，而他也內(nèi)置了 5 種插件：

TOOLBAR
KEYBOARD
HISTORY
CLIPBOARD
SYNTAX

分別是: 自定義工具欄、鍵盤事件控制、撤銷/重做功能配置、剪貼板配置、語(yǔ)法高亮

本文中的例子主要來源于 quill 最有名插件之一：https://github.com/kensnyder/quill-image-resize-module

modules 模板

先建立一個(gè)簡(jiǎn)單的 modules demo

創(chuàng)建文件 modules/index.ts：

export default class QuillResize {
  private quill: any;
  constructor(quill, options = {}) {
    // 賦值, 備用
    this.quill = quill;
    this.onCreate()
  }
  onCreate () {
    console.log('onCreate')
    // 在這里我們開始做一些事情
  }
}

App.tsx 引用 modules:

import ImageResize from './modules/index'
Quill.register('modules/resize', ImageResize);
function App() {
  const modules = useMemo(() => ({
    toolbar: {
      container: '#toolbar',
    },
    resize: { // resize 就是上面注冊(cè)的名字 'modules/resize'
      foo: 1 // 這里傳一個(gè)自定義的參數(shù)
    }
  }), []);
  // ...
  return (<div className={'container'}>
    <CustomToolbar/>
    <ReactQuill ref={editorRef} theme="snow" value={value} modules={modules} onChange={setValue}/>
  </div>)
}

這就是 modules 的雛形, 現(xiàn)在我們可以做任何想做的事了！

圖片交互

我們需要縮放圖片，那么就需要給圖片添加狀態(tài)，即點(diǎn)擊圖片之后，用戶知道它是能夠交互的

添加監(jiān)聽事件，讓用戶知道高亮的是什么元素：

export default class QuillResize {
  constructor(quill, options = {}) {
    this.quill = quill;
    this.quill.root.addEventListener('mousedown', this.handleClick, false);
  }
  handleClick = (evt)=> {
    let show = false;
    let blot;
    const target = evt.target;
    if (target && target.tagName) {
      // 在 quill 編輯器中找到對(duì)應(yīng)的點(diǎn)擊結(jié)構(gòu)
      blot = this.quill.constructor.find(target);
      if (blot) {
        // 如果有,再通過 judgeShow 函數(shù)判斷是否該高亮
        show = this.judgeShow(blot, target);
      }
    }
    // 如果需要高亮, 則阻止默認(rèn)動(dòng)作(如 a 標(biāo)簽等等)
    if (show) {
      evt.preventDefault();
      return;
    }
    if (this.activeEle) {
      // 如果點(diǎn)擊在其他位置, 已經(jīng)聚焦圖片了, 那就取消高亮
      this.hide();
    }
  }
}

handleClick 流程：

judgeShow 判斷是否應(yīng)該聚焦圖片：

judgeShow = (blot, target) => {
    let res = false;
    if (!blot) return res;
    // 數(shù)據(jù)的一些判斷和補(bǔ)充
    if (!target && blot.domNode) target = blot.domNode;
    // 參數(shù), 支持最小是 10px 的圖片, 可從外部傳入
    const options = {
        limit: {
          minWidth: 10,
        },
      }
    if (!options) return res;
    // 如果當(dāng)前聚焦的是再次點(diǎn)擊的,則直接 return
    if (this.activeEle === target) return true;
    // 判斷大小的限制
    const limit = options.limit || {};
    if (!limit.minWidth || (limit.minWidth && target.offsetWidth >= limit.minWidth)) {
      res = true;
      // 當(dāng)前聚焦和點(diǎn)擊的圖片不是同一個(gè)的時(shí)候, 隱藏原有的
      if (this.activeEle) {
        this.hide();
      }
      // 重新賦值
      this.activeEle = target;
      this.blot = blot;
      // 調(diào)用 show 方法, 顯示聚焦樣式
      this.show();
    }
    return res;
  }

顯示圖片高亮聚焦樣式

show = ()=> {
  this.showOverlay(); // 顯示樣式
  // this.initializeModules(); //初始化拖動(dòng)事件/其他事件 這里暫不開放
  // 如果有樣式, 則添加聚焦樣式
  if (this.activeEle) this.activeEle.classList.add(this.activeClass);
}
showOverlay = () => {
  if (this.overlay) {
    this.hideOverlay();
  }
  // 取消光標(biāo)選中
  this.quill.setSelection(null);
  // 阻止用戶選中
  this.setUserSelect('none');
  // 創(chuàng)建一個(gè)遮罩
  this.overlay = document.createElement('div');
  // 添加遮罩樣式
  Object.assign(this.overlay.style, this.overlayStyle);
  // 插入到編輯器中
  this.quill.root.parentNode.appendChild(this.overlay);
  this.hideProxy = () => {
    if (!this.activeEle) return;
    this.hide();
  };
  // 監(jiān)聽輸入事件, 發(fā)生變化則隱藏
  this.quill.root.addEventListener('input', this.hideProxy, true);
  // 監(jiān)聽滾動(dòng)事件, 遮罩要隨著滾動(dòng)偏移
  this.quill.root.addEventListener('scroll', this.updateOverlayPosition);
  // 樣式上添加具體的坐標(biāo)
  this.repositionElements();
};

圖片聚焦樣式：

滾動(dòng)事件：

模塊擴(kuò)展

在圖片聚焦時(shí)，添加額外功能，如圖片的縮放

新增文件 Resize.ts

class Resize {
  onCreate = () => {
    this.boxes = [];
    // 添加手柄
    this.addBox('nwse-resize'); // top left
    this.addBox('nesw-resize'); // top right
    this.addBox('nwse-resize'); // bottom right
    this.addBox('nesw-resize'); // bottom left
    // 計(jì)算坐標(biāo)
    this.positionBoxes();
  };
  addBox = cursor => {
    const box = document.createElement('div');
    Object.assign(box.style, this.handleStyles);
    box.style.width = `${this.handleStyles.width}px`;
    box.style.height = `${this.handleStyles.height}px`;
    // 監(jiān)聽動(dòng)作, 拖動(dòng)時(shí)觸發(fā)函數(shù)
    box.addEventListener('mousedown', this.handleMousedown, false);
    // 插入元素
    this.overlay.appendChild(box);
    // 記錄到 boxes 中
    this.boxes.push(box);
  };
}

按下手柄時(shí)觸發(fā)拖動(dòng)事件

handleMousedown = evt => {
  // 修改狀態(tài)
    this.blot.handling && this.blot.handling(true);
    this.dragBox = evt.target;
    this.dragStartX = evt.clientX;
    this.dragStartY = evt.clientY;
    // 存儲(chǔ)坐標(biāo)
    this.preDragSize = {
      width: this.activeEle?.offsetWidth || 0,
      height: this.activeEle?.offsetHeight || 0,
    };
    // 存儲(chǔ)原本尺寸
    this.naturalSize = this.getNaturalSize();
    const {width, height} = this.naturalSize;
    this.localRatio = height / width;
    this.editorMaxWidth = this.quill.container.clientWidth - 30;
    // 修改手柄的 cursor 屬性
    this.setCursor(this.dragBox!.style.cursor);
    // 監(jiān)聽拖動(dòng)和放開事件
    // 根據(jù)拖動(dòng)的距離, 計(jì)算圖片的尺寸,進(jìn)行縮放
    // 在 mouseup 中釋放監(jiān)聽事件
    document.addEventListener('mousemove', this.handleDrag, false);
    document.addEventListener('mouseup', this.handleMouseup, false);
  };

大體流程：