以前jQuery、PC网页时代,富文本编辑器一直就是百度Ueditor、KindEditor。现在使用Angular、Vue、React等MVVM架构以及最新的大前端

工程模式下,老的编辑器显然不更新了,累赘了。当然也有不少技术爱好者进行了老编辑器的打包成新架构可用的依赖。

选择一个满足业务需求的富文本编辑器还是难搞的,轻便的有quill之类的,然而有的项目需要丰富一点的富文本操作跟旧的Ueditor相比,差的远了。

angular框架和vue的差别(富文本编辑器还是Tinymce好一点)(1)

比较适中的方法是选择Tinymce编辑器,适配PC和移动端响应式页面,有自定义的上传接口和回调,可以粘贴剪切板图片上传,可以保存编辑内容(本地记忆)。

不过V5版本的最新版本,集成方式出现了一点点变化。至于Tinymce V5版本怎么和Vue、Angular集成,网上一大堆方法,自己去看就行了。但npm依赖更新到这两天的最新版,会出现图标不显示,那就在网上教程的基础上增加一个icons代码的引入。


Angular很简单,把npm下载下来的tinymce库文件夹下icons文件夹复制到工程下目录,然后在angular.json下配置导出访问目录即可,例如下面的操作。

{ "glob": "**/*", "input": "src/tinymce/icons", "output": "/tinymce/icons/" }

Vue版本也很简单,把tinymce依赖目录下的icons文件夹单独复制出来,放到项目public目录下,然后在Vue的配置对象里配置icons_url路径即可。

icons_url: `/tinymce/icons/default/icons.min.js`,

,