解决tui-editor布局错误失效问题

标签：问题   配置   控制   down   lazy   版本   containe   预览   样式   

使用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布局错误失效问题

标签：问题   配置   控制   down   lazy   版本   containe   预览   样式   

原文地址：https://www.cnblogs.com/genhao7/p/13561576.html