回顾:
距离上一篇发文已经过去很久很久了,似乎一旦放下更文,就捡不起了。最开始的富有热情地写文章,信誓旦旦觉得自己每月都能更四篇用心写的文章,后来发现太难了,只是一腔激情是不够的,为了完成任务,越到后面文章越划水,内心一直在纠结,后面便断了更,发现断了以后真爽,每个月不再有压力。后面的计划是随心所欲地写文章,篇幅就不具体要求了,但是得用心去写。
Tinymce 的安装与使用
大概流程说一下,后面主要聊遇到的问题。
- 依赖安装 : 使用的 Tinymce 版本
"tinymce": "^6.7.3" "@tinymce/tinymce-vue": "^5.1.1"
- 语言包下载 www.tiny.cloud/get-tiny/la...
3. public 下新建文件夹tinymce放语言包和部分样式(避免打包压缩导致富文本样式出现问题)
langs
是我们下载的语言包,skins
是tinymce 依赖包内的样式
- 封装组件即可使用,附参考文档 blog.csdn.net/weixin_4236... tinymce.ax-z.cn/configure/e...
这样基本就可以正常使用富文本了,富文本图片默认使用的是base64,导致后台存储超出了限制,所以将图片上传处理了一下,使用正常的url。 在init 中有个配置项 images_upload_handler,可以自定义上传,文档也是挺全的,就不做过多介绍了。
乾坤子应用中遇到的问题
1 富文本独立子应用运行显示正常,但从乾坤主应用打开就无法显示,引入的样式资源报404。
最开始以为是乾坤对 tinymce
不兼容导致一些包找不到,试着换了版本还是同样的问题。想着可能是环境的问题,部署到线上这个问题应该就可以了,结果依旧不显示。最后的解决方案是,通过环境进行基础路径添加。比如开发环境中,我使用的是8088端口,在这个基础路径下引入资源,如果是线上,就取当前路径下的文件即可。部分代码如下,admin
是我的路由路径
js
const origin=window.origin
let baseURL
if(import.meta.env.MODE=='development'){ //本地主应用运行子应用
baseURL=`http://localhost:8088/admin/tinymce/`
}
else{
baseURL=`${origin}/admin/tinymce/`
}
const init = {
language_url: `${baseURL}langs/zh-Hans.js`, // 中文语言包路径
language: "zh-Hans",
skin_url: `${baseURL}skins/ui/oxide`, // 编辑器皮肤样式
content_css: `${baseURL}skins/content/default/content.min.css`,
...
2 图片上传重新设置导致按钮文字hover变英文
选图片的地方无法限制所有文件,所以在文件上传位置也加了限制,导致图片上传按钮hover时文字变成了英文,具体原因不清楚。所以对该按钮进行了重写
js
init_instance_callback: function(editor: any) {
//去除上传图片时独立运行应用与子应用 上传按钮 hover 文字不一一致问题
var toolbarEl = editor.editorContainer.querySelector('.tox-toolbar')
toolbarEl.addEventListener('click', function(e:any) {
let timer=setTimeout(():any => {
let element = document.querySelector('[title="源"]')||document.querySelector('[title="Browse files"]')
if(element){
element?.setAttribute('title','请选择图片')
}
clearTimeout(timer)
}, 300)
})
}
3 自定义样式后导致弹窗样式丢失
这个问题和富文本没什么关系,vue3 项目中特殊原因对 ele plus,大量重写和重置,导致子应用弹窗中按钮,输入框等都样式都异常,因为弹窗挂着节点是在 body
中,有些样式就无法使用了,但是不挂载在 body 上就会导致弹窗无法覆盖整个工作区。
解决方案:
使用 vue3
中的传送组件,将弹窗挂载在 app
节点上即可
无界子应用中遇到的问题
富文本子应用单独打开正常,无界主应用打开无报错,但不显示。 查看dom节点,发现引入的样式没有添加上。既然找到了问题,那就有思路了,重写样式或者再试着重新引入样式。我的方案是对有问题的样式一点点修改,但是很麻烦,需要改的很多,而且还需要多场景下(弹窗等)测试 特别是这种弹窗,在主应用打开使用时很容易出现样式问题。同事想到了另一只种更好的方案,就是在 style 中引入样式,测试结果是可以正常使用了。 skins/ui/oxide
js
<style lang="scss">
@import './oxide/skin.min.css';
@import './oxide/content.inline.min.css';
@import './oxide/content.min.css';
@import './oxide/skin.min.css';
@import './oxide/skin.shadowdom.min.css';
最后
后面会整理一下自己今年的详细计划,还得需要把这些坚持下去,暂时这些吧!