likes
comments
collection
share

关于tinymce富文本编辑器的小问题处理

作者站长头像
站长
· 阅读数 49

继上一篇,3分钟帮你搞定v3项目的富文本编辑器之后,使用了一些日子后,发现了点小问题,在这里做个小总结吧,也希望能帮助到更多的朋友少走弯路。

问题一: 初始化过程太慢

害这个问题真是,一点都忍不了,初始化慢的时候可能需要个10秒左右,这要是让产品经理看到了,不得炸了。经过修改后基本就是不到1秒,速度那是嗖嗖的。 首先我们需要把下载到依赖中的tinymce文件给剪切出来, 放到assets文件夹下。

关于tinymce富文本编辑器的小问题处理

然后在编辑器标签上,添加以下属性即可

tinymceScriptSrc='./src/assets/tinymce/tinymce.min.js'

关于tinymce富文本编辑器的小问题处理 然后刷新页面,你就会发现你的初始化简直是有飞一般的感觉啦。

问题二:上传图片

在初始化后的富文本编辑器中,只能传入图片链接,不能直接上传图片。那对我们来说是体验及其不好滴,官方也给了解决方案,可做配置,自定义上传图片公共在这里也给大家分享一下。 首先,我们需要在init属性下配置images_upload_handler属性 images_upload_handler

关于tinymce富文本编辑器的小问题处理 这个时候你就会发现在我们的图片中,多了一个上传按钮

关于tinymce富文本编辑器的小问题处理

那么这个onUpload是有一些参数的具体可见官方文档。上传图片 这里我把我的代码给放出来,给大家做一下参考。

关于tinymce富文本编辑器的小问题处理 今天的分享就到这里啦,如果对您有帮助,记得点赞哈,告辞各位!

转载自:https://juejin.cn/post/7137215730558664718
评论
请登录