quill 富文本編輯器自定義格式化

時間 2019-11-17

標籤 quill 文本編輯器自定義格式化简体版

原文原文鏈接

quilljs

如今富文本編輯器輪子太多了，Github 上隨便搜一下就有一堆，我須要實現的功能很簡單，因此就佛系地選了 quilljs，quilljs 是一個輕量級的富文本編輯器。javascript

連接：css

基礎功能就很少說了，看文檔就好。html

主要是記錄一下如何在 toolbar 上自定義一個按鈕並實現自定義格式化。vue

toolbar

toolbar 相關文檔：quilljs.com/docs/module…java

基礎用法

能夠看到文檔中有這麼一段代碼：node

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});
複製代碼

這是 toolbar 上支持的一些格式化功能，好比加粗、斜體、水平對齊等等常見的文檔格式化。react

但是我發現，貌似不太夠用啊。git

好比我想插入一些 {{name}} 這樣的文本，而且是加粗的，總不能讓我每次都輸入 {{}} 吧，麻煩並且容易遺漏，得作成自動格式化的。github

隨手翻了一下文檔，quilljs 支持本地 module，toolbar 上每個格式化功能能夠看做是一個 module，翻翻源碼：dom

看一下 link.js 吧，簡化了一下：

import Inline from '../blots/inline';

class Link extends Inline {
  static create(value) {
    let node = super.create(value); // 建立一個節點
    node.setAttribute('href', value); // 將輸入的 value 放到 href
    node.setAttribute('target', '_blank'); // target 設爲空
    return node;
  }
  
  static formats(domNode) {
    return domNode.getAttribute('href'); // 獲取放在 href 中的 value
  }
}
Link.blotName = 'link'; // bolt name
Link.tagName = 'A'; // 渲染成 html 標籤

export { Link as default };

複製代碼

是否是實現一個簡單的自定義格式化看上去很簡單。

實現

以 vue 爲例哈，大同小異。

初始化

<quill-editor ref="myTextEditor" class="editor-area" v-model="content" :options="editorOption" @blur="onEditorBlur($event)">
</quill-editor>
複製代碼

const toolbarOptions = [
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  ['bold', 'italic', 'underline'],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'align': [] }],
  ['formatParam'],
];
data() {
  return {
    editorOption: {
	   modules: {
	     toolbar: {
	       container: toolbarOptions,
	       handlers: {},
	     },
	   },
    }
  };
},
editor() {
  return this.$refs.myTextEditor.quill;
}
複製代碼

建立

在項目組件的目錄下建立一個 formatParam.js：

import Quill from 'quill';

const Inline = Quill.import('blots/inline');

class formatParam extends Inline {
  static create() {
    const node = super.create();
    return node;
  }

  static formats(node) {
    return node;
  }
}
formatParam.blotName = 'formatParam';
formatParam.tagName = 'span';

export default formatParam;
複製代碼

我這裏沒有對 value 和 node 作任何處理，而後在 handlers 裏作處理，貌似有點蠢。。

註冊

import { quillEditor, Quill } from 'vue-quill-editor';
import FormatParam from './formatParam';

Quill.register(FormatParam);
複製代碼

使用

首先在 toolbar 上放一個按鈕是必須的，固然也能夠放 icon，我就簡單地處理一下：

mounted() {
  const formatParamButton = document.querySelector('.ql-formatParam');
  formatParamButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px; padding: 0;";
  formatParamButton.innerText = "添加參數";
}
複製代碼

效果如圖：

而後就是要註冊這個按鈕的點擊事件：

handlers: {
  formatParam: () => {
    const range = this.editor.getSelection(true); // 獲取光標位置
    const value = prompt('輸入參數名（如：name）'); // 彈框輸入返回值
    if (value) {
      this.editor.format('formatParam', value); // 格式化
      this.editor.insertText(range.index, `{{${value}}}`); // 顯示在編輯器中
      this.editor.setSelection(range.index + value.length + 4, Quill.sources.SILENT); // 光標移到插入的文字後，而且讓按鈕失效
    }
  },
}
複製代碼

渲染 html

我在自定義格式化的時候沒直接渲染成 html，而後在保存的時候作了一下：

watch: {
  content() {
    const { content } = this
    const result = content.replace(/\{\{(.*?)\}\}/g, (match, key) => `<span class="${key}">{{${key}}}</span>`);
    updateState({ content: result });
  },
}
複製代碼

這樣就行了，想要插入一個參數的時候點擊工具欄上的按鈕，就會直接在編輯器裏插入 {{xxx}} 的文本了。

效果如圖：