乾坤，无界微应用中 tinymce 富文本踩坑日志

回顾：

距离上一篇发文已经过去很久很久了，似乎一旦放下更文，就捡不起了。最开始的富有热情地写文章，信誓旦旦觉得自己每月都能更四篇用心写的文章，后来发现太难了，只是一腔激情是不够的，为了完成任务，越到后面文章越划水，内心一直在纠结，后面便断了更，发现断了以后真爽，每个月不再有压力。后面的计划是随心所欲地写文章，篇幅就不具体要求了，但是得用心去写。

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';

最后

后面会整理一下自己今年的详细计划，还得需要把这些坚持下去，暂时这些吧！