Vue-Quill-Editor
主流富文本編輯器對比
前言：vue中很多項目都需要用到富文本編輯器，在使用了ueditor和tinymce后，發現並不理想。所以果斷使用vue-quill-editor來實現。
-
wangEditor（國產，基於javascript和css開發的web富文本編輯器，開源免費）優勢：輕量簡介，最重要的是開源且中文文檔齊全。缺點：更新不及時。沒有強大的開發團隊支撐。
-
UEditor（百度）優勢：插件多，基本曼度各種需求，由百度web前端研發部開發。缺點：插件提交較大，網頁加載速度相對就慢了些。使用復雜。屬於前后端不分離插件。在使用時需要配置后端的一些東西，使用不便。
-
Kindeditor （） 優勢：文檔齊全，為中文，閱讀方便。缺點：圖片上傳存在問題，上傳歷史過多，會全部加載，導致瀏覽器卡頓。
-
補充：Tinymce也是一款不錯的富文本編輯器，種植，各有優勢和劣勢，關鍵是選擇一款最適合的就好。因為筆者在開發vue，所以直接使用vue-quill-editor較為方便些。具體看情況使用。
vue-quill-editor基本配置
npm install vue-quill-editor -smain.js中引入
import Quill from 'quill' import VueQuillEditor from 'vue-quill-editor' import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module' import ImageResize from 'quill-image-resize-module' // 圖片縮放組件。 import { ImageDrop } from 'quill-image-drop-module'; // 圖片拖動組件。 Quill.register('modules/ImageExtend', ImageExtend) Quill.register('modules/imageResize', ImageResize) Quill.register('modules/imageDrop', ImageDrop); import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
使用
需要注意的是toolbar的配置
1. 只需要填寫功能名的 加粗 - bold； 斜體 - italic 下划線 - underline 刪除線 - strike 引用- blockquote 代碼塊 - code-block 公式 - formula 圖片 - image 視頻 - video 清除字體樣式- clean 這一類的引用 直接['name','name']這種格式就好了 2. 需要有默認值的 標題 - header [{ 'header': 1 }, { 'header': 2 }] 值字體大小 列表 - list [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet 上標/下標 - script [{ 'script': 'sub'}, { 'script': 'super' }], 值sub，super 縮進 - indent [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等 文本方向 - direction [{'direction':'rtl'}]
結構
<template>
<div class="edit_wrap">
<quill-editor v-model="content" ref="quillEditor" :options="editorOption" @blur="onBlur($event)"
@focus="onFocus($event)" @change="onChange($event)">
</quill-editor>
<el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false"
:on-change='changeUpload'>
<i class="el-icon-upload"></i>
<div class="el-upload__text">點擊上傳</div>
<div class="el-upload__tip">支持絕大多數圖片格式，單張圖片最大支持5MB</div>
</el-upload>
<button v-on:click="save">保存</button>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
content:'請輸入編輯內容',
editorOption: {
modules: {
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
},
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': ['small', false, 'large', 'huge']}], // 字體大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //幾級標題
[{ 'color': [] }, { 'background': []}], // 字體顏色，字體背景顏色
[{'font': []}], //字體
[{'align': []}], //對齊方式
['clean'], //清除字體樣式
['image', 'video'] //上傳圖片、上傳視頻
],
},
theme: 'snow',
}
}
},
props: {
},
components:{
},
mounted() {
},
computed: {
editor() {
return this.$refs.quillEditor.quill;
},
},
methods:{
changeUpload() {},
onBlur() {}, // 失去焦點事件
onFocus() {}, // 獲得焦點事件
onChange() {}, // 內容改變事件
save(event) {
alert(this.content);
},
}
}
</script>
<style scoped>
</style>
漢化
漢化只需要更改toolbar工具欄中的樣式即可實現
<style> .editor { line-height: normal !important; height: 800px; } .ql-snow .ql-tooltip[data-mode=link]::before { content: "請輸入鏈接地址:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: '保存'; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode=video]::before { content: "請輸入視頻地址:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: '10px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: '18px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: '32px'; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: '文本'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: '標題1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: '標題2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: '標題3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: '標題4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: '標題5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: '標題6'; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: '標准字體'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { content: '襯線字體'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { content: '等寬字體'; } </style>
實現以上配置后就可以看到效果如圖：
以上就是vue-quill-editor的基本配置了。
本文參考：https://www.cnblogs.com/wjlbk/p/12884661.html
備注：再引入的過程中會出現引入報錯的問題 報錯的主要是依賴的問題，修改vue.config.js文件的 configureWebpack 模塊；這個副文本編輯器還是比較簡單對於簡單需求可以考慮使用；
configureWebpack: { // webpack 配置
output: { // 輸出重構 打包編譯后的 文件名稱 【模塊名稱.版本號.js】
filename: `js/[name].[hash:6].vw.js`,
chunkFilename: `js/[name].[hash:6].vw.js`
// chunkFilename: `js/[id].vw.js`
},
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
},