1、安装
使用npm下载：
`npm install wangeditor`
2、 创建实例
（1）基本用法：
<template>
<div>
<div id="editor" class="editor"></div>
</div>
</template><script>
import E from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new E('#editor')
editor.customConfig.onchange = (html) => {
this.formArticle.content = html
}
editor.create()
}
}
</script>
效果如图
（2）自定义高度写法如下：把菜单和编辑框分开
<template>
<div>
<div id="editorMenu" class="editorMenu"></div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new E('#editorMenu', '#editor')
editor.customConfig.onchange = (html) => {
this.formArticle.content = html
}
editor.create()
}
}
</script>
<style scoped>
.editorMenu {
border: 1px solid #ccc;
}
.editor {
margin-top: -1px;//将多出来的一像素边框隐藏
border: 1px solid #ccc;
min-height: 400px;//编辑框最小高度
height:auto;//编辑框高度超过最小高度会根据内容高度自适应
}
</style>3、上传图片
（1）editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
（2）editor.customConfig.uploadImgServer = ‘/upload’ // 上传服务器端地址
/upload是上传图片的服务器端接口，接口返回的数据格式如下（固定的，否则会取不到图片地址！！！）：
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0, // data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]}
这些基本就够用了。官网也写得很详细滴
wangeditor3+vue2.0简单例子
把wangeditor作为组件的形式使用
子组件中
<template>
<div id="wangeditor">
