Quill編輯器介紹及擴(kuò)展

進(jìn)入官網(wǎng). 能找到這個(gè)NB的編輯器是因?yàn)楣卷?xiàng)目需要一個(gè)可視化的cms編輯器，類似微信公眾號(hào)編輯文章?？梢圆迦敫鞣N卡片，模塊，問(wèn)題，圖片等等。然后插入的內(nèi)容還需要能刪除，拖拽等等。所以采用vue開發(fā)，兼容vue并兼容拖拽的文本編輯器并不多，所以在github上一番搜索找到了quill這款文本編輯器神器。
先從官方例子里面扒一個(gè)圖瞅瞅：

PS：和大多數(shù)文本編輯器長(zhǎng)得都差不多，如果功能都一樣，那也不用介紹了。 他NB，強(qiáng)大的地方就是所有能看到的，不能看到的功能統(tǒng)統(tǒng)都是一個(gè)一個(gè)獨(dú)立的模塊。全部都是可以替換的。不得不對(duì)這段文字進(jìn)行重點(diǎn)標(biāo)記。當(dāng)然其他編輯器的一些幾本功能也統(tǒng)統(tǒng)都有且不僅如此。比如文本的樣式，多媒體文件的上傳，響應(yīng)鍵盤事件，操作歷史，公式支持等等。點(diǎn)擊查看詳情. 各種自定義的使用說(shuō)明
比如上圖中的菜單欄可以自定義，對(duì)已有的菜單欄定義：繼續(xù)從官方例子里面扒圖：

當(dāng)然，如果插件自帶的功能沒(méi)有，比如你要做一個(gè)動(dòng)畫在菜單欄上加一個(gè)圖標(biāo)、選項(xiàng)或者什么的。可以對(duì)整個(gè)菜單欄進(jìn)行定義和重寫

下面從項(xiàng)目中的擴(kuò)展點(diǎn)找2個(gè)說(shuō)明一下這個(gè)NB的編輯器，當(dāng)然他的更多可擴(kuò)展功能也沒(méi)有用上，所以只有看到的官方文檔，才能理解他的可擴(kuò)展性和靈活性。

修改字體大小選擇，使用自定義的列表和單位(rem)

自帶的字體大小編輯有2個(gè)如下。但是顯然不太能支持我們的用法。一開始吧size擴(kuò)展成了px。但是后來(lái)經(jīng)過(guò)測(cè)試發(fā)現(xiàn)手機(jī)端使用的是rem，so。最后改成使用rem。

[{ 'size': ['small', false, 'large', 'huge'] }]
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//擴(kuò)展后的字體選擇[{
    // 'size': ['10px', '12px', '14px', '16px', '18px', '20px']
    //1/75 *2
    //1px =0.026rem
    //1rem=36px
    'size': ['0.26rem', '0.31rem', '0.37rem', '0.41rem', '0.47rem', '0.52rem']    }]

為了在菜單欄中顯示對(duì)應(yīng)的字體大小。加入css。差不多長(zhǎng)這樣，有多少個(gè)選項(xiàng)，就加多少個(gè)。

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: '10px';
    font-size: 10px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: '20px';
    font-size: 20px;}//默認(rèn)的樣式.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
    font-size: 14px;}//rem：需要說(shuō)明一下，在編輯的時(shí)候還是顯示px單位，但最終生成的源代碼使用rem，因?yàn)榫庉嬍窃趐c上，并且運(yùn)營(yíng)人員也只熟悉px這個(gè)單位，對(duì)rem沒(méi)有概念。.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.26rem"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.26rem"]::before {
    content: '10px';
    font-size: 10px;}

在然后在初始化quill的地方加上下面的js代碼

import Quill from 'quill'var Size = Quill.import('attributors/style/size');// Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
 Size.whitelist = ['0.26rem', '0.31rem', '0.37rem', '0.41rem', '0.47rem', '0.52rem'];
 Quill.register(Size, true);

如此之后，對(duì)我們字體大小的選擇就算擴(kuò)展完畢了，讓我們檢驗(yàn)一下成果：

當(dāng)然為了在pc上rem字體能生效，還必須得加上一行。

html {
    font-size: 36px;}

擴(kuò)展居中，靠右使用樣式，而不是class方式

值得說(shuō)明的是，樣式的設(shè)置等，幾本都有多套策略可以選擇。舉個(gè)栗子，官方源代碼。
這是官方的字體方向設(shè)置的源代碼。我們可以看到他就有3種方式設(shè)置：通過(guò)attribute(algin:'right')，通過(guò)class(class='ql-align-right')，通過(guò)style(style='text-align:right');是不是很靈活，很強(qiáng)大，任君選擇有木有

import Parchment from 'parchment';let config = {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['right', 'center', 'justify']};let AlignAttribute = new Parchment.Attributor.Attribute('align', 'align', config);let AlignClass = new Parchment.Attributor.Class('align', 'ql-align', config);let AlignStyle = new Parchment.Attributor.Style('align', 'text-align', config);export { AlignAttribute, AlignClass, AlignStyle };

那如何指定使用其他的一種呢？像下面的代碼一樣，如果使用style。則使用 Quill.import('attributors/style/align');替換默認(rèn)的，如果使用class：則使用 Quill.import('attributors/class/align');

var Align = Quill.import('attributors/style/align');Align.whitelist = ['right', 'center', 'justify'];Quill.register(Align, true);

檢驗(yàn)一下成果：

然后在來(lái)一個(gè)高級(jí)一點(diǎn)的。設(shè)置字體為粗體

quill默認(rèn)使用的是strong或者b標(biāo)簽方式。其實(shí)這也是沒(méi)有問(wèn)題的，但是架不住公司的"高級(jí)"前端對(duì)手機(jī)端的所有html標(biāo)簽都reset了。所有的hx標(biāo)簽，em，strong等語(yǔ)義標(biāo)簽全部reset了。所以沒(méi)辦法只能使用style的方式來(lái)實(shí)現(xiàn)。

import Inline from '../blots/inline';class Bold extends Inline {
  static create() {
    return super.create();
  }

  static formats() {
    return true;
  }

  optimize() {
    super.optimize();
    if (this.domNode.tagName !== this.statics.tagName[0]) {
      this.replaceWith(this.statics.blotName);
    }
  }}Bold.blotName = 'bold';Bold.tagName = ['STRONG', 'B'];export default Bold;

使用style來(lái)實(shí)現(xiàn)文字的加粗

import Quill from 'quill'let Parchment = Quill.import('parchment')class BoldStyleAttributor extends Parchment.Attributor.Style {
    value(domNode) {
        let value = super.value(domNode);
        return value;
    }

    add(node, value) {
        $(node).css('font-weight', 'bold');
        return true;
    }
    remove(node) {
        $(node).css('font-weight', 'normal');
    }}let BoldStyle = new BoldStyleAttributor('bold', 'font-weight', {
    scope: Parchment.Scope.INLINE,
    whitelist: [true, false]});export default BoldStyle;`

初始化quill的地方加上下面的代碼
./NodeEditText/TextBold”或者“./NodeEditText/TextBold.js”就是上面幾行代碼的js文件路徑。

import MyBold from './NodeEditText/TextBold'Quill.register("formats/bold", MyBold, true);

檢驗(yàn)一下成果：

諸如文字的字體啦，斜體啦，都類似寫法。就不一一展開了。官方文檔雖然是英文的，但是耐著性子看，還是能比較方便看懂的，
寫在最后：
能夠快速的自定義這個(gè)組件的前提是需要懂他的設(shè)計(jì)思想，我也只是粗淺的了解使用了一下這個(gè)組件，就不做什么總結(jié)了