ckeditor removing empty span automatically

Question

i am using ckeditor and i have vary strange issue.

it remove automatically empty <span> for example

 <span class="new-class"></span>

removed automatically.

i am searching for solution for last 2 days but no success. i try to put following code in

config.js

CKEDITOR.config.allowedContent = true;

but no success.

i also add following code in html where i use ckeditor but no success.

   <script>     
var editor = CKEDITOR.replace( 'editor1', {
allowedContent: true,
    } );
   </script>    

thanks

Answer 1

I am using Django CMS 3, CKEditor 4.3 and I got the same problem using twitter bootstrap glyphicon. Looking at : http://ckeditor.com/forums/Support/Prevent-removal-of-empty-span-tags#forum-topic-top .

To allow empty span tag, I have added at the end of ckeditor/config.js

CKEDITOR.dtd.$removeEmpty.span = 0;

Answer 2

I came across this thread with the same problem and thought I'd post my solution. I didn't want CKEditor to remove any blank elements. Add the following to the bottom of your config.js file:

    $.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
        CKEDITOR.dtd.$removeEmpty[i] = false;
    });

Answer 3

You'll find two valid answers in this question: CKEditor strips <i> Tag

One says it's not possible to keep them if you want to see them in the editor and second says that you can prevent them from deleting, but you'll hide them.

Answer 4

the only option that works for me is to add:

config.extraAllowedContent = 'span(*)';

in the config.js, inside the:

CKEDITOR.editorConfig = function( config ) {

section the ' ' (asterisk) allows all classes inside the span tag, to allow only selected class names just add them instead of the ' ', separated by ','

Answer 5

This was annoying, but with help across a whole bunch of pages, i'll collate what I had found that works here;

(I'm using CKEditor 4.4.1 with the inlinesave editor, but this should work with any plugin)

in the core/ filter.js file

change:

var allowedContent = editor.config.allowedContent;

to:

var allowedContent = true;

( it's advised against this, so make sure you check what the user is saving ;-) )

And then in the core/ dtd.js file

near the bottom is a $removeEmpty: which holds a list of the elements that it chooses to ignore if they are set to 1.. Find the span and set it from 1 to 0 ( span: 0 )

And if you have the "glyphicons" plugin added to the config.plugins in config.js you should be able to add them, see them in the editor, and once saved, it shall still be there! :-)

Hope this helps

Answer 6

There are two problems here:

1) <span> s are discarded because they are not allowed contents.

2) <span> s are discarded because they are empty.

To fix the issue not only do you need to have non-empty <span> s, but also you need config.extraAllowedContent = 'span(selector1,selector2,...,selectorN)' in your configuration file.

As a side note, I recommend against config.allowedContent because that would allow just about anything.