vue中使用vue-quill-editor富文本編輯器浩村,自定義toolbar修改工具欄options

基于webpack和vue

一露戒、npm 安裝 vue-quill-editor

二描验、在main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

三白嘁、在模塊中引用

<template>
     <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
</template> 
<script>
    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{}
            }
        },
        methods:{
            onEditorBlur(){//失去焦點(diǎn)事件
            },
            onEditorFocus(){//獲得焦點(diǎn)事件
            },
            onEditorChange(){//內(nèi)容改變事件
            }
        }
    }
</script>   

這樣引入后你會得到這樣一個編輯器


那么你如果不需要那么多的工具欄功能要怎么辦呢;應(yīng)該是通過options來修改但是他的默認(rèn)值是什么的
我在百度找了一圈也沒找到方法
最后在https://quilljs.com/docs/themes/這個官方文檔里面看到了類似的方法

初始值的設(shè)置應(yīng)該是一樣的吧
所以我就照著toolbar部分去修改了options,把上面的script部分修改如下:

<script>
    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{
                    modules:{
                        toolbar:[
                          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                           ['blockquote', 'code-block']
                        ]
                    }
                }
            }
        },
        methods:{
            onEditorBlur(){//失去焦點(diǎn)事件
            },
            onEditorFocus(){//獲得焦點(diǎn)事件
            },
            onEditorChange(){//內(nèi)容改變事件
            }
        }
    }
</script>   

果然 生效了 只顯示了我寫在toolbar里面的模塊


那么toolbar工具欄對應(yīng)功能的模塊名是什么呢 我繼續(xù)往下看文檔 發(fā)現(xiàn)大致上有以下的功能

背景顏色 - background
加粗- bold
顏色 - color
字體 - font
內(nèi)聯(lián)代碼 - code
斜體 - italic
鏈接 - link
大小 - size
刪除線 - strike
上標(biāo)/下標(biāo) - script
下劃線 - underline
引用- blockquote
標(biāo)題 - header
縮進(jìn) - indent
列表 - list
文本對齊 - align
文本方向 - direction
代碼塊 - code-block
公式 - formula
圖片 - image
視頻 - video
清除字體樣式- clean

然而我試著直接引入發(fā)現(xiàn)有部分的圖標(biāo)并沒有顯示膘流;
然后我發(fā)現(xiàn)他有些如list這種列表應(yīng)該是有默認(rèn)值絮缅,我在很后面的文檔里發(fā)現(xiàn)了這個默認(rèn)格式規(guī)范 這個官方文檔也是個坑 內(nèi)容不寫到一塊的 還好我聰明機(jī)智鲁沥;


大致上分為這幾類:

1.只需要填寫功能名的
加粗 - bold;
斜體 - italic
下劃線 - underline
刪除線 - strike
引用- blockquote
代碼塊 - code-block
公式 - formula
圖片 - image
視頻 - video
清除字體樣式- clean
這一類的引用 直接['name','name']這種格式就好了

2.需要有默認(rèn)值的
標(biāo)題 - header  
[{ 'header': 1 }, { 'header': 2 }] 值字體大小

列表 - list 
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered耕魄,bullet

上標(biāo)/下標(biāo) - script 
 [{ 'script': 'sub'}, { 'script': 'super' }],  值sub画恰,super

縮進(jìn) - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1,+1等

文本方向 - direction
[{ 'direction': 'rtl' }],    值rtl

這部分如圖所示會填寫的內(nèi)容對應(yīng)提供的值展示功能的圖標(biāo) 如果多個值他家就顯示多個圖標(biāo)


3.有多個值 以下拉列表形式顯示
大小 - size
 [{ 'size': ['small', false, 'large', 'huge'] }],  

標(biāo)題 - header
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

這部分顯示如圖所示 以下拉列形式顯示


4.有系統(tǒng)默認(rèn)值的功能只需填寫一個空數(shù)組 就會有出現(xiàn)默認(rèn)的選項(xiàng)
顏色 - color
背景顏色 - background
字體 - font
文本對齊 - align
他們的格式都是
[{ 'color': [] }, { 'background': [] }], 
[{ 'font': [] }],
[{ 'align': [] }]
這種格式

效果如下 會有默認(rèn)值出現(xiàn)


toolbar自定義工具欄就是這樣咯 剩下的就是根據(jù)填寫功能到options的modules里就可以了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吸奴,一起剝皮案震驚了整個濱河市允扇,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌奄抽,老刑警劉巖蔼两,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件甩鳄,死亡現(xiàn)場離奇詭異逞度,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)妙啃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門档泽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人揖赴,你說我怎么就攤上這事馆匿。” “怎么了燥滑?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵渐北,是天一觀的道長。 經(jīng)常有香客問我铭拧,道長赃蛛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任搀菩,我火速辦了婚禮呕臂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肪跋。我一直安慰自己歧蒋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布州既。 她就那樣靜靜地躺著谜洽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪吴叶。 梳的紋絲不亂的頭發(fā)上褥琐,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機(jī)與錄音晤郑,去河邊找鬼敌呈。 笑死贸宏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的磕洪。 我是一名探鬼主播吭练,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼析显!你這毒婦竟也來了鲫咽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤谷异,失蹤者是張志新(化名)和其女友劉穎分尸,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歹嘹,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡箩绍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了尺上。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片材蛛。...
    茶點(diǎn)故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖怎抛,靈堂內(nèi)的尸體忽然破棺而出卑吭,到底是詐尸還是另有隱情,我是刑警寧澤马绝,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布豆赏,位于F島的核電站,受9級特大地震影響富稻,放射性物質(zhì)發(fā)生泄漏掷邦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一唉窃、第九天 我趴在偏房一處隱蔽的房頂上張望耙饰。 院中可真熱鬧,春花似錦纹份、人聲如沸苟跪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽件已。三九已至,卻和暖如春元暴,著一層夾襖步出監(jiān)牢的瞬間篷扩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工茉盏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鉴未,地道東北人枢冤。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像铜秆,于是被迫代替她去往敵國和親淹真。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 用兩張圖告訴你连茧,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料核蘸? 從這篇文章中你...
    hw1212閱讀 12,754評論 2 59
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評論 3 119
  • 我們每個人想必都經(jīng)歷過“三分鐘熱度”啸驯。之所以我想到“三分鐘熱度”是因?yàn)榍疤炜吹揭黄獔蟮馈?報道說客扎,一個常年不鍛煉的...
    韓同志閱讀 413評論 0 0
  • 現(xiàn)在還在發(fā)抖,人生第一次電面 因?yàn)楹芏嘣蚯皫状蔚碾娫挾紱]有接到罚斗,今天正在翻新自己的簡歷徙鱼,面試電話突然打過來,面試...
    肆意木閱讀 326評論 6 3
  • 這個周末老公去蘭州跑馬了惰聂,我和寶寶還有奶奶一起度過疆偿,也是第一個補(bǔ)課的周末咱筛,周六的中午寶兒好乖給她講故事她就和媽媽一...
    Annabelle樹袋熊麻麻閱讀 284評論 0 0