解决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 ...
随机推荐
- AtCoder Beginner Contest 171
比赛链接:https://atcoder.jp/contests/abc171/tasks A - αlphabet 题意 给出一个字母,如果为大写输出 'A',如果为小写输出 'a' . 代码 #i ...
- Codeforces Round #676 (Div. 2) XORwice、Putting Bricks in the Wall、Palindromifier
题目链接:XORwice 题意:给你两个数a.b.求一个数x,使得((a异或x)+(b异或x))这个值最小,输出最小那个x 题解: 输出(a|b)-(a&b)就行(猜了一手 代码: #incl ...
- POJ_2112 二分图多重匹配
题意: //题意就是给你k个挤奶池和c头牛,每个挤奶池最多可以来m头牛,而且每头牛距离这k这挤奶池//有一定的距离,题目上给出k+c的矩阵,每一行代表某一个物品距离其他物品的位置//这里要注意给出的某 ...
- Codeforces Round #672 (Div. 2 B. Rock and Lever (位运算)
题意:给你一组数,求有多少对\((i,j)\),使得\(a_{i}\)&\(a_{j}\ge a_{i}\ xor\ a_{j}\). 题解:对于任意两个数的二进制来说,他们的最高位要么相同要 ...
- GYM101810 ACM International Collegiate Programming Contest, Amman Collegiate Programming Contest (2018) M. Greedy Pirate (LCA)
题意:有\(n\)个点,\(n-1\)条边,每条边正向和反向有两个权值,且每条边最多只能走两次,有\(m\)次询问,问你从\(u\)走到\(v\)的最大权值是多少. 题解:可以先在纸上画一画,不难发现 ...
- CS144学习(1)Lab 0: networking warmup
CS144的实验就是要实现一个用户态TCP协议,对于提升C++的水平以及更加深入学习计算机网络还是有很大帮助的. 第一个Lab是环境配置和热身,环境按照文档里的配置就行了,前面两个小实验就是按照步骤来 ...
- codeforces 1030D Vasya and Triangle【思维+gcd】
题目:戳这里 题意:选出三个点构成三角形,要求面积为n*m/k. 解题思路:因为三个点的坐标都是正整数,根据三角形面积公式(x1*(y2-y3)+x2*(y3-y1)+x3*(y1-y2))/2=n* ...
- JxBrowser: 6.6.1 Crack
JxBrowser: 6.6.1. 1. RELEASE NOTES Download:HomePage JxBrowser is a cross-platform library that prov ...
- Install pyaudio on Ubuntu
pip install python3-pyaudio sudo apt-get install portaudio19-dev python-all-dev pip install pyaudio
- vue & this.$route & this.$router
vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...