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

回顾:

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

Tinymce 的安装与使用

大概流程说一下,后面主要聊遇到的问题。

  1. 依赖安装 : 使用的 Tinymce 版本 "tinymce": "^6.7.3" "@tinymce/tinymce-vue": "^5.1.1"
  2. 语言包下载 www.tiny.cloud/get-tiny/la...

3. public 下新建文件夹tinymce放语言包和部分样式(避免打包压缩导致富文本样式出现问题)

langs是我们下载的语言包,skins是tinymce 依赖包内的样式

  1. 封装组件即可使用,附参考文档 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';

最后

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

相关推荐
有梦想的刺儿13 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具34 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web