解决tui-editor布局错误失效问题(Vue-Element-Admin)
2024-09-01 15:18:50
更新：突然想起来会不会是兼容或者版本问题？
使用tui-editor遇到markdown预览样式错误，也不清楚是不是版本的问题，改了下源码之后效果正常了
打开控制台看到几个类名不对劲，te-editor、te-md-splitter、te-preview应该是并列关系，这里变成了嵌套，初步排除是插件的自定义配置问题
打开node_modules包中的tui-editor文件夹，搜索一下``te-preview`看看是在什么地方渲染的
在js文件中搜索 containerTmpl 变量
var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor" />', '<div class="te-md-splitter" />', '<div class="te-preview" />', '</div>', '<div class="te-ww-container">', '<div class="te-editor" />', '</div>', '</div>'].join('');
看到其中有些div写成了自闭和标签，自己加上</div>，然后将所有js文件中containerTmpl替换
var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor">', '</div>', '<div class="te-md-splitter" >', '</div>', '<div class="te-preview">', '</div>', '</div>', '<div class="te-ww-container">', '<div class="te-editor">', '</div>', '</div>', '</div>'].join('');
这回就渲染正确了
最新文章
- 第一届山东省ACM——Phone Number（java）
- 那些PHP中没有全称的简写
- BZOJ2815: [ZJOI2012]灾难
- 关于plsql表如何创建自增长列
- WCF入门教程三[WCF的宿主]
- ARM处理机模式--内部寄存器
- jQuery选择器种类整理
- java--创建多线程两种方法的比较
- idea svn 的使用----转载，挺好的
- ArcGIS API for JavaScript 4.x 本地部署之IIS法
- Spring Boot admin 2.0 详解
- LNMP 支持路由重写
- Struts2之action 之 感叹号 ! 动态方法调用
- python 学习笔记：python例子
- TCP/IP 笔记 - ICMPv4和ICMPv6 : Internet控制报文协议
- cSharp:use Activator.CreateInstance with an Interface?
- hadoop-3
- 第一章 关于html适应手机屏幕的写法
- Entity Framework中的几种加载方式
- python基础----元类metaclass