使用tui-editor的markdown富文本编辑器样式显示异常问题

问题描述

在做毕设的过程中使用的element-ui，但是使用富文本编辑器的时候，出现markdown预览样式错误，如下图，右侧的预览样式只显示一部分，以及wysiwyg是大白板

问题解决

研究了一下源码，发现node_modules包中的tui-editor文件夹中的tui-editor-Editor.js


为

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('');

代码格式化后为

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写成了自闭和标签，自己加上，
然后将所有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('');

这三个js自己看看是调用的哪一个，如果不行，就全替换

替换结束后，这回就渲染正确了

注意提醒！！！

最后，一定要注意再注意，改完后，轻易不要用
‘npm install’
用了之后会返回重前，再改一次

标签：文本编辑,markdown,join,containerTmpl,js,tui,editor,var
来源： https://blog.csdn.net/qq_43925089/article/details/117593899