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

Sylvie

So, are you asking how to allow empty spans, or something else? – Triphammer

dev.ckeditor.com/ticket/8782 – Abele

yes its part of my design and i am also using latest version of ckeditor – Sylvie

Please suggest to flag user2826162 as the right answer since Reinmar is only relinking. – Abele

Possible duplicate of CKEditor strips <i> Tag – Idou

Answer 1

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.

Americana

Great. +1 here and +1 on linked answer. – Heterosexuality

Answer 2

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;

Polyzoan

I've added that line in config.js, cleared cache, and Drupal doesn't seem to see that file, cause nothing happened. – Clingy

This worked for me in combination with allowedContent = true – Filly

Answer 3

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

Waltman

Works on v4.4.7 better than the alternate per-tag methods. Seems to work on top of config.js before the other directives are loaded too. I believe this should be the accepted answer since its more flexible than the answers given at the other SO link. Thanks. – Blazonry

This should be the answer for 4.4.+ because CKEDITOR.dtd.$removeEmpty is used directly in the HTML parsing phase and will avoid removal of the tags. – Scrooge

Where do I add a config.js file for Drupal 10 and CKEditor 5? – Saraisaraiya

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 ','

Chewink

This is a better approach if you need to fix the issue site wide. – Happen

Where do I add a config.js file for Drupal 10 and CKEditor 5? – Saraisaraiya

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

Eiderdown

These 2 things together is what worked for me. allthough rather than hack the dtd file I just used CKEDITOR.dtd.$removeEmpty.span = 0 – Filly

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.

Strouse

Where do I add a config.js file for Drupal 10 and CKEditor 5? – Saraisaraiya