wangEditor的初步使用

很多时候，我们会使用到富文本编辑器，

安装wangEditor

npm install wangeditor --save

具体使用

官方文档介绍了高度的设置方法：

editor.config.height = 300 // 设置编辑区域高度

在使用过程中，我使用的宽度设置方法为：

<div id="div1" style="width: 600px"></div>

通过onchange函数来获取编辑器中的内容，配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行。

具体项目代码：

<template>
  <div>
    <div id="div1" style="width: 600px">
    </div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
     
  mounted () {
     
    const editor = new E('#div1')
    editor.config.height = 300 // 设置编辑区域高度
    editor.config.placeholder = '请输入'
    editor.config.focus = false // 取消自动 focus
    editor.config.onchange = function (newHtml) {
     
      console.log(newHtml)
    }
    // 配置 server 接口地址(配置后才能上传本地图片)
    editor.config.uploadImgServer = '/upload-img'
    // 自定义上传图片函数
    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
     
      console.log(resultFiles)
      console.log(insertImgFn)
    }
    editor.create()
  }
}
</script>
<style>
</style>

运行如下图所示：

在功能上，wangEditor可以通过自定义扩展菜单来实现更多你想要的功能，官文文档链接：https://doc.wangeditor.com/，如果后续有更好的实践体验，小编再来更新。