如何防止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>

但是在标签之间，它会自动添加&nbsp。

如何防止它不添加&nbsp？

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

如何停止它？

- 3 rules

Answer 1

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

After some research I might shed some light on this issue - unfortunately there is no out-of-the-box solution.

In the CKEditor there are four ways a no-break space can occur (anybody knows more?):

1. Automatic filling of empty blocks. This can be disabled in the config:

   config.fillEmptyBlocks = false;
   

2. Automatic insertion when pressing TAB-key. This can be diabled in the config:

   config.tabSpaces = 0;
   

3. Converting double spaces to SPACE+NBSP. This is a browser behavior and will thus not be fixed by the CKEditor team. It could be fixed serverside or by a clientside javascript onunload. Maybe this php is a start:

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

4. By copy&paste. If you paste a UTF-8 no-break space or double-spaces CKEditor will convert it automatically. The only solution I see here is doing a regex as above. config.forcePasteAsPlainText = true; doesn't help.

Summary: To get rid of all no-break spaces you need to write an additional function that cleans user input.

Comments and further suggestions are greatly appreciated! (I'm using ckeditor 3.6.4)

编辑 #1

看一下这个。

CKEDITOR.dtd.$removeEmpty.i= 0;

你也可以将它与 span 和其他标签一起使用。

这个文档。

Stop Removing ANY Empty Tag in CKEditor

There is a defined list of tags that is going to be removed if empty(see dtd.js and $removeEmpty or run CKEDITOR.dtd.$removeEmpty from console).

• From HTmL

To ensure the certain empty tag are not being removed, add attribute ‘data-cke-survive’:

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

• From Configurations

Or you can configure the particular tag from not be removed:

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

By setting an element to 0 in the CKEDITOR.dtd.$removeEmpty, it prevents the empty tags from being removed by CKEditor.

http://margotskapacs.com/

- KMathmann

---

我尝试了你的解决方案，但没有得到结果，它仍然用空白替换。我已经更新了问题，请仔细阅读。 - 3 rules

是的，目前它正在运行，但对于每个HTML标记（如i），我都必须放置这一行代码！ - 3 rules

嗨KMathmann，又出现了一个问题<blockquote>"一些引用内容"</blockquote>在这里它会在引用前后添加"，所以会占用页面空间。我该如何去掉它？ - 3 rules

尝试使用“config.entities = false;” - KMathmann

哦，Mamikon Arakelyan更快。 - KMathmann

让我们在聊天中继续这个讨论。 - 3 rules

Answer 2

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

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

config.fillEmptyBlocks = false;

更多信息- 这里

更新。

你可以尝试这个 config.protectedSource.push(/<i[^>]*><\/i>/g);

来自官方文档

{Array} CKEDITOR.config.protectedSource 从3.0开始

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

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

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

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

UPD 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
});
});

- Mamikon Arakelyan

---

不好意思，当我开始写作时，顶部的答案并不存在。如果这看起来像抄袭，请谅解。 - Mamikon Arakelyan

@MamikonArakelyan 我尝试了，但是对我的代码没有影响。它用空白覆盖了它。 - 3 rules

@padhiyar，您可以在配置中尝试添加以下代码：config.protectedSource.push(/<i[^>]*><\/i>/g); - Mamikon Arakelyan

@MamikonArakelyan 哇，太棒了，目前它正在工作，但你能简要地告诉我它是如何工作的吗？ - 3 rules

但我不知道，这是否会导致其他问题？ - Mamikon Arakelyan

Answer 3

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

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

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

- Sobin Augustine