最近需要用到富文本编辑器插件,项目是用VUE框架搭建的 所以这里就专门介绍几款有关vue的富文本插件:
项目中趟过了很多坑,特记下供大家借鉴,希望大家不要重滔我的复撤 本文章只介绍插件 具体使用方式可自行百度
由于编辑器编辑的内容需要在小程序 能完美显示,并且能和小程序富文本编辑器完全打通
1.百度的ueditor (网上都这么说)(没有缘分,果断放弃)
优势：开源，插件多，基本满足各种需求， 由百度web前端研发部开发。
不足：比较庞大，对于网页的加载来说，会相对影响速度 ,界面不太美观。
官方的wiki文档并不是很完善，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。
2.bootstrap-wysiwyg (网上都这么说)(不能满足需求,果断放弃)
优点：外观简洁大方，使用方便，支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性
没有强制规定的样式。
缺点：没有表情包 , 没有开发文档不便于阅读使用，无字体变色，无视频上传功能
以上两个插件我没使用,可能是真的因为缘分不够吧 如果你喜欢尽管拿去用
下面介绍一下我的漫漫入坑路 从Vue-Quill-Editor 说起吧
第一个编辑器
这个编辑器还是可以的 页面简单大气 上手快,文档配置简单,在管理后台中使用完全no problem,
当我把上传图片 还有数据绑定都做好 觉得工作怎么会如此简单的时候 改了一下字体 发现编辑器会给span 标签添加类名,然而你必须要引入类名样式才能显示对应样式,这不是开玩笑吗 为什么要这么设计啊,是不是应该写到span 的行内样式里,一般管理后台用的话 前台还要引一下css文件 这不符合常理啊作者.
最后小程序的富文本编辑器里不支持外部样式.
唉心塞... 所以还是换编辑器吧 对吧 又不是就这一个 所以信心满满
换编辑器 必须换
Vue-html-Editor
vue-quil-editor vue-html-editor 何等的相似, 一样的优势 一样的配置 页面简单大气上档次
但是 问题又来了 微信小程序 富文本编辑器根本不支持font 标签 漂亮!!!
换编辑器 必须换
所以就有了接下来的Wangeditor
这是一个文档齐全 上手特别容易,有可视化编辑器demo 预览的地表最强编辑器,我觉得这一点特别好 最起码能让我们开发者在用之前知道你这个开源插件UI 是什么样的,能不能满足用户的需求 不是说把代码跑起来我才能知道你这个编辑器长什么样,浪费了开发者的时间和精力 到最后还不能用.
那就开始码代码吧 因为有了之前的经验 先看了一下结果获取到的html 结果 凉凉夜色为我思念成河 化作春泥呵护了我。。。
一样的font 标签 一样的font-size 属性 ,实在不想再换编辑器了 没办法 源码改不动 replice 替换吧 需要把所有的font 标签替换成span 还得把font的font-size 属性 和color 属性 改为行内,心塞,讲道理 这不符合常理啊,
换编辑器 必须换
kindeditor
主要特点
快速：体积小，加载速度快
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
这是官方解释, 说的我都信了 那就用用吧
果然满足我了我所有的需求 完美的能和小程序对接起来 不管是从前端显示 还是在小程序 富文本编辑器里显示都能兼容, 就是ui 长的有点丑,没办法,谁让功能强大呢,丑点就丑点吧 ,没想到坑在后面,就是编辑器没有暴露自定义上传参数,比如上传图片到服务器的时候需要从Header 传个token,怎么办,凉拌,也不知道网上哪位大佬改了一下他的源码重写了图片上传,
kindEditor富文本初始化问题以及上传图片请求头携带token
好人啊
所以多图上传呢,还得改代码 唉心塞...
先冷静一下,最后还是在这几个编辑器里择优选择了Wangeditor 在他的基础上来满足我的需求
找了很多资料最后一行代码解决问题
styleWithCSS = true
可以把font 替换成span
最后再推荐一下Wangeditor 虽然官方还在维护,还有很多问题,但是我还是比较看好他的,能够满足自己需求的编辑器就是好的编辑器
兜兜转转还在又回到Wangeditor 如果你是大佬可能不会走这么多弯路,直接在源码上拓展就能实现你的功能,还是能力不够吧,希望有时间能够自己手写一个富文本编辑器
如果你只是需要一个编辑器 其实任意一款都可以,如果你想和微信小程序兼容起来,Wangeditor首选
