CKEditor automatically strips classes from div

Question

I am using CKEditor as a back end editor on my website  It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button  For example if I hit source and create a  lt div gt       lt div class  myclass  gt some content lt  div gt    It then for no apparent reason strips the class from the  lt div gt   so when I hit source again it has been changed to      lt div gt some content lt  div gt    I presume this irritating behaviour can be turned off in the config js  but I have been digging and cant find anything in documentation to turn it off

User · Answer

I found a solution   This turns off the filtering  it s working  but not a good idea     config allowedContent   true    To play with a content string works fine for id  etc  but not for the class and style attributes  because you have    and    for class and style filtering   So my bet is for allowing any class in the editor is   config extraAllowedContent             This allows any class and any inline style   config extraAllowedContent                  To allow only class  asdf1  and  class  asdf2  for any tag   config extraAllowedContent      asdf1 asdf2       so you have to specify the classnames   To allow only class  asdf  only for p tag   config extraAllowedContent    p asdf      To allow id attribute for any tag   config extraAllowedContent      id      etc etc  To allow style tag   lt style type  text css  gt     lt  style gt     config extraAllowedContent    style     To be a bit more complex   config extraAllowedContent    span ul li table td style   id                Hope it s a better solution

User · Answer

I would like to add this config allowedContent   true  needs to be added to the ckeditor config js file not the config js  config js did nothing for me but adding it to the top area of ckeditor config js kept my div classes

User · Answer

Edit  this answer is for those who use ckeditor module in drupal  I found a solution which doesn t require modifying ckeditor js file  this answer is copied from here  all credits should goes to original author   Go to  quot Admin  gt  gt  Configuration  gt  gt  CKEditor quot   under Profiles  choose your profile  e g  Full   Edit that profile  and on  quot Advanced Options  gt  gt  Custom JavaScript configuration quot  add config allowedContent   true    Don t forget to flush the cache under  quot Performance tab  quot

User · Answer

Following is the complete example for CKEDITOR 4 x    HTML   lt textarea name  post content  id  post content  class  form-control  gt  lt  textarea gt    SCRIPT  CKEDITOR replace  post content        allowedContent true        The above code will allow all tags in the editor   For more Detail   CK EDITOR Allowed Content Rules

User · Answer

If you use Drupal AND the module called  WYSIWYG  with the CKEditor library  then the  following workaround could be a solution  For me it works like a charm  I use CKEditor 4 4 5 and WYSIWYG 2 2 in Drupal 7 33  I found this workaround here  https   www drupal org node 1956778   Here it is  I create a custom module and put the following code in the   module  file    lt  php        Implements hook wysiwyg editor settings alter        function MYMODULE wysiwyg editor settings alter  amp  settings   context      if   context  profile  - gt editor     ckeditor          settings  allowedContent     TRUE          gt    I hope this help other Drupal users

User · Answer

Please refer to the official Advanced Content Filter guide and plugin integration tutorial    You ll find much more than this about this powerful feature  Also see config extraAllowedContent that seems suitable for your needs

User · Answer

I found that switching to use full html instead of filtered html  below the editor in the Text Format dropdown box  is what fixed this problem for me   Otherwise the style would disappear

User · Answer

if you re using ckeditor 4 x you can try  config allowedContent   true    if you re using ckeditor 3 x you may be having this issue   try putting the following line in config js  config ignoreEmptyParagraph   false

User · Answer

I face same problem on chrome with ckeditor 4 7 1  Just disable pasteFilter on ckeditor instanceReady This property disable all filter options of Advance Content Filter ACF     CKEDITOR on  instanceReady   function  ev            ev editor pasteFilter disabled   true

User · Answer

Since CKEditor v4 1  you can do this in config js of CKEditor   CKEDITOR editorConfig   function  config       config extraAllowedContent      id           remove   id    if you don t want IDs for HTML tags     You can refer to the official documentation for the detailed syntax of Allowed Content Rules

User · Answer

Disabling content filtering  The easiest solution is going to the config js and setting   config allowedContent   true     Remember to clear browser s cache   Then CKEditor stops filtering the inputted content at all  However  this will totally disable content filtering which is one of the most important CKEditor features   Configuring content filtering  You can also configure CKEditor s content filter more precisely to allow only these element  classes  styles and attributes which you need  This solution is much better  because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content  but it will not strip the content you want   For example  you can extend the default CKEditor s configuration to accept all div classes   config extraAllowedContent    div        Or some Bootstrap stuff   config extraAllowedContent    div col-md-  container-fluid row      Or you can allow description lists with optional dir attributes for dt and dd elements   config extraAllowedContent    dl  dt dd dir      These were just very basic examples  You can write all kind of rules - requiring attributes  classes or styles  matching only special elements  matching all elements  You can also disallow stuff and totally redefine CKEditor s rules  Read more about    Content filtering in CKEditor  ndash  why do you need content filter  Advanced Content Filter  ndash  in deep description of the filtering mechanism  Allowed content rules  ndash  how to write allowed content rules

User · Answer

This is called ACF Automatic Content Filter  in ckeditor It remove all unnessary tag s What we are using in text content Using this command in your config js file should be turn off this ACK   config allowedContent   true

User · Answer

Another option if using drupal is simply to add the css style that you want to use  that way it does not strip out the style or class name   so in my case under the css tab in drupal 7 simply add something like  facebook span icon-facebook2  also check that font-styles button is enabled

[class] CKEditor automatically strips classes from div

Examples related to class

Examples related to html

Examples related to ckeditor