更新:突然想起来会不会是兼容或者版本问题?


使用tui-editor遇到markdown预览样式错误,也不清楚是不是版本的问题,改了下源码之后效果正常了

打开控制台看到几个类名不对劲,te-editorte-md-splitterte-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)的更多相关文章

  1. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  2. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  3. legend2---开发日志5(如何解决插件的延迟问题,比如vue)

    legend2---开发日志5(如何解决插件的延迟问题,比如vue) 一.总结 一句话总结:元素可以先设置为隐藏,这样就不会让用户看到延迟的问题,然后等加载完再显示, 元素先设置为隐藏 加载完再显示 ...

  4. service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误

    service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...

  5. 解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题)

    解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的 ...

  6. 【转】怎么解决java.lang.NoClassDefFoundError错误 ,以及类的加载机制

    转自http://blog.csdn.net/jamesjxin/article/details/46606307 前言 在日常Java开发中,我们经常碰到java.lang.NoClassDefFo ...

  7. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  8. 【转载】重置密码解决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 ...

  9. 【mysql】service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误

    service MySQL start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...

随机推荐

  1. 基于线段树的RMQ

    RMQ(Range Minimum/Maximum Query)区间最值查询,即给出长度为n的数组A,以及m组询问s.t(s<=t<=n),返回区间[s,t]中的最值. 基于线段树的方法实 ...

  2. 【noi 2.6_9277】Logs Stacking堆木头(DP)

    题意:给出在最底层的木头的个数,问有多少种堆放木头的方式.要求木头必须互相挨着在一起. 解法:f[i]表示最底层i个木头的堆放木头的方式.注意递推的思想!只需知道上一层堆放0~i-1个(即最底层堆放i ...

  3. Codeforces Round #540 (Div. 3) D2. Coffee and Coursework (Hard Version) (二分,贪心)

    题意:有\(n\)个数,每次可以选\(k(1\le k\le n)\)个数,并且得到\(a_1+max(0,a_2-1)+max(0,a_3-2)+...+max(0,a_k-k+1)\)的贡献,问最 ...

  4. Codeforces Global Round 9 A. Sign Flipping (构造)

    题意:有一个长度为\(n\)(odd)的序列,可以更改所有的数的正负,要求最少\(\frac{n-1}{2}\)个\(a_{i+1}-a_i\ge0\),并且要求最少\(\frac{n-1}{2}\) ...

  5. 国产smartbits版本-minismb测试高恪路由器IP限速

    Minismb测试仪表是复刻smartbits的国产版本,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和 ...

  6. 手摸手带你学移动端WEB开发

    HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...

  7. bzoj5312 冒险(吉司机线段树)题解

    题意: 已知\(n\)个数字,进行以下操作: \(1.\)区间\([L,R]\) 按位与\(x\) \(2.\)区间\([L,R]\) 按位或\(x\) \(3.\)区间\([L,R]\) 询问最大值 ...

  8. HDU 6706 huntian oy(杜教筛 + 一些定理)题解

    题意: 已知\(f(n,a,b)=\sum_{i=1}^n\sum_{j=1}^igcd(i^a-j^a,i^b-j^b)[gcd(i,j)=1]\mod 1e9+7\),\(n\leq1e9\),且 ...

  9. 将从摄像头即时读入的人像放入背景视频中_with_OpenCV_in_Python

    import cv2 import numpy as np import time cap = cv2.VideoCapture(0) background_capture = cv2.VideoCa ...

  10. MOOC学习成果认证及对高等教育变革路径的影响

    MOOC是网络开放教育创新发展的产物,也是备受人们欢迎的网络学习途径.当前制约MOOC能否可持续深入发展的问题聚焦于MOOC学习成果能否得到合理的认证.MOOC学习成果认证分为非学分认证和学分认证.M ...