如何防止ckeditor不在空白html标签中添加

Question

我在 Windows 8.1 操作系统中安装了 Visual Studio 2012 Express，并根据要求在我的项目中使用 CKEditor。

我是 CKEditor 的新手，也以正确的方式使用它，但问题是在 CKEditor 的源代码中定义 html，它会自动替换

<div><i class="classname"></i></div>

与

<div>&nbsp;</div> or <div></div>

那么如何防止CKEditor不替换并按原样保存呢？ 我已经有了一些解决方案，但我正在替换仍然有一点错误

<i class="classname"></i>

与

<div class="classname"></div>

但在标签之间它会自动添加  。

如何防止不添加？

下图中CKEditor已打开，您可以在圆形区域中看到它自动在我的代码中添加一些空格或制表符。

如何阻止？

Answer 1

看看这篇文章： CKEditor 不需要的字符

经过一些研究，我可能会对这个问题有所了解 - 不幸的是，没有开箱即用的解决方案。

在 CKEditor 中，有四种方式可以出现不间断空格（有人知道更多吗？）：

1. 自动填充空块。可以在配置中禁用此功能：

   config.fillEmptyBlocks = false;
   

2. 按TAB键时自动插入。可以在配置中禁用此功能：

   config.tabSpaces = 0;
   

3. 将双空格转换为 SPACE+NBSP。 这是浏览器行为，因此 CKEditor 团队不会修复。它可以被修复 服务器端或客户端 javascript onunload。也许这个 php 是 开始：

   preg_replace('/\s \s/i', ' ', $text);
   

4. 通过复制和粘贴。如果您粘贴 UTF-8 no-break space 或双空格，CKEditor 会自动转换它。唯一的 我在这里看到的解决方案是执行上面的正则表达式。

   
     config.forcePasteAsPlainText = true;

   没有帮助。

总结：要摆脱所有不间断空格，您需要编写一个 清理用户输入的附加功能。

非常感谢评论和进一步的建议！ （我正在使用ckeditor 3.6.4)

编辑#1

看看这个。

CKEDITOR.dtd.$removeEmpty.i= 0;

您还可以将其与 span 和其他标签一起使用。

相关文档。

停止删除 CKEditor 中的任何空标签

有一个定义的标签列表，如果满足以下条件，将被删除： 空（请参阅 dtd.js 和 $removeEmpty 或运行 CKEDITOR.dtd.$removeEmpty 从控制台）。

• 来自 HTmL

为确保某些空标签不被删除，请添加属性 ‘数据-cke-生存’：

<span data-cke-survive="true" ></span>

• 来自配置

或者您可以配置不删除特定标签：

if(window.CKEDITOR){
            CKEDITOR.on('instanceCreated', function (ev) {
                CKEDITOR.dtd.$removeEmpty['span'] = 0;
                CKEDITOR.dtd.$removeEmpty['TAG-NAME'] = 0;
           }
}

通过在 CKEDITOR.dtd.$removeEmpty 中将元素设置为 0， 防止空标签被 CKEditor 删除。

http://margotskapacs.com/

Answer 2

这个主题可能会有帮助 https://stackoverflow.com/

简而言之 - 您可以在配置中禁用自动填充空块：

config.fillEmptyBlocks = false;

更多信息 - 这里

UPD。

你可以试试这个

config.protectedSource.push(/<i[^>]*><\/i>/g);

来自官方文档

{Array} CKEDITOR.config.protectedSource 自：3.0

要在输入 HTML 上执行的正则表达式列表，指示匹配时不能在所见即所得模式下进行编辑的 HTML 源代码。

config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP 代码

config.protectedSource.push( /<%[\s\S]*?%>/g ); // ASP 代码

config.protectedSource.push( /(]+>[\s|\S]*?]+>)|(]+/>)/gi ); // ASP.Net 代码

更新2

希望这会有所帮助。

CKEDITOR.on( 'instanceReady', function( ev )
{
// turn off excess line breaks in html output formatting for blockquote tag.
// In same way you can correct any tag output formating

ev.editor.dataProcessor.writer.setRules( 'blockquote',
{
  indent : false,
  breakBeforeOpen : false,
  breakAfterOpen : false,
  breakBeforeClose : false,
  breakAfterClose : true
});
});

Answer 3

对于正在使用 UniSharp/laravel-ckeditor 的人

<script>
  var options = {
    fillEmptyBlocks: false,
  };

  CKEDITOR.replace( 'content', options);
</script>    

Answer 4

CKEDITOR.on( 'instanceReady', function( ev )
{
// turn off excess line breaks in html output formatting for blockquote tag.
// In same way you can correct any tag output formating

ev.editor.dataProcessor.writer.setRules( 'blockquote',
{
  indent : false,
  breakBeforeOpen : false,
  breakAfterOpen : false,
  breakBeforeClose : false,
  breakAfterClose : true
});   
});