其他分享
首页 > 其他分享> > 使用tui-editor的markdown富文本编辑器样式显示异常问题

使用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