背景

本機的環(huán)境使用的vue的腳手架，用到了富文本編輯框，所以選擇將wangeditor封裝為組件調(diào)用
wangeditor官網(wǎng)：https://www.wangeditor.com/

在vue的項目中安裝 wangeditor

npm i wangeditor --save

wangeditor組件封裝

<template><div><divref="editor"style="text-align:left"></div></div> </template><script>import WangEditor from "wangeditor";import { ACCESS_TOKEN } from '@/store/mutation-types'//系統(tǒng)中發(fā)送請求需要攜帶toekn,根據(jù)自己的項目決定import Vue from 'vue'export default {name: "WangEditor",data() {return {token: "",editorE:""//編輯器的對象}},//接收v-model的值props: {value: String},model: {prop: 'value',event: 'change'},mounted() {//初始化編輯框this.init();this.editorE.txt.html(this.value)},created(){this.token = Vue.ls.get(ACCESS_TOKEN);//獲取訪問的token},watch:{value(val){//普通的watch監(jiān)聽if (val !== this.editorE.txt.html()) {this.editorE.txt.html(val)}}},methods: {init() {const _this = this;/*實例化*/_this.editorE = new WangEditor(_this.$refs.editor);// 配置 server 接口地址_this.editorE.config.uploadImgServer = window._CONFIG['domianURL']+"/sys/common/upload"//設(shè)置富文本的高度_this.editorE.config.height = 600//默認限制圖片大小是 5M_this.editorE.config.uploadImgMaxSize = 8 * 1024 * 1024 // 8M//自定義上傳的參數(shù)_this.editorE.config.uploadFileName = 'file'//自定義頭部token信息_this.editorE.config.uploadImgHeaders = {"X-Access-Token":_this.token}//設(shè)置請求參數(shù)_this.editorE.config.uploadImgParams = {suffixPath: '@nowm' //后綴水印}//timeout 即上傳接口等待的最大時間，默認是 10 秒鐘，可以自己修改_this.editorE.config.uploadImgTimeout = 3 * 1000_this.editorE.config.uploadImgHooks = {// 上傳圖片之前before: function(xhr) {console.log(xhr)/* // 可阻止圖片上傳return {prevent: true,msg: '需要提示給用戶的錯誤信息'}*/},// 圖片上傳并返回了結(jié)果，圖片插入已成功success: function(xhr) {//console.log('success', xhr)},// 圖片上傳并返回了結(jié)果，但圖片插入時出錯了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上傳圖片出錯，一般為 http 請求的錯誤error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上傳圖片超時timeout: function(xhr) {console.log('timeout')},// 圖片上傳并返回了結(jié)果，想要自己把圖片插入到編輯器中// 例如服務器端返回的不是 { errno: 0, data: [...] } 這種格式，可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服務端返回的接口console.log('customInsert', result)// insertImgFn 可把圖片插入到編輯器，傳入圖片 src ，執(zhí)行函數(shù)即可insertImgFn(result.message)}}/*創(chuàng)建編輯器*/_this.editorE.create();// 監(jiān)控變化，同步更新到文本 向上傳遞更新_this.editorE.config.onchange = function (html) {//console.log(html);_this.$emit("change", html);}}}}; </script>

頁面調(diào)用

<a-form-model-item label="文章內(nèi)容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="articleContent"><WangEditor v-model="model.articleContent"></WangEditor></a-form-model-item> //引入包路徑import WangEditor from '@/components/WangEditor/WangEditor'//在引入容器export default {name: 'XbSpiderArticleForm',components: {WangEditor},}

總結(jié)

以上是生活随笔為你收集整理的vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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