點擊上方“小姚同學技術棧”快速關注我喲！

vue-quill-editor是一個基于quill、適用于vue的富文本編輯器開源項目，支持服務端渲染和單頁應用。目前項目熱度還算可以，如果不考慮使用markdown，vue-quill-editor是一個比較好的選擇。

本篇文章將介紹在vue項目中如何使用vue-quill-editor富文本編輯器并實現圖片的自定義上傳、圖片的resize以及emoji表情。筆者在編寫項目的過程中遇到的一些問題以及如何解決也會在文中說明。

功能

-?基本功能
-?自定義圖片上傳
-?圖片大小及居中
-?emoji表情

項目依賴

"vue":?"2.6.10",
"vue-router":?"3.0.6",
"vue-quill-editor":?"^3.0.6",
"quill-image-resize-module":?"^3.0.0"

核心代碼

import?Quill?from?'quill'
import?{?toolbarOptions,?ImageFormat?}?from?'./config.js'
import?ImageResize?from?'quill-image-resize-module'
import?'@/assets/quill-emoji/quill-emoji.js'
Quill.register('modules/imageResize',?ImageResize)
Quill.register(ImageFormat,?true)
import?{?imgUpload?}?from?'@/api/file.js'??
????data()?{
????return?{
??????content:?'',
??????editorOption:?{
????????modules:?{
??????????toolbar:?{
????????????container:?toolbarOptions,
????????????handlers:?{
??????????????//?表情符
??????????????emoji:?function()?{},
??????????????image:?function(value)?{
????????????????if?(value)?{
??????????????????//?點擊事件轉移到按鈕
??????????????????document.querySelector('#toolbar-img').click()
????????????????}?else?{
??????????????????this.quill.format('image',?false)
????????????????}
??????????????}
????????????}
??????????},
??????????imageResize:?{
????????????modules:?['Resize',?'DisplaySize',?'Toolbar']
??????????},
??????????'emoji-toolbar':?true,
??????????'emoji-shortname':?true
????????},
????????placeholder:?'請輸入內容......'
??????}
????}
??}

引入image-resize的'imports' of undefined問題

引入image-resize時會報錯，報錯提示如下。

這時候需要修改webpack配置，vue-cli2和vue-cli3的webpack配置有點區別。vue-cli3的找到到vue.config文件，然后導入webpack，并在chainWebpack下加入配置。

const?webpack?=?require('webpack')

chainWebpack(config)?{
????//?解決quill-image-resize-module導入問題
????config.plugin('provide').use(webpack.ProvidePlugin,?[{
??????????'window.Quill':?'quill'
????}])
}

vue-cli2的webpack配置需要修改兩個文件(開發環境和生產環境)，分別找到webpack.dev.conf和webpack.prod.conf，然后分別在plugins加入配置。

plugins:?[
????//?解決quill-image-resize-module導入問題
????new?webpack.ProvidePlugin({
??????'window.Quill':?'quill/dist/quill.js',
??????'Quill':?'quill/dist/quill.js'
????})
??]

圖片樣式在編輯器改動的不保存問題

引入圖片的resize插件后可以在編輯器中對圖片進行大小以及圖片是否居中等調整，有一個問題，在編輯器中樣式生效，但樣式內容不會存到內容content里面，這時候需要加一些配置。

class?ImageFormat?extends?BaseImageFormat?{
??static?formats(domNode)?{
????return?ImageFormatAttributesList.reduce(function(formats,?attribute)?{
??????if?(domNode.hasAttribute(attribute))?{
????????formats[attribute]?=?domNode.getAttribute(attribute)
??????}
??????return?formats
????},?{})
??}
??format(name,?value)?{
????if?(ImageFormatAttributesList.indexOf(name)?>?-1)?{
??????if?(value)?{
????????this.domNode.setAttribute(name,?value)
??????}?else?{
????????this.domNode.removeAttribute(name)
??????}
????}?else?{
??????super.format(name,?value)
????}
??}
}
//?注冊ImageFormat
Quill.register(ImageFormat,?true)

內容展示問題

編輯器編輯的內容會轉換為html富文本，但由于vue-quill-editor實現的富文本內容的樣式不是直接寫在style里，而是通過class控制樣式的，所以富文本內容展示時需要引入樣式文件。

import?'quill/dist/quill.core.css'
import?'quill/dist/quill.snow.css'

//?表情css
import?'@/assets/quill-emoji/quill-emoji.css'

引入樣式文件后，展示的內容的外面還需要包裹幾個帶樣式的div。

<div?class="quill-editor">
??<div?class="ql-container?ql-snow">
????<div?class="ql-editor"?v-html="content"?/>
??div>
div>

其他如小程序需要展示富文本內容，把對應的樣式拷貝過去，做同樣的修改即可。

本demo項目地址

https://github.com/copoile/quill-editor-demo.git

掃碼關注我微信搜一搜 “小姚同學技術棧”https://www.poile.cn給個「在看」，是對我最大的支持

總結

以上是生活随笔為你收集整理的html富文本编辑器插件_vue中使用vuequilleditor富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。