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

How to prevent ckeditor to not add   in blank html tag

我在 Windows 8.1 OS 中安装了 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 已打开,您可以在圆形区域看到它自动在我的代码中添加一些 space 或制表符。

如何阻止它?

看看这个 Post: CKEditor unwanted &nbsp; characters

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&nbsp;\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 和其他标签一起使用。

The documentation to this.

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/

这个主题可能会有帮助

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

config.fillEmptyBlocks = false;

更多信息- here

UPD.

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

来自 official documentation

{Array} CKEDITOR.config.protectedSource Since: 3.0

List of regular expressions to be executed on input HTML, indicating HTML source code that when matched, must not be available in the WYSIWYG mode for editing.

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

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

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

更新 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
});
});

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

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

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