WangEditor是一个比较新开源在线编辑器，支持将图片转base64按文本文件提交，在一些简单的系统中可以省不少事（至少免去了搞上传系统和附件管理系统）。
如何将WangEditor和Vue+Element-UI整合起来，官网语焉不详，仅提供了一个范例。我看了一些博客的引入办法是直接在页面中引入的，这里我把我的组件式引入方法和踩的坑介绍一下。
先在npm下安装wangeditor:
npm install wangeditor --save
首先，查看官网的Vue引入编辑器源码，可以看到Vue是以组件形式引入的：
（源码位于wangEditor/example/demo/in-vue/src/路径下）
<template>
<div>
<div ref="editor" style="text-align:left"></div>
<button v-on:click="getContent">查看内容</button>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
data () {
return {
editorContent: ''
}
},
methods: {
getContent: function () {
alert(this.editorContent)
}
},
mounted() {
var editor = new E(this.$refs.editor)
editor.customConfig.onchange = (html) => {
this.editorContent = html
}
editor.create()
}
}
</script>
<style scoped>
</style>
我们将这个组件取名为Editor.vue放到我们工程的component目录下，在需要引用的页面内加入：
<template>
<div id="article_editor">
<editor></editor>
</div>
</template>
<script>
import Editor from './components/Editor'
export default {
name: 'article_editor',
components: {
Editor
}
}
</script>
就可以了。这样，编辑器就是以组件形式引入工程的。
然后，我们还要做的是从父组件（表单页）获取子组件（编辑器）的内容：
<Editor v-bind:content="editForm.content"></Editor>
同时，子组件做了以下修改：
1.增加content属性，接收父组件传值。
2.分离编辑器和工具栏，实现编辑器尺寸自动变化。
3.绑定content和editorContent的值，以便父页面获取。
<template>
<div>
<div id="toolbar" class="toolbar">
</div>
<div style="padding: 1px 0; background-color: #ccc"></div>
<div id="editor" class="text" style="min-height:400px;border:1px solid #ddd;"> <!--可使用 min-height 实现编辑区域自动增加高度-->
</div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'Editor',
data () {
return {
editorContent: ''
}
},
props:{
content:{
type:String,
required:false
}
},
methods: {
getContent: function () {
this.content=this.editorContent;
}
},
mounted() {
var editor = new E("#toolbar","#editor")
editor.customConfig.uploadImgShowBase64 = true ;
editor.customConfig.onchange = (html) => {
this.editorContent = html
}
editor.create()
editor.txt.html(this.content);
}
}
</script>
<style scoped>
</style>