vue-quill-editor的使用及個(gè)性化定制操作
最近在用vue + element ui寫(xiě)一個(gè)小應(yīng)用要用到富文本編輯器,以前做項(xiàng)目都一直都用ueditor,但是看了一下它與vue的兼容性并不好,又對(duì)比了幾個(gè)后,選擇了vue-quill-editor。
vue-quill-editor基于Quill、適用于 Vue 的富文本編輯器,支持服務(wù)端渲染和單頁(yè)應(yīng)用,正是我想要的☻。這里只介紹基本的安裝和部分簡(jiǎn)單的定制。我翻了很多別人寫(xiě)的東西對(duì)我的項(xiàng)目都無(wú)效,最后自己折騰出來(lái)在這記錄備忘。
一、安裝
1.安裝模塊
npm install vue-quill-editor –save
2.vue組件
<template> <div class="edit_container"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> </div> </template> <script> import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor'; export default { name: "addJournal", components: { quillEditor }, data() { return { content: ``, editorOption: {}, }; }, methods: { onEditorReady(editor) {}, // 準(zhǔn)備編輯器 onEditorBlur(){}, // 失去焦點(diǎn)事件 onEditorFocus(){}, // 獲得焦點(diǎn)事件 onEditorChange(){}, // 內(nèi)容改變事件 }, computed: { editor() { return this.$refs.myQuillEditor.quill; }, }, } </script>
至此,vue-quill-editor就安裝完成了,效果圖如下:
二、定(zhe)制(teng)
這里只簡(jiǎn)單介紹兩類(lèi)操作: 樣式修改和自定義工具欄。
1.樣式修改
a) 修改vue-quill-editor編輯框高度
這個(gè)其實(shí)很簡(jiǎn)單了,只要在vue組件的<style>標(biāo)簽里增加一個(gè)樣式即可
.quill-editor{ height: 400px; }
在調(diào)整了編輯框的高度后,如果編輯內(nèi)容的高度超過(guò)了編輯框的高度,編輯框會(huì)出現(xiàn)滾動(dòng)條(不手動(dòng)調(diào)整此高度話(huà)會(huì)一直往下擴(kuò)展)。
b) 修改工具欄對(duì)齊方式
這里需要注意,使用webstorm創(chuàng)建的vue組件中,styte標(biāo)簽的默認(rèn)會(huì)加上scoped屬性, 也就是說(shuō),只對(duì)當(dāng)前模塊的元素有效,而工具欄是從外部引入的,因此下面的樣式要寫(xiě)在無(wú)scoped屬性的style標(biāo)簽里才會(huì)有效。
.ql-toolbar.ql-snow{ text-align: left; }
修改完后的樣式如下
2.定制工具欄按鈕
以字體大小調(diào)節(jié)為例,這是默認(rèn)的調(diào)節(jié)按鈕,我們想改成多個(gè)像素大小的下拉選框。
step1: 在vue組件中引入quill模塊,修改whitelist, 并注冊(cè)樣式
import * as Quill from 'quill'; let fontSizeStyle = Quill.import('attributors/style/size'); fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];//false表示默認(rèn)值 Quill.register(fontSizeStyle, true);
step2: 修改quill-editor的option屬性值
editorOption: { modules: { toolbar: [["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{header: 1}, {header: 2}], [{list: "ordered"}, {list: "bullet"}], [{script: "sub"}, {script: "super"}], [{indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], [{size: fontSizeStyle.whitelist}], [{header: [1, 2, 3, 4, 5, 6, !1]}], [{color: []}, {background: []}], [{font: []}], [{align: []}], ["clean"], ["link", "image", "video"]], }, }
這個(gè)modules里面的值是參照vue-quill-editor模塊里的vue-quill-editor.js里的modules值設(shè)置的,只需要將你要修改的工具欄按鈕的值替換成step1里設(shè)置的whitelist值即可。
step3: 增加定制選項(xiàng)的css樣式
.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'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before { content: '12px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { content: '16px'; } .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'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before { content: '24px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before { content: '36px'; }
此樣式的選擇器可以從quill.snow.css.js中找到,我們要做的只是修改它的data-value值。
修改后的工具欄:
以上這篇vue-quill-editor的使用及個(gè)性化定制操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中watch監(jiān)聽(tīng)對(duì)象的屬性值(監(jiān)聽(tīng)源必須是一個(gè)getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽(tīng)對(duì)象的屬性值,監(jiān)聽(tīng)源必須是一個(gè)getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03Vue實(shí)現(xiàn)小購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)小購(gòu)物車(chē)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12vue使用自定義指令來(lái)控制頁(yè)面按鈕組的權(quán)限思想
這篇文章主要介紹了vue使用自定義指令來(lái)控制頁(yè)面按鈕組的權(quán)限思想,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式
這篇文章主要介紹了vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue項(xiàng)目proxyTable配置小結(jié)
本文主要介紹了vue項(xiàng)目proxyTable配置小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04