解决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 ...
随机推荐
- Codeforces Round #657 (Div. 2) C. Choosing flowers(贪心)
题目链接:https://codeforces.com/contest/1379/problem/C 题意 有 $m$ 种花,每种花数量无限,第一次购买一种花收益为 $a_i$,之后每一次购买收益为 ...
- Educational Codeforces Round 91 (Rated for Div. 2) A. Three Indices
题目链接:https://codeforces.com/contest/1380/problem/A 题意 给出一个大小为 $n$ 的排列,找出是否有三个元素满足 $p_i < p_j\ and ...
- hdu5489 Removed Interval
Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submission ...
- hdu4325 Flowers
Problem Description As is known to all, the blooming time and duration varies between different kind ...
- Educational Codeforces Round 97 (Rated for Div. 2) D. Minimal Height Tree (贪心)
题意:有一个从根节点\(BFS\)得来的序列(每次\(bfs\)子节点的时候保证是升序放入队列的),现在让你还原树(没必要和之前相同),问能构造出的最小的树的深度. 题解:不看根节点,我们从第二个位置 ...
- Codeforces Round #613 (Div. 2) C. Fadi and LCM (数学)
题意:给你一个正整数\(x\),找两个正整数\(a\),\(b\),使得\(lcm(a,b)=x\),并且\(max(a,b)\)最小. 题解:我们知道,\(lcm(a,b)=a*b/gcd(a,b) ...
- Python3.9.1中如何使用match方法?
接触编程的朋友都听过正则表达式,在python中叫re模块,属于文字处理服务里面的一个模块.re里面有一个方法叫match,接下来的文章我来详细讲解一下match. 作为新手,我建议多使用帮助文档,也 ...
- C++中流操作符<<重载的实现
一.继承fstream后重载其<< 注意:重载函数中不能直接使用参数中的流out,否则会出现递归出错. class CLogStream : public ofstream { publi ...
- Mac下anaconda的安装和基本使用
Mac下anaconda的安装和基本使用 安装 在conda官网下载安装conda. 打开terminal输入conda -V,回车显示conda的版本说明安装成功. 将conda更新到最新版本 co ...
- 微服务架构学习Day01-SpringBoot入门
基本概念 SpringBoot的优点: 可以创建独立的Spring应用 SpringBoot嵌入Tomcat,Jetty和Unsertow, 不需要部署war文件 根据需要通过maven获取start ...