kindeditor编辑器回车换行代码修改

最新推荐文章于 2023-08-24 11:27:33 发布

原创最新推荐文章于 2023-08-24 11:27:33 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#kindeditor #kindeditor回车换行

织梦专栏收录该内容

108 篇文章

订阅专栏

本文探讨KindEditor编辑器在插入程序代码时存在的显示问题，特别是在和<pre>标签间的多余 行，影响代码展示效果。通过分析编辑器的处理逻辑，提出了解决方案，即在kindeditor-all.js中修改代码，以消除多余的标签行，改善代码显示。

kindeditor编辑器插入程序代码后在标签和<pre>标签间会多出一行

导致前台显示的时候很难看。如下图：

from clipboard

我想实现的情况是1，但是出现的情况是2

而且初次提交代码没问题，当修改的时候用到“HTML代码”标签的时候，就会出现多一行。

分析原因，应该是

1，插入代码的时候会出现<pre>...</pre>这种情况

2，修改的时候会变成<pre>...</pre>这种情况

3，切换“HTML代码”的时候kindeditor会把替换成

4，再次提交代码，就会出现多一行的问题出现。

修改的思路是把<pre>替换为<pre>，</pre>替换为</pre>，就不会出现多一行了。

打开kindeditor-all.js747行，插入两行代码

html = html.replace(/(<\/pre>)(\s*)(<(?:p|p\s[^>]*)>)\s*(<\/p>)/ig, '$1$2'); // <p></p><pre>替换为<pre>
html = html.replace(/(<(?:p|p\s[^>]*)>)\s*(<\/p>)(\s*)(<pre\s[^>]*>)/ig, '$3$4'); // </pre><p></p>替换为</pre>

如图：

from clipboard