最近在做項(xiàng)目時(shí)，客戶有個(gè)發(fā)布新聞動(dòng)態(tài)的功能，具體頁(yè)面內(nèi)容讓客戶自己編寫(xiě)，所以要選擇富文本編輯器，這樣用戶體驗(yàn)好一點(diǎn)。網(wǎng)上有很多的富文本編輯器， 因?yàn)轫?xiàng)目的功能并不是很復(fù)雜，所以選擇了wangEditor，界面簡(jiǎn)潔，使用起來(lái)也挺方便的；

image.png

實(shí)現(xiàn)思路

1.安裝wangEditor

2.封裝成組件

3.父組件中直接調(diào)用

一、wangEditor安裝

這里使用npm命令安裝；

npm install wangeditor

二、組件封裝

2.1、創(chuàng)建組件

這里我們創(chuàng)建一個(gè)名為editor.vue的文件，并導(dǎo)入文件；

import E from "wangeditor"

2.2、初始化wangeditor

(1)我們創(chuàng)建一個(gè)初始化方法

(2)編寫(xiě)初始化代碼

(3)在mounted()中調(diào)用

js代碼

initE() {

this.editor = new E('#e')

//這里各位小伙伴可以查詢官網(wǎng)，根據(jù)自己的需求進(jìn)行菜單欄調(diào)整

this. editor.customConfig.menus = [

'head', // 標(biāo)題

'bold', // 粗體

'fontSize', // 字號(hào)

'fontName', // 字體

'italic', // 斜體

'underline', // 下劃線

'strikeThrough', // 刪除線

'foreColor', // 文字顏色

'backColor', // 背景顏色

'link', // 插入鏈接

'list', // 列表

'justify', // 對(duì)齊方式

'quote', // 引用

'emoticon', // 表情

'image', // 插入圖片

'table', // 表格

'code', // 插入代碼

'undo', // 撤銷(xiāo)

'redo' // 重復(fù)

]

this.editor.create()

},

mounted(){

this.initE()

}

2.3、配置圖片上傳

this.editor.customConfig.uploadFileName = 'file'

this.editor.customConfig.uploadImgServer = `url` // 你的服務(wù)器上傳地址

this.editor.customConfig.uploadImgHooks = {

before: function (xhr, editor, files) {

// 圖片上傳之前觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，files 是選擇的圖片文件

// 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳

// return {

// prevent: true,

// msg: '放棄上傳'

// }

},

success: function (xhr, editor, result) {

// 圖片上傳并返回結(jié)果，圖片插入成功之后觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

},

fail: function (xhr, editor, result) {

// 圖片上傳并返回結(jié)果，但圖片插入錯(cuò)誤時(shí)觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

},

error: function (xhr, editor) {

// 圖片上傳出錯(cuò)時(shí)觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象

},

timeout: function (xhr, editor) {

// 圖片上傳超時(shí)時(shí)觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象

},

// 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置

// (但是，服務(wù)器端返回的必須是一個(gè) JSON 格式字符串！！！否則會(huì)報(bào)錯(cuò))

customInsert: function (insertImg, result, editor) {

// 圖片上傳并返回結(jié)果，自定義插入圖片的事件(而不是編輯器自動(dòng)插入圖片！！！)

// insertImg 是插入圖片的函數(shù)，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

// 舉例：假如上傳圖片成功后，服務(wù)器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：

console.log(result.url)

var url = result.url

insertImg(url)

// result 必須是一個(gè) JSON 格式字符串！！！否則報(bào)錯(cuò)

}

}

該代碼需放置在this.editor = new E('#e') 和 this.editor.create()之間；

2.4、接收wangeditor接收值

this.editor.customConfig.onchange = (html) => {

this.info_ = html // 綁定當(dāng)前逐漸地值

this.$emit('change', this.info_) // 將內(nèi)容同步到父組件中

}

2.5、接收父組件傳遞過(guò)來(lái)的值

這里我們可以使用props屬性指定字段來(lái)接收值，并使用model指定字段和事件

model: {

prop: 'desc',

event:'change'

},

props:{

desc:{

type:String,

default:""

},

//業(yè)務(wù)中我們經(jīng)常會(huì)有添加操作和編輯操作，添加操作時(shí)，我們需清除上一操作留下的緩存

isClear:{

type:Boolean,

default:false

}

},

2.6、將父組件傳遞過(guò)來(lái)的值傳入wangeditor

這里我們需要使用watch來(lái)監(jiān)聽(tīng)值的變化，并進(jìn)行賦值操作

watch:{

//判斷用戶是否清除編輯器緩存

isClear(val){

// console.log(val)

if (val){

this.editor.txt.clear()

}

},

//接收父組件傳遞過(guò)來(lái)的值

desc(value) {

//console.log("desc",value)

//判斷父組件傳遞過(guò)來(lái)的值跟當(dāng)前編輯器內(nèi)容是否一樣

if (value != this.editor.txt.html()) {

this.editor.txt.html(this.desc)

}

}

},

2.7、子組件代碼匯總

import Vue from 'vue'

import E from "wangeditor"

export default {

name: 'editor',

data(){

return{

content:"",

editor: null,

info_:null

}

},

model: {

prop: 'desc',

event:'change'

},

watch:{

isClear(val){

// console.log(val)

if (val){

this.editor.txt.clear()

// this.info_=null

}

},

desc(value) {

//console.log("desc",value)

if (value != this.editor.txt.html()) {

this.editor.txt.html(this.desc)

}

}

},

props:{

desc:{

type:String,

default:""

},

//業(yè)務(wù)中我們經(jīng)常會(huì)有添加操作和編輯操作，添加操作時(shí)，我們需清除上一操作留下的緩存

isClear:{

type:Boolean,

default:false

}

},

methods:{

initE(){

this.editor = new E('#e')

this.editor.customConfig.onchangeTimeout = 1000 // 單位 ms

this.editor.customConfig.uploadFileName = 'file'

this.editor.customConfig.uploadImgServer = `url` // 你的服務(wù)器地址

this.editor.customConfig.uploadImgHooks = {

before: function (xhr, editor, files) {

// 圖片上傳之前觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，files 是選擇的圖片文件

// 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳

// return {

// prevent: true,

// msg: '放棄上傳'

// }

},

success: function (xhr, editor, result) {

// 圖片上傳并返回結(jié)果，圖片插入成功之后觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

},

fail: function (xhr, editor, result) {

// 圖片上傳并返回結(jié)果，但圖片插入錯(cuò)誤時(shí)觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

},

error: function (xhr, editor) {

// 圖片上傳出錯(cuò)時(shí)觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象

},

timeout: function (xhr, editor) {

// 圖片上傳超時(shí)時(shí)觸發(fā)

// xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象

},

// 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置

// (但是，服務(wù)器端返回的必須是一個(gè) JSON 格式字符串！！！否則會(huì)報(bào)錯(cuò))

customInsert: function (insertImg, result, editor) {

// 圖片上傳并返回結(jié)果，自定義插入圖片的事件(而不是編輯器自動(dòng)插入圖片！！！)

// insertImg 是插入圖片的函數(shù)，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

// 舉例：假如上傳圖片成功后，服務(wù)器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：

console.log(result.url)

var url = result.url

insertImg(url)

// result 必須是一個(gè) JSON 格式字符串！！！否則報(bào)錯(cuò)

}

}

this.editor.customConfig.onchange = (html) => {

this.info_ = html // 綁定當(dāng)前逐漸地值

this.$emit('change', this.info_) // 將內(nèi)容同步到父組件中

}

this. editor.customConfig.menus = [

'head', // 標(biāo)題

'bold', // 粗體

'fontSize', // 字號(hào)

'fontName', // 字體

'italic', // 斜體

'underline', // 下劃線

'strikeThrough', // 刪除線

'foreColor', // 文字顏色

'backColor', // 背景顏色

'link', // 插入鏈接

'list', // 列表

'justify', // 對(duì)齊方式

'quote', // 引用

'emoticon', // 表情

'image', // 插入圖片

'table', // 表格

'code', // 插入代碼

'undo', // 撤銷(xiāo)

'redo' // 重復(fù)

]

this.editor.create()

// this.editor.txt.html(this.desc)

// this.editor.txt.html(this.desc)

}

},

mounted () {

this.initE();

}

}

三、父組件中進(jìn)行調(diào)用

3.1、創(chuàng)建父組件，這里我們創(chuàng)建文件add-or-update.vue文件

(1)導(dǎo)入子組件

(2)在comonents中創(chuàng)建組件

(3)使用組件

import editor from './editor'

components: {

EDITOR: editor,

}

3.2、代碼匯總

import editor from './editor'

export default {

components: {

EDITOR: editor

},

data () {

return {

content:"",

isClear: false//清除富文本編輯器內(nèi)容

}

}

},

methods: {

}

}

富文本編輯器完成，快去擼起你代碼~

總結(jié)

以上是生活随笔為你收集整理的wangeditor html编辑,Vue整合wangEditor富文本编辑器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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