How to prevent ckeditor to not add in blank html tag

问题

I have Visual Studio 2012 Express installed in Windows 8.1 OS and using CKEditor in my project as per requirement.

I am new for CKEditor and using it in a proper way as well but the problem is by defining the html in source in CKEditor it replaces automatically

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

with

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

So How to prevent CKEditor not to replace it and save as it is? I have got some solution but still little bit error I am replacing

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

with

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

but in between the tag it automatically add &nbsp.

How to prevent it to not add &nbsp?

Here in below image is CKEditor is open and you can see in rounded area it automatically adds some space or tab in my code.

How to stop that?

回答1:

Have a look at this Post: CKEditor unwanted   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?):
Automatic filling of empty blocks. This can be disabled in the config:
config.fillEmptyBlocks = false;
Automatic insertion when pressing TAB-key. This can be diabled in the config:
config.tabSpaces = 0;
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);
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)

EDIT #1

Have a look at this.

CKEDITOR.dtd.$removeEmpty.i= 0;

You can also can use this with span and other tags.

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/

回答2:

This topic can be helpfull https://stackoverflow.com/

In short- You can disable Automatic filling of empty blocks in the config:

config.fillEmptyBlocks = false;

more information- here

UPD.

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

From 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

UPD 2

Hope this will help.

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

回答3:

For the one who are using UniSharp/laravel-ckeditor

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

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

来源：https://stackoverflow.com/questions/33164316/how-to-prevent-ckeditor-to-not-add-nbsp-in-blank-html-tag

标签

html

visual-studio-2012

ckeditor