轻量级富文本编辑器wangEditor结合vue使用方法

一、安装

使用npm下载：`npm install wangeditor`

二、 建立实例

（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.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.create()
    }
}
</script>

<style scoped>
.editorMenu {
  border: 1px solid #ccc;
}
.editor {
  margin-top: -1px;//将多出来的一像素边框隐藏
  border: 1px solid #ccc;
  min-height: 400px;//编辑框最小高度
  height:auto;//编辑框高度超过最小高度会根据内容高度自适应
}
</style>

三、上传图片

（1）editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
（2）editor.customConfig.uploadImgServer = '/upload' // 上传服务器端地址
/upload是上传图片的服务器端接口，接口返回的数据格式以下（固定的，不然会取不到图片地址！！！）：

{
    // errno 即错误代码，0 表示没有错误。
    //       若是有错误，errno != 0，可经过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}

这些基本就够用了

官网也写得很详细滴
感谢您看到最后~