有你在真好 的个人博客
web-vue-react-ng后台管理系统前端开发,富文本编辑器没个省心的
阅读:2055 添加日期:3/30/2021 5:43:08 PM

不仅仅是web端,貌似很多地方,都有一定的富文本编辑器轮子,但是像我这样针对不同用户不同业务不同需求的,几乎玩转过所有能找到的富文本编辑器工具,基本上就没个让人省心的。

如果你要骂我自己去造个轮子,如果你我是这水平的人,咱就没必要看下文啦,还用得着上@今日头条 吗?听说这里的用户都是月薪2万。我说如果能自己造个比市面上轮子更好的富文本编辑器,恐怕都是月薪NN万了,何必来这浪费时间呢?

目前将就使用的是Tinymce编辑器,但是在Vue里自己封装了一个编辑器组件,以便所有表单编辑时候可以调用,奇怪的问题一大堆。

web/vue/react/ng后台管理系统前端开发,富文本编辑器没个省心的

我的使用方法是根据网络博客文章的方式引入,使用Tinymce5与Vue整合。、

参考文章为:

https://liubing.me/vue-tinymce-5.html

然而,如上方法,一模一样的使用方式,在项目里,奇怪的问题就是,同一个URL,点击第一次可以编辑内容,返回,然后再点击就出现空白了。搞了三天没解决!

不喜欢Vue最大的一点就是,路由是否配置keep-alive,需要每次打开页面更新数据,没有angular那种生命周期函数ngAfterViewInit,可以每次等到渲染节点渲染完成再自己去根据已经渲染好的HTML节点获取元素进行再次js操作。使用mounted函数进行编辑器初始化,可以,我切换路由再次访问,不会再次运行,这就需要activated,但是不会让组件重新渲染。关于这个Vue数据更新的,一种就是activated里,一种就是watch里监听$route。这种操作真是要命咯!

从N多项目来看,一般组件化复用组件都是在render函数进行渲染!还是angular一把梭,没这么多蛋疼的生命周期渲染过程的操作。

web/vue/react/ng后台管理系统前端开发,富文本编辑器没个省心的

除了Tinymce,还有quill/wangeditor/vueditor、ckeditor等很多富文本编辑器,但是太差了。编辑内容操作十分有限!

目前只能看看那些付费的编辑器如何了,付费编辑器从Demo来看功能不少。

如果只是我自己使用,最适合的编辑器是Editor.js,结果直接输出结构化数据。这样非常适合内容放在不同的前端Android、ios、小程序等任何地方方便展示,根据预设格式进行自定义标准化渲染,就不会出现编辑时期的排版和结果不一致的问题。

web/vue/react/ng后台管理系统前端开发,富文本编辑器没个省心的

而给普通用户使用的系统,要做到不令用户吐槽,傻瓜式使用,目前还真是无法满足。

以前传统web开发,使用百度Ueditor编辑器,功能很多,但是目前很多内容要放在手机上,或者响应式页面,这个编辑器也是太臃肿了。编辑结果的HTML夹杂了太多没必要的标签,或者是不能很好的使用移动端。而且编辑器已经多年不更新了,在Vue、angular、react不同地方的引入也是会出现不同的问题。