vue實(shí)現(xiàn)富文本編輯器詳細(xì)過程
更新時(shí)間：2024年01月11日 11:24:30 作者：LiuYYa!
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下
vue實(shí)現(xiàn)富文本
1、引入插件
npm install vue-quill-editor --save
2、在封裝的組件中引入并注冊(cè)
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
components: { quillEditor },
data() {
return {
content: "", // 文本內(nèi)容
};
},
methods: {
// 失去焦點(diǎn)事件
onEditorBlur() {},
// 獲得焦點(diǎn)事件
onEditorFocus() {},
// 準(zhǔn)備編輯器
onEditorReady() {},
// 內(nèi)容改變事件
onEditorChange() {},
},
watch: {
// 監(jiān)聽文本變化內(nèi)容
content() {
console.log(this.content);
},
},
};
</script>
3、使用注冊(cè)的組件內(nèi)容
<template>
<!-- 富文本 -->
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
/>
</template>
4、根據(jù)自身使用情況選擇全局注冊(cè)還是某一頁(yè)面注冊(cè)使用，顯示效果如下：
5、回顯顯示，使用v-html
<div v-html="msg" class="ql-editor"></div>
注意：class="ql-editor" 是為了將文本樣式與富文本框輸入的樣式保持一致（也可自己寫樣式）
其他（功能優(yōu)化）
1、輸入框提示文本
editorOption: {
placeholder: "請(qǐng)輸入需要編寫的內(nèi)容...",
},
2、內(nèi)容控件漢化
提示：將代碼樣式復(fù)制到對(duì)應(yīng)組件中即刻
<style>
.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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "標(biāo)準(zhǔn)字體";
}
.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>
3、顯示效果如下：
4、編輯圖片
4.1、安裝依賴包，包含編輯器包，拖拽包，縮放包
npm i quill-image-drop-module -S // 拖拽插件 npm i quill-image-resize-module -S // 放大縮小插件
4.2、組件里引入使用
import { ImageDrop } from "quill-image-drop-module"; // 圖片拖動(dòng)組件引用
import ImageResize from "quill-image-resize-module"; // 圖片縮放組件引用
Quill.register("modules/imageDrop", ImageDrop); // 注冊(cè)
Quill.register("modules/imageResize", ImageResize); // 注冊(cè)
4.3、在data中配置`
editorOption: {
placeholder: "請(qǐng)輸入需要編寫的內(nèi)容...",
modules: {
imageDrop: true, //圖片拖拽
imageResize: {
//放大縮小
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white",
},
modules: ["Resize", "DisplaySize", "Toolbar"],
},
// 需要重置工具，不然富文本工具上的功能會(huì)缺失
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
["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'] }], // 字體種類
[{ align: [] }], // 對(duì)齊方式
["clean"], // 清除文本格式
["image", "video"], // 鏈接、圖片、視頻
],
},
},
4.4、將在webpack中對(duì)插件進(jìn)行配置
提示：找到文件中vue.config.js進(jìn)行配置
const webpack = require('webpack') // 引入webpack
module.exports = {
// 在vue.config.js中configureWebpack中配置
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
}
}
注意：配置完成后需要重啟服務(wù)
完整組件代碼
<template>
<!-- 富文本 -->
<div>
<quill-editor
ref="myQuillEditor"
v-model="textContent.content"
:options="editorOption"
@blur="onEditorBlur()"
@focus="onEditorFocus()"
@ready="onEditorReady()"
@change="onEditorChange()"
/>
<el-button
class="button"
size="small"
type="primary"
@click="handleSendData"
>保存/發(fā)布</el-button
>
</div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import { ImageDrop } from "quill-image-drop-module"; // 圖片拖動(dòng)組件引用
import ImageResize from "quill-image-resize-module"; // 圖片縮放組件引用
Quill.register("modules/imageDrop", ImageDrop); // 注冊(cè)
Quill.register("modules/imageResize", ImageResize); // 注冊(cè)
export default {
components: { quillEditor },
data() {
return {
textContent: {
content: "",
textShow: false,
},
editorOption: {
placeholder: "請(qǐng)輸入需要編寫的內(nèi)容...",
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 級(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'] }], // 字體種類
[{ align: [] }], // 對(duì)齊方式
["clean"], // 清除文本格式
["image", "video"], // 鏈接、圖片、視頻
],
},
},
};
},
methods: {
// 失去焦點(diǎn)事件
onEditorBlur() {},
// 獲得焦點(diǎn)事件
onEditorFocus() {},
// 準(zhǔn)備編輯器
onEditorReady() {},
// 內(nèi)容改變事件
onEditorChange() {},
//保存按鈕點(diǎn)擊事件
handleSendData() {
this.$emit("sendContentData", this.textContent);
},
// 獲取已有的文本內(nèi)容
getContent(e) {
this.textContent.content = e;
},
},
// watch: {
// // 監(jiān)聽文本變化內(nèi)容
// content() {
// console.log(this.content);
// },
// },
};
</script>
<style>
/* 富文本框漢化 */
.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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "標(biāo)準(zhǔn)字體";
}
.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: "等寬字體";
}
/* 確認(rèn)按鈕 */
.button {
margin-top: 10px;
}
</style>
鏈接: 官方鏈接
總結(jié)
到此這篇關(guān)于vue實(shí)現(xiàn)富文本編輯器的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)富文本內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue中實(shí)現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個(gè)字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
ElementUI中el-input無(wú)法輸入、修改及刪除問題解決辦法
這篇文章主要給大家介紹了關(guān)于ElementUI中el-input無(wú)法輸入、修改及刪除問題的解決辦法,這種問題產(chǎn)生是因?yàn)閕nput在vue中的受控,我們需要去重新改變一下監(jiān)聽和實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
Vue二級(jí)彈窗關(guān)閉錯(cuò)誤的解決指南
本文詳細(xì)分析了Vue.js項(xiàng)目中二級(jí)彈窗關(guān)閉時(shí)出現(xiàn)的DOM操作錯(cuò)誤原因,并提供了多種解決方案,包括確保正確的DOM操作時(shí)機(jī)、處理過渡動(dòng)畫、管理動(dòng)態(tài)組件和清理異步操作等,通過這些方法,可以有效預(yù)防和解決此類問題,提升應(yīng)用的穩(wěn)定性和性能,需要的朋友可以參考下2026-01-01
關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問題
這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue項(xiàng)目 npm run build 打包項(xiàng)目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項(xiàng)目 npm run build 打包項(xiàng)目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
解決element ui select下拉框不回顯數(shù)據(jù)問題的解決
這篇文章主要介紹了解決element ui select下拉框不回顯數(shù)據(jù)問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
解決vue單頁(yè)面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題
這篇文章主要介紹了解決vue單頁(yè)面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
基于cropper.js封裝vue實(shí)現(xiàn)在線圖片裁剪組件功能
這篇文章主要介紹了基于cropper.js封裝vue實(shí)現(xiàn)在線圖片裁剪組件功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析
這篇文章主要介紹了Vue瀏覽器緩存sessionStorage+localStorage+Cookie區(qū)別解析,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了使用異步組件優(yōu)化Vue應(yīng)用程序的性能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04