在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有实用价值，需要的朋友可以参考下
1、安装
使用npm下载： `npm install wangeditor`
2、 创建实例
（1）基本用法：
<div> <div id="editor" class="editor"></div></div>
效果如图
（2）自定义高度写法如下：把菜单和编辑框分开
<div> <div id="editorMenu" class="editorMenu"></div><div id="editor" class="editor"></div></div>
.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 !=<a>本文来源gao($daima.com搞@代@#码8网^</a> 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 "errno": 0, // data 是一个数组，返回若干图片的线上地址 "data": [ "图片1地址", "图片2地址", "……" ] }
这些基本就够用了。官网也写得很详细滴
wangeditor3+vue2.0简单例子
把wangeditor作为组件的形式使用
子组件中
<div id="wangeditor"> <div style="text-align:left"></div></div>
上面字最多的地方好好看清楚，只有做了customInsert: function (insertImg, result, editor){}里的步骤，图片才会在富文本中显示，否则是不会自动显示。
以上就是轻量级富文本编辑器wangEditor结合vue使用方法示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：轻量级富文本编辑器wangEditor结合vue使用方法示例
转载请注明原文链接：轻量级富文本编辑器wangEditor结合vue使用方法示例
