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

1、安装

使用npm下载： `npm install wangeditor`

2、 创建实例

（1）基本用法：

效果如图

（2）自定义高度写法如下：把菜单和编辑框分开

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

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作为组件的形式使用

子组件中

上面字最多的地方好好看清楚，只有做了customInsert: function (insertImg, result, editor){}里的步骤，图片才会在富文本中显示，否则是不会自动显示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。