使用npm下载： `npm install wangeditor`
2、 创建实例
（1）基本用法：
<template> <div> <div></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></div> <div></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> <div ref="editorElem"></div> </div> </template> <script> import E from 'wangeditor' export default { name: 'editorElem', data () { return { editorContent: '', } }, props:['catchData'], //接收父组件的方法 mounted() { var editor = new E(this.$refs.editorElem) //创建富文本实例 editor.customConfig.onchange = (html) => { this.editorContent = html this.catchData(html) //把这个html通过catchData的方法传入父组件 } editor.customConfig.uploadImgServer = '你的上传图片的接口' editor.customConfig.uploadFileName = '你自定义的文件名' editor.customConfig.uploadImgHeaders = { 'Accept': '*/*', 'Authorization':'Bearer ' + token //头部token } editor.customConfig.menus = [ //菜单配置 'head', 'list', // 列表 'justify', // 对齐方式 'bold', 'fontSize', // 字号 'italic', 'underline', 'image', // 插入图片 'foreColor', // 文字颜色 'undo', // 撤销 'redo', // 重复 ] //下面是最重要的的方法 editor.customConfig.uploadImgHooks = { before: function (xhr, editor, files) { // 图片上传之前触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 // return { // prevent: true, // msg: '放弃上传' // } }, success: function (xhr, editor, result) { // 图片上传并返回结果，图片插入成功之后触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 this.imgUrl=Object.values(result.data).toString() }, fail: function (xhr, editor, result) { // 图片上传并返回结果，但图片插入错误时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, error: function (xhr, editor) { // 图片上传出错时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, timeout: function (xhr, editor) { // 图片上传超时时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） customInsert: function (insertImg, result, editor) { // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： let url = Object.values(result.data) //result.data就是服务器返回的图片名字和链接 JSON.stringify(url) //在这里转成JSON格式 insertImg(url) // result 必须是一个 JSON 格式字符串！！！否则报错 } } editor.create() },
父组件中