首先放上效果圖
目錄
1.安裝
2.引入到項(xiàng)目中
3.在頁(yè)面上寫(xiě)組件
4.配置option
5.給工具欄鼠標(biāo)懸停加上中文釋義
6.上傳圖片到七牛云
7.自定義控制圖片大小
1.安裝
npm install vue-quill-editor -S
2.引入到項(xiàng)目中
????????有兩種掛載方式： 全局掛載 和 在組件中掛載，根據(jù)自己的項(xiàng)目需求選擇，一般用到富文本編輯都是在某一個(gè)項(xiàng)目中，這里只寫(xiě)在項(xiàng)目中掛載的方式
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
components: {
quillEditor
}
}3.在頁(yè)面上寫(xiě)組件
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)">
</quill-editor>// 失去焦點(diǎn)事件
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
// 獲得焦點(diǎn)事件
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
// 準(zhǔn)備富文本編輯器
onEditorReady(quill) {
console.log('editor ready!', quill)
},
// 內(nèi)容改變事件
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = html
},4.配置option
// 富文本編輯器配置
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線(xiàn) 刪除線(xiàn)
['blockquote', 'code-block'], // 引用 代碼塊
[{ header: 1 }, { header: 2 }], // 1、2 級(jí)標(biāo)題
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無(wú)序列表
[{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)
[{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
[{ direction: 'rtl' }], // 文本方向
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 標(biāo)題
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
// [{ font: ['songti'] }], // 字體種類(lèi)
[{ align: [] }], // 對(duì)齊方式
['clean'], // 清除文本格式
['image', 'video'] // 鏈接、圖片、視頻
]
},
placeholder: '請(qǐng)輸入正文'
},????????這里的size和header經(jīng)過(guò)了處理，如圖：換成了自定義內(nèi)容，例如，修改字號(hào)，方法如下：
? ? ? ? 4.1.找到node_modules里的quill/dist/quill.js
? ? ? ? 4.2.在文件中搜索small，快速找到，然后修改成你想要的數(shù)據(jù)，這里簡(jiǎn)單，直接貼圖
? ? ? ? 4.3.修改完js之后，需要修改一下css文件?，這樣你設(shè)置的才生效，在同級(jí)目錄下找到quill.snow.css文件，同樣搜索small所在的位置，仿照著改就行，主要是這兩處
????????可以把原先的注釋掉，也可以保留，影響不大，相當(dāng)于你設(shè)置另一套css
// 這個(gè)是字號(hào)數(shù)字對(duì)應(yīng)的顯示的內(nèi)容，vertical-align根據(jù)個(gè)人需要加不加，因?yàn)槲翼?yè)面那個(gè)字與其他對(duì)不齊
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
content: '12px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
content: '14px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
content: '16px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
content: '18px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
content: '20px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
content: '22px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
content: '24px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
content: '28px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
content: '32px';
vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
content: '36px';
vertical-align: top;
}
// 這個(gè)是字號(hào)數(shù)字對(duì)應(yīng)的px值
.ql-editor .ql-size-12 {
font-size: 12px;
}
.ql-editor .ql-size-14 {
font-size: 14px;
}
.ql-editor .ql-size-16 {
font-size: 16px;
}
.ql-editor .ql-size-18 {
font-size: 18px;
}
.ql-editor .ql-size-20 {
font-size: 20px;
}
.ql-editor .ql-size-22 {
font-size: 22px;
}
.ql-editor .ql-size-24 {
font-size: 24px;
}
.ql-editor .ql-size-28 {
font-size: 28px;
}
.ql-editor .ql-size-32 {
font-size: 32px;
}
.ql-editor .ql-size-36 {
font-size: 36px;
}
// 選擇字號(hào)富文本字的大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
font-size: 36px;
}? ? ? ? ?富文本里面的下拉框默認(rèn)是不滾動(dòng)的，想要滾動(dòng)效果，加上下面的css
/*加上height和滾動(dòng)屬性就可以，滾動(dòng)條樣式是系統(tǒng)默認(rèn)樣式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #ccc;
height: 125px;
overflow: auto;
}
????????
5.給工具欄鼠標(biāo)懸停加上中文釋義
? ? ? ? 找到元素可以看到，每一個(gè)tool都有一個(gè)class， 這個(gè)的原理就是先把所有的class列出來(lái)，然后根據(jù)class獲取元素，給它加上title屬性就可以了
? ? ? ? ? ?先定義一個(gè)數(shù)組，把所有的工具放在里面
// toolbar標(biāo)題
const titleConfig = [
{ Choice: '.ql-insertMetric', title: '跳轉(zhuǎn)配置' },
{ Choice: '.ql-bold', title: '加粗' },
{ Choice: '.ql-italic', title: '斜體' },
{ Choice: '.ql-underline', title: '下劃線(xiàn)' },
{ Choice: '.ql-header', title: '段落格式' },
{ Choice: '.ql-strike', title: '刪除線(xiàn)' },
{ Choice: '.ql-blockquote', title: '塊引用' },
{ Choice: '.ql-code', title: '插入代碼' },
{ Choice: '.ql-code-block', title: '插入代碼段' },
{ Choice: '.ql-font', title: '字體' },
{ Choice: '.ql-size', title: '字體大小' },
{ Choice: '.ql-list[value="ordered"]', title: '編號(hào)列表' },
{ Choice: '.ql-list[value="bullet"]', title: '項(xiàng)目列表' },
{ Choice: '.ql-direction', title: '文本方向' },
{ Choice: '.ql-header[value="1"]', title: 'h1' },
{ Choice: '.ql-header[value="2"]', title: 'h2' },
{ Choice: '.ql-align', title: '對(duì)齊方式' },
{ Choice: '.ql-color', title: '字體顏色' },
{ Choice: '.ql-background', title: '背景顏色' },
{ Choice: '.ql-image', title: '圖像' },
{ Choice: '.ql-video', title: '視頻' },
{ Choice: '.ql-link', title: '添加鏈接' },
{ Choice: '.ql-formula', title: '插入公式' },
{ Choice: '.ql-clean', title: '清除字體格式' },
{ Choice: '.ql-script[value="sub"]', title: '下標(biāo)' },
{ Choice: '.ql-script[value="super"]', title: '上標(biāo)' },
{ Choice: '.ql-indent[value="-1"]', title: '向左縮進(jìn)' },
{ Choice: '.ql-indent[value="+1"]', title: '向右縮進(jìn)' },
{ Choice: '.ql-header .ql-picker-label', title: '標(biāo)題大小' },
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '標(biāo)題一' },
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '標(biāo)題二' },
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '標(biāo)題三' },
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '標(biāo)題四' },
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '標(biāo)題五' },
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '標(biāo)題六' },
{ Choice: '.ql-header .ql-picker-item:last-child', title: '標(biāo)準(zhǔn)' },
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小號(hào)' },
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號(hào)' },
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號(hào)' },
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標(biāo)準(zhǔn)' },
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左對(duì)齊' },
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對(duì)齊' },
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對(duì)齊' },
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對(duì)齊' }
]? ? ? ? ?然后在function中循環(huán)，找到元素，添加title，至于放在那個(gè)function根據(jù)具體情況看，反正得是在頁(yè)面上已經(jīng)渲染好元素之后，不然會(huì)獲取不到元素，可以直接放在@ready的函數(shù)里面
for (let item of titleConfig) {
let tip = document.querySelector('.quill-editor ' + item.Choice)
if (!tip) continue
tip.setAttribute('title', item.title)
}至此，一個(gè)富文本編輯器，基本可以使用
6.上傳圖片到七牛云
????????一般會(huì)遇到需要上傳圖片的操作，圖片肯定不能只是保存到本地，這個(gè)根據(jù)項(xiàng)目需求，我是放在七牛云上。
????????添加一個(gè)上傳組件，并隱藏起來(lái)，以免影響頁(yè)面：
<el-upload
v-show="false"
class="avatar-uploader"
:data='fileUpload'
:show-file-list="false"
:http-request="onUploadHandler"
>
</el-upload>????????在option中配置上傳操作，之前的option就耀稍作修改
editorOption: {
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線(xiàn) 刪除線(xiàn)
['blockquote', 'code-block'], // 引用 代碼塊
[{ header: 1 }, { header: 2 }], // 1、2 級(jí)標(biāo)題
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無(wú)序列表
[{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)
[{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
[{ direction: 'rtl' }], // 文本方向
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 標(biāo)題
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
// [{ font: ['songti'] }], // 字體種類(lèi)
[{ align: [] }], // 對(duì)齊方式
['clean'], // 清除文本格式
['image', 'video'] // 鏈接、圖片、視頻
],
handlers: {
'image': function (value) {
if (value) { // value === true
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
}
}
}
},
placeholder: '請(qǐng)輸入正文'
}????????點(diǎn)擊富文本上的上傳圖片，就會(huì)觸發(fā)這里的handlers，將操作引到upload的函數(shù)上，在這個(gè)函數(shù)里面需要做的操作是，將圖片上傳到七牛云，并拿到返回的在線(xiàn)鏈接，然后將圖片鏈接插入到頁(yè)面對(duì)應(yīng)位置上。這里我的上傳是自己封裝了函數(shù)。
async onUploadHandler(e) {
const imageUrl = 上傳七牛云后返回來(lái)的一串在線(xiàn)鏈接
// 獲取光標(biāo)所在位置
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index
// 插入圖片
quill.insertEmbed(length, 'image', imageUrl)
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1)
// this.content += url
}7.自定義控制圖片大小
? ? ? ? 先安裝插件
????????npm i quill-image-resize-module -S
? ? ? ? 插件需要webpack支持?。?！
編輯 vue.config.js 文件???修改vue.config.js后需要重新啟動(dòng)項(xiàng)目方可生效
plugins: [
...
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
...在頁(yè)面上引入，并且在data中，與toolbar平級(jí)進(jìn)行配置
import * as Quill from 'quill'
// 調(diào)整上傳圖片大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
modules:{
toolbar: {},
// 調(diào)整圖片大小
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
參考文章：
基于Vue項(xiàng)目的富文本vue-quill-editor的使用
vue-quill-editor富文本編輯器在vue內(nèi)自定義配置文字大小，字體下拉框文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-458373.html
vue-quill-editor 圖片上傳，拖拽，粘貼，調(diào)整尺寸，清除復(fù)制粘貼樣式文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-458373.html
到了這里，關(guān)于vue-quill-editor富文本編輯器使用步驟的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
