最近有需求,需要在项目中做一个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然后用双向绑定来,传值或者获取值,这样会非常灵活,还有一个原因我不使用的原因是,这个编辑器没有上标,下标的功能。
而公司需要这两个功能,所以最后放弃了这个富文本编辑器的使用,并没有自己亲自去封装。
。
来源:https://www.cnblogs.com/fqh123/p/12286639.html