溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue-quill-editor富文本編輯器怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
npm install vue-quill-editor -S
有兩種掛載方式： 全局掛載 和 在組件中掛載，根據自己的項目需求選擇，一般用到富文本編輯都是在某一個項目中，這里只寫在項目中掛載的方式
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
}
}<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" @ready="onEditorReady($event)"> </quill-editor>
// 失去焦點事件
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
// 獲得焦點事件
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
// 準備富文本編輯器
onEditorReady(quill) {
console.log('editor ready!', quill)
},
// 內容改變事件
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = html
},// 富文本編輯器配置
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
['blockquote', 'code-block'], // 引用 代碼塊
[{ header: 1 }, { header: 2 }], // 1、2 級標題
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
[{ script: 'sub' }, { script: 'super' }], // 上標/下標
[{ indent: '-1' }, { indent: '+1' }], // 縮進
[{ direction: 'rtl' }], // 文本方向
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 標題
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
// [{ font: ['songti'] }], // 字體種類
[{ align: [] }], // 對齊方式
['clean'], // 清除文本格式
['image', 'video'] // 鏈接、圖片、視頻
]
},
placeholder: '請輸入正文'
},這里的size和header經過了處理，如圖：換成了自定義內容，例如，修改字號，方法如下：
4.1.找到node_modules里的quill/dist/quill.js
4.2.在文件中搜索small，快速找到，然后修改成你想要的數據，這里簡單，直接貼圖
4.3.修改完js之后，需要修改一下css文件 ，這樣你設置的才生效，在同級目錄下找到quill.snow.css文件，同樣搜索small所在的位置，仿照著改就行，主要是這兩處
可以把原先的注釋掉，也可以保留，影響不大，相當于你設置另一套css
// 這個是字號數字對應的顯示的內容，vertical-align根據個人需要加不加，因為我頁面那個字與其他對不齊
.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;
}
// 這個是字號數字對應的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;
}
// 選擇字號富文本字的大小
.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;
}富文本里面的下拉框默認是不滾動的，想要滾動效果，加上下面的css
/*加上height和滾動屬性就可以，滾動條樣式是系統默認樣式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #ccc;
height: 125px;
overflow: auto;
}
找到元素可以看到，每一個tool都有一個class， 這個的原理就是先把所有的class列出來，然后根據class獲取元素，給它加上title屬性就可以了
先定義一個數組，把所有的工具放在里面
// toolbar標題
const titleConfig = [
{ Choice: '.ql-insertMetric', title: '跳轉配置' },
{ Choice: '.ql-bold', title: '加粗' },
{ Choice: '.ql-italic', title: '斜體' },
{ Choice: '.ql-underline', title: '下劃線' },
{ Choice: '.ql-header', title: '段落格式' },
{ Choice: '.ql-strike', title: '刪除線' },
{ 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: '編號列表' },
{ Choice: '.ql-list[value="bullet"]', title: '項目列表' },
{ Choice: '.ql-direction', title: '文本方向' },
{ Choice: '.ql-header[value="1"]', title: 'h2' },
{ Choice: '.ql-header[value="2"]', title: 'h3' },
{ Choice: '.ql-align', title: '對齊方式' },
{ 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: '下標' },
{ Choice: '.ql-script[value="super"]', title: '上標' },
{ Choice: '.ql-indent[value="-1"]', title: '向左縮進' },
{ Choice: '.ql-indent[value="+1"]', title: '向右縮進' },
{ Choice: '.ql-header .ql-picker-label', title: '標題大小' },
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '標題一' },
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '標題二' },
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '標題三' },
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '標題四' },
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '標題五' },
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '標題六' },
{ Choice: '.ql-header .ql-picker-item:last-child', title: '標準' },
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小號' },
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號' },
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號' },
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標準' },
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左對齊' },
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對齊' },
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對齊' },
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對齊' }
]然后在function中循環，找到元素，添加title，至于放在那個function根據具體情況看，反正得是在頁面上已經渲染好元素之后，不然會獲取不到元素，可以直接放在@ready的函數里面
for (let item of titleConfig) {
let tip = document.querySelector('.quill-editor ' + item.Choice)
if (!tip) continue
tip.setAttribute('title', item.title)
}至此，一個富文本編輯器，基本可以使用
一般會遇到需要上傳圖片的操作，圖片肯定不能只是保存到本地，這個根據項目需求，我是放在七牛云上。
添加一個上傳組件，并隱藏起來，以免影響頁面：
<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'], // 加粗 斜體 下劃線 刪除線
['blockquote', 'code-block'], // 引用 代碼塊
[{ header: 1 }, { header: 2 }], // 1、2 級標題
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
[{ script: 'sub' }, { script: 'super' }], // 上標/下標
[{ indent: '-1' }, { indent: '+1' }], // 縮進
[{ direction: 'rtl' }], // 文本方向
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 標題
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
// [{ font: ['songti'] }], // 字體種類
[{ align: [] }], // 對齊方式
['clean'], // 清除文本格式
['image', 'video'] // 鏈接、圖片、視頻
],
handlers: {
'image': function (value) {
if (value) { // value === true
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
}
}
}
},
placeholder: '請輸入正文'
}點擊富文本上的上傳圖片，就會觸發這里的handlers，將操作引到upload的函數上，在這個函數里面需要做的操作是，將圖片上傳到七牛云，并拿到返回的在線鏈接，然后將圖片鏈接插入到頁面對應位置上。這里我的上傳是自己封裝了函數。
async onUploadHandler(e) {
const imageUrl = 上傳七牛云后返回來的一串在線鏈接
// 獲取光標所在位置
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index
// 插入圖片
quill.insertEmbed(length, 'image', imageUrl)
// 調整光標到最后
quill.setSelection(length + 1)
// this.content += url
}先安裝插件
npm i quill-image-resize-module -S
插件需要webpack支持！！！
編輯 vue.config.js 文件 修改vue.config.js后需要重新啟動項目方可生效
plugins: [
...
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
...在頁面上引入，并且在data中，與toolbar平級進行配置
import * as Quill from 'quill'
// 調整上傳圖片大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
modules:{
toolbar: {},
// 調整圖片大小
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
以上就是“vue-quill-editor富文本編輯器怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
