解决tui-editor布局错误失效问题(Vue-Element-Admin)
更新:突然想起来会不会是兼容或者版本问题?
使用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('');
这回就渲染正确了

解决tui-editor布局错误失效问题(Vue-Element-Admin)的更多相关文章
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- legend2---开发日志5(如何解决插件的延迟问题,比如vue)
legend2---开发日志5(如何解决插件的延迟问题,比如vue) 一.总结 一句话总结:元素可以先设置为隐藏,这样就不会让用户看到延迟的问题,然后等加载完再显示, 元素先设置为隐藏 加载完再显示 ...
- service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误
service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...
- 解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题)
解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的 ...
- 【转】怎么解决java.lang.NoClassDefFoundError错误 ,以及类的加载机制
转自http://blog.csdn.net/jamesjxin/article/details/46606307 前言 在日常Java开发中,我们经常碰到java.lang.NoClassDefFo ...
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- 【转载】重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...
- 【mysql】service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误
service MySQL start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...
随机推荐
- 2020牛客暑期多校训练营(第五场)B - Graph (异或 最小生成树 分治 Trie)
B - Graph 题目链接 每次操作不会改变两点之间的路径异或和 以 1 号点为起点,算出任意一点到 1 号点的异或值 dis[i](把该值当做 i 号点权值), 那么任意两点的异或值为 \(dis ...
- 2019牛客暑期多校训练营(第十场)B-Coffee Chicken
>传送门< 题意:S(1)="COFFEE",S(2)="CHICKEN" ,S(n) = S(n−2)+S(n−1),请输出 S(n) 中从第 k ...
- P3128 [USACO15DEC]最大流Max Flow (树上差分)
题目描述 Farmer John has installed a new system of N-1N−1 pipes to transport milk between the NN stalls ...
- Codeforces Global Round 9 B. Neighbor Grid
题目链接:https://codeforces.com/contest/1375/problem/B 题意 给出一个 $n \times m$ 的方阵,每个方格中有一个非负整数,一个好方格定义如下: ...
- Slim Span POJ 3522 (最小差值生成树)
题意: 最小生成树找出来最小的边权值总和使得n个顶点都连在一起.那么这找出来的边权值中的最大权值和最小权值之差就是本题的结果 但是题目要求让这个输出的结果最小,也就是差值最小.那么这就不是最小生成树了 ...
- Win10 资源管理器经常卡死问题
什么问题? 我的Win10资源管理器开始出现卡死(假死.未响应)的情况,频率越来越高,触发方式越来越广,包括OpenDialog.打开拥有快捷方式的文件夹/桌面.右键空白处.右键文件/文件夹.拖动文件 ...
- linux运维面试精华题
Linux运维跳槽面试精华题|第一集 1.什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护,他集合了网络 ...
- VXLAN学习之路-结合VRF在Linux中实践VXLAN网络
一.概述 近期在在搞网络安全HCIE.CISP的认证的事,顺便将VXLAN技术再次系统的学习一下,学习过程中看到云原生实验室里的一篇文章,就是关于VXLAN在Linux系统中的实践,感觉文章写得很好, ...
- html5 image>usemap (attribute)
# html5 image>usemap (attribute) https://caniuse.com/#search=usemap http://www.w3.org/TR/html5 ...
- 网站备案查询/ICP备案查询网
网站备案查询/ICP备案查询网 互联网站备案信息全国公安机关互联网站安全服务平台http://www.beian.gov.cn/portal/index 1 http://www.miitbeian. ...