避免在ckeditor源中出现额外的换行符

Question

我希望我在适当的社区中提出这个问题。

我是fckeditor的长期用户，现在我正忍耐不住，现在用ckeditor替换fckeditor。 这非常容易安装，并且基本可以正常工作！

不过，我确实确实遇到了一个问题，我希望这里的人可以给我一个指引，指出我可以做什么。

问题是出现额外的换行符。

随附的第一个屏幕截图是编辑器在编辑时在我的站点上的外观。

附带的第二张屏幕截图显示了发布后查看结果的样子（您可以看到所有额外的换行符。

原因-如果我查看源代码（第三个屏幕截图），似乎是源代码中ul标签周围的多余行，或者可能是在p标签周围。 我不确定。

实际上，如果我在“源”模式下对其进行编辑并删除多余的行并重新提交，则最终结果看起来很好。

我想知道避免这些额外的换行符的最佳实践是什么。 我修改了设置以添加以下内容：

        CKEDITOR.replace( '%% whichField %%', {
            on: {
                instanceReady: function( ev ) {
                    // Output paragraphs as <p>Text</p>.
                    this.dataProcessor.writer.setRules( 'p', {
                        indent: false,
                        breakBeforeOpen: false,
                        breakAfterOpen: false,
                        breakBeforeClose: false,
                        breakAfterClose: false
                    });
                }
            }
        });

这有所帮助，但是根据输入，我仍然会在SOURCE中看到额外的空行。 我想知道是否有一个通用的全方位解决方案。 就像在上述设置中未指定'p'一样，我可以指定更通用的内容吗？ 还是有更好的做法来处理这种“额外的换行符”问题？

谢谢，

道格

Answer 1

只要您以后不使用nl2br（）之类的函数来处理此代码，HTML元素之间的间距就不会有任何区别，该函数将新行字符替换为<BR> 。

我的猜测是您有很多CKEditor不会产生的<BR>标记，但是这些标记是通过与上述功能类似的功能完成的。

为了阻止CKEditor产生新的换行符，从而使您没有任何新的换行符，请检查HTML Output Formatting示例以获取启发。 在底部的“获取示例源代码”部分中，单击第一个链接。 您将找到一个代码，该代码有点神奇，可以找到要为其设置编写器规则的所有元素，在所有位置都设置为false而不是true ，并且应该可以解决问题：

for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
    this.dataProcessor.writer.setRules( e, {
        indent: false,
        breakBeforeOpen: false,
        breakAfterOpen: false,
        breakBeforeClose: false,
        breakAfterClose: false
    });
}

如果您是我，我希望在将换行符更改为<BR>之前进行一些聪明的检测，以确定是否在HTML标记内是否包含换行符，以保持HTML源代码的美观。 您可能需要检查https://www.drupal.org/project/wysiwyg_linebreaks以获取灵感（我不是该模块的作者）。