50

I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any <i> tag from previously inserted content to the db.

Case:

I insert html content to the db, some content contain the <i> elements. I do this with the CKEditor. Everything works perfect and the content shows up on the webpage. But when i want to edit the previously inserted content, the <i> elements are missing.

In my specific case i use:

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

Of course if i disable the editor, the content shows up just fine in the textarea.

2
  • 1
    There is another SO question about this where a guy shows a broad method to allow empty tags: stackoverflow.com/a/25016231/2418655
    – dhaupin
    Commented Apr 8, 2015 at 16:31
  • 1
    I eliminated the problem by removing CKEditor (which I like a lot) from the project and using codemirror/jsbeautify without a WYSIWYG. May not be an option for most. Commented Apr 13, 2017 at 17:02

7 Answers 7

74

When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty

For example, I added the following to the config.js

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.

3
  • 3
    This seems like the most sensible way to me. Shame answers added after the fact don't get much recognition. Commented Aug 7, 2014 at 12:26
  • See also stackoverflow.com/questions/44417887/…
    – rémy
    Commented Oct 24, 2018 at 13:15
  • I've bundled up the various fixes in this related Drupal issue. There are 2 problems fixed by this solution: HTML filtering not permitting <i> tags at all, and ACF cleaning them up anyway by default.
    – Timmah
    Commented Dec 9, 2020 at 2:34
63

I found the solution for this specific problem i ran into with the <i> tag

The original answer i got from drupal forum

The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:

// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

Thanks to Spasticdonkey for pointing me to the link.

4
  • no, you cant see the icons in the wysiwyg area.But when you look in the Source of the wysiwyg editor, you will see the <i>.
    – HenryW
    Commented Aug 18, 2013 at 10:56
  • I have scoured the Net, and this is the only thing that will work. Now I must modify it to keep empty divs and others.
    – tread
    Commented Apr 14, 2014 at 7:02
  • in version 2.6.3 i add FCKConfig.ProtectedSource.Add(/<i[^>]*><\/i>/g); and this is working Commented Mar 18, 2019 at 1:16
  • after making this change I try to minify it but I get errors caused by this line Commented Mar 30, 2019 at 14:25
26

Here is what works for me

add the 3 lines of code below in the same order in the drupal ckeditor profile setting admin/config/content/ckeditor/edit/Full

ADVANCED OPTIONS >> Custom JavaScript configuration

    config.allowedContent = true;
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    CKEDITOR.dtd.$removeEmpty.i = 0;

First line is pretty much turning off the advanced filtering

Second line is allowing ALL class (), any style {} and any attribute [*] for the p,div, li and ul.

The last line is for the empty tag...this line works with images...I have found that if you use config.protectedSource.push(/]*></i>/g); it strips out the tag while editing.

2
  • Very nice @Alauddin. I tried everything on this page and elsewhere. Your solution works for me. Much appreciated! Question (minor detail): is there a way to preserve the indentation of the HTML source?
    – Bisonbleu
    Commented Aug 25, 2016 at 22:48
  • Thanks a lot. This is the only working solution on Drupal!
    – Elin Y.
    Commented Oct 18, 2017 at 19:51
5

for 4.3 version ckeditor

in config.js (after config section) paste

CKEDITOR.dtd.$removeEmpty['b'] = false;

and write widget with code

CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],

icons: 'bwcaret',

init: function( editor ) {

    editor.widgets.add( 'bwcaret', {

        button: 'Create a caret',

        template: '<b class="caret"></b>',


        allowedContent: 'b(!caret)',

        requiredContent: 'b(!caret)',

        upcast: function( element ) {
            return element.name == 'b' && element.hasClass( 'caret' );
        },

    });
}

});

1
  • 1
    impossible, widgets were introduced in 4.3 Commented Jan 7, 2014 at 22:10
3

i found a permanent solution for it.actually what happened ckeditor removing only blank tag.whatever the tag is, may b <i> tag or <span> tag

if you are using any icon like font-awesome,maeterlize icon etc ... you can stop it by using below code in your config.js file

CKEDITOR.dtd.$removeEmpty.span = false; 
CKEDITOR.dtd.$removeEmpty.i = false;

if you are using more blank tag then you need to add the tag name after $removeEmpty

2

There are two possible problems:

  • Read about Advanced Content Filter. CKEditor is removing elements which are not allowed, but you can extend filter's rules.

  • However, if the problem is that CKEditor removes empty <i> elements, then you need to find other way of using it. CKEditor is not a WYSIWYG website builder. It is a document editor, so the loaded content must have a meaning. Empty inline element does not have any meaning, therefore it is removed, because otherwise editor would not know what to do with it.

    One of the possible solutions in the (near) future, will be to use Widgets system, to handle those empty elements. But for now I advice you to check the CKEDITOR.htmlDataProcessor and short guide how to use it.

2

CKEditor 4 removes emtpy tags, so here you can do trick without changing any config settings.

Replace

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

With

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color">&nbsp;</i>

Now <i></i> tag have content i.e. &nbsp; so CKEditor will not remove that tag.

Not the answer you're looking for? Browse other questions tagged or ask your own question.