點(diǎn)擊上方“小姚同學(xué)技術(shù)棧”快速關(guān)注我喲！

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

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

功能

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

項(xiàng)目依賴

"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)?{
??????????????????//?點(diǎn)擊事件轉(zhuǎn)移到按鈕
??????????????????document.querySelector('#toolbar-img').click()
????????????????}?else?{
??????????????????this.quill.format('image',?false)
????????????????}
??????????????}
????????????}
??????????},
??????????imageResize:?{
????????????modules:?['Resize',?'DisplaySize',?'Toolbar']
??????????},
??????????'emoji-toolbar':?true,
??????????'emoji-shortname':?true
????????},
????????placeholder:?'請(qǐng)輸入內(nèi)容......'
??????}
????}
??}

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

引入image-resize時(shí)會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)提示如下。

這時(shí)候需要修改webpack配置，vue-cli2和vue-cli3的webpack配置有點(diǎn)區(qū)別。vue-cli3的找到到vue.config文件，然后導(dǎo)入webpack，并在chainWebpack下加入配置。

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

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

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

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

圖片樣式在編輯器改動(dòng)的不保存問題

引入圖片的resize插件后可以在編輯器中對(duì)圖片進(jìn)行大小以及圖片是否居中等調(diào)整，有一個(gè)問題，在編輯器中樣式生效，但樣式內(nèi)容不會(huì)存到內(nèi)容content里面，這時(shí)候需要加一些配置。

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)
????}
??}
}
//?注冊(cè)ImageFormat
Quill.register(ImageFormat,?true)

內(nèi)容展示問題

編輯器編輯的內(nèi)容會(huì)轉(zhuǎn)換為html富文本，但由于vue-quill-editor實(shí)現(xiàn)的富文本內(nèi)容的樣式不是直接寫在style里，而是通過class控制樣式的，所以富文本內(nèi)容展示時(shí)需要引入樣式文件。

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

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

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

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

其他如小程序需要展示富文本內(nèi)容，把對(duì)應(yīng)的樣式拷貝過去，做同樣的修改即可。

本demo項(xiàng)目地址

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

掃碼關(guān)注我微信搜一搜 “小姚同學(xué)技術(shù)棧”https://www.poile.cn給個(gè)「在看」，是對(duì)我最大的支持

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。