進(jìn)入官網(wǎng). 能找到這個(gè)NB的編輯器是因?yàn)楣卷?xiàng)目需要一個(gè)可視化的cms編輯器，類似微信公眾號(hào)編輯文章?？梢圆迦敫鞣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)擊查看詳情. 各種自定義的使用說明
比如上圖中的菜單欄可以自定義，對(duì)已有的菜單欄定義：繼續(xù)從官方例子里面扒圖：

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

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

站在用戶的角度思考問題，與客戶深入溝通，找到安陽縣網(wǎng)站設(shè)計(jì)與安陽縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋安陽縣地區(qū)。

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

自帶的字體大小編輯有2個(gè)如下。但是顯然不太能支持我們的用法。一開始吧size擴(kuò)展成了px。但是后來經(jīng)過測(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：需要說明一下，在編輯的時(shí)候還是顯示px單位，但最終生成的源代碼使用rem，因?yàn)榫庉嬍窃趐c上，并且運(yùn)營(yíng)人員也只熟悉px這個(gè)單位，對(duì)rem沒有概念。.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方式

值得說明的是，樣式的設(shè)置等，幾本都有多套策略可以選擇。舉個(gè)栗子，官方源代碼。
這是官方的字體方向設(shè)置的源代碼。我們可以看到他就有3種方式設(shè)置：通過attribute(algin:'right')，通過class(class='ql-align-right')，通過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)一下成果：

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：Quill編輯器介紹及擴(kuò)展-創(chuàng)新互聯(lián)
本文鏈接：http://aaarwkj.com/article36/dpjhsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、用戶體驗(yàn)、微信公眾號(hào)、ChatGPT、企業(yè)建站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)