标签：文本编辑 markdown join containerTmpl js tui editor var

问题描述

在做毕设的过程中使用的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。