quilljs
現在富文字編輯器輪子太多了，Github 上隨便搜一下就有一堆，我需要實現的功能很簡單，所以就佛系地選了 quilljs，quilljs 是一個輕量級的富文字編輯器。
連結：
- 官網：quilljs.com/
- Github： github.com/quilljs/qui…
- React版本：github.com/zenoamaro/r…
- Vue版本：github.com/surmon-chin…
基礎功能就不多說了，看文件就好。
主要是記錄一下如何在 toolbar 上自定義一個按鈕並實現自定義格式化。
toolbar
toolbar 相關文件：quilljs.com/docs/module…
基礎用法
可以看到文件中有這麼一段程式碼：
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 上支援的一些格式化功能，比如 加粗、斜體、水平對齊等等常見的文件格式化。
可是我發現，貌似不太夠用啊。
比如我想插入一些 {{name}} 這樣的文字，並且是加粗的，總不能讓我每次都輸入 {{}} 吧，麻煩而且容易遺漏，得做成自動格式化的。
隨手翻了一下文件，quilljs 支援本地 module，toolbar 上每一個格式化功能可以看作是一個 module，翻翻原始碼：
看一下 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}} 的文字了。
效果如圖：
總結
其實理論上應該可以在 formatParam.js 中把所有事情都做掉，也就不用最後的正則替換了。
按照這個思路，我們可以在富文字編輯器按照自己所需要的格式插入任何自定義內容。
參考連結：
原文連結：quill 富文字編輯器自定義格式化