项目有需求,其实刚开始我是抵触的,后来想想那就学习学习呗。
首先需要安装wangeditor 插件
npm install wangeditor --save
然后在components中新增 wangEnduit.vue,结构如下
内容如下
<template lang="html">
<div class="editor">
<div ref="toolbar" class="toolbar">
</div>
<div ref="editor" class="text">
</div>
</div>
</template>
<script>
//引入wangeditor插件
import E from 'wangeditor'
export default {
name: 'editoritem',
data() {
return {
// 这是我后台上传图片的路径
//this.GLOBAL.myhf是我挂在到VUE实例上面的,具体实现下面附上
//相当于 http://192.168.124.21:8080
fileUploadAdd: this.GLOBAL.myhf + "/fileUpload",
editor: null,
info_: null
}
},
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: String,
default: ''
},
isClear: {
type: Boolean,
default: false
},
//用于修改的时候数据回显
contxt: {
type: String,
default: ''
}
},
watch: {
isClear(val) {
// 触发清除文本域内容
if (val) {

本文介绍如何在Vue项目中集成WangEditor富文本编辑器,包括安装插件、配置上传图片路径、实现数据回显及监听编辑内容变化。
最低0.47元/天 解锁文章

6610





