最近有需求，需要在项目中做一个pc与移动端都适配的富文本编辑器，网上查到用wangEditor编辑器的比较多，于是打算练习一下
官网地址：http://www.wangeditor.com/
bootcdn上有一个10版本的 不过在网上没看到有人使用过10版本的先使用3的最新版本吧
简单例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') ) editor.create() </script> </body> </html>
具体详细配合可以参考文档
在vue封装成组件
<template> <div> <div ref="editor" style="text-align:left"></div> </div> </template> <script> import E from "wangeditor"; export default { name: "editor", data() { return { editor:"" }; }, props: { content: { required: true } }, mounted(){ this.editor = new E(this.$refs.editor); this.editor.customConfig.onchange = html => { this.$emit('catchData',html); }; // 配置服务器端地址 this.editor.customConfig.uploadImgServer = "/Upload.php"; //自定义一个图片参数名 this.editor.customConfig.uploadFileName = "filename"; // 将图片大小限制为 3M this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; this.editor.create(); }, watch: { content: function(val) { this.editor.txt.html(val); } } }; </script> <style scoped> </style>
这样就ok了。原理很简单就是把变量声明成全局变量，然后监听加载
最后一个问题，这个编译器放在手机端上看的时候会炸窝，解决方法有两种。
第一种，在全局样式中添加
.w-e-toolbar { flex-wrap: wrap; }
第二种修改js源文件 wangEditor.js中的4661行，加上 flex-wrap: wrap;就好了。
//使用组件
<WangEditor :catchData="catchData" v-bind:content="content"></WangEditor>
//接收参数
methods: {
catchData(value){
this.content=value //在这里接受子组件传过来的参数，赋值给data里的参数
},
}
上述方法虽然封装成组件了，但是使用起来并不方便，因为它不是双向绑定的，是通过自定义事件从子组件向父组件传值的。而且每个编辑器的内容必须对应写一个自定义方法，不够灵活，
可以将容器换成texteara然后用双向绑定来，传值或者获取值，这样会非常灵活，还有一个原因我不使用的原因是，这个编辑器没有上标，下标的功能。
而公司需要这两个功能，所以最后放弃了这个富文本编辑器的使用，并没有自己亲自去封装。
。