在 CKEditor 中添加 时删除不需要的换行符答案

【问题标题】：Removing unwanted newline characters when adding in CKEditor在 CKEditor 中添加 时删除不需要的换行符
【发布时间】：2011-02-02 13:49:27
【问题描述】：

在 CKEditor 中加载带有一组段落的内容时，它会将我的  标签替换为 &#x9;

这意味着编辑器将其转换为：

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

变成这样的结局：

<p>
   paragraph 1</p>
<p>
   paragraph 2</p>
<p>
   paragraph 3</p>

如何解决它，以便 CKEditor 在看到段落标签时不会添加额外的换行符？

【问题讨论】：

标签： javascript newline wysiwyg ckeditor

【解决方案1】：

在其他地方（我很抱歉我没有记下我从哪里得到它。），我找到了代码来解决所有块级标签的这个问题。对于我的项目，由于输出到 XML 并作为 CDATA 导入到其他应用程序中，额外的换行是一个问题。

所以，在我的 ckeditor_config.js 文件中，在 CKEDITOR.editorConfig 函数之后，我输入了这个：

CKEDITOR.on('instanceReady', function( ev ) {
  var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','li','blockquote','ul','ol',
  'table','thead','tbody','tfoot','td','th',];

  for (var i = 0; i < blockTags.length; i++)
  {
     ev.editor.dataProcessor.writer.setRules( blockTags[i], {
        indent : false,
        breakBeforeOpen : true,
        breakAfterOpen : false,
        breakBeforeClose : false,
        breakAfterClose : true
     });
  }
});

其中一些元素可能不需要这种处理；显然，blockTags 数组可以很容易地根据您的需要进行编辑。

【讨论】：

看起来这个答案在 4 年后继续提供帮助。维护一个旧系统，需要这个来解决标签问题^^。

【解决方案2】：

将此行添加到 ckeditor.js 配置文件中：

n.setRules('p',{indent:false,breakAfterOpen:false});

有关 HTML Writer 格式的更多信息，请参阅 CKSource Docs 的 Developers Guide: Output Formatting。

【讨论】：

非常感谢您。这是 CKEditor 的其中一件让我非常恼火的事情，我从不知道如何改变它。我不知道谁会想要在 p 标签内使用换行符和缩进:)

【解决方案3】：

我相信有一个设置来格式化代码，或者自动缩进或类似的东西。它旨在使源代码更具可读性。我猜它的有效性有待商榷。

【讨论】：

【解决方案4】：

如果您像我一样想在实例级别进行操作并且不想接触配置文件以便于更新/升级。那么这是另一种解决方案。

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

参考：Output Formatting

【讨论】：

【解决方案5】：

像魅力一样发挥作用的最佳解决方案：

编辑 contents.css 文件并设置段落样式，例如

 p {
     margin-top:0px;
     margin-bottom:5px;
 }

【讨论】：