XSS Filtering In CKEditor

We all know about online  WYSIWYG editors which are used to edit html documents. CKEditor is one the them. We use it whenever we need to upload any story or article from the admin panel. Sometimes we need to customize the editors according to our need and requirements . In todays article i will let you know about its customization of CKEditor when you have activated  the xss filtering feature  in your project and none of the inline css is allowed all over the project.

As CKEditor use most of the feature using inline css in style tag then it is necessary to know how to use the editor in that case dyanmically.

We will move forward with the example for better understanding.


In order to create editor create a text area.



I have given a link to download CKEditor plugin at the bottom of the page . Unzip it in your project. Insert js of CKEditor at the top of page then include below script to use it. To apply editor on text-area , use its name to replace text-area with CKEditor.

If you have activate xss filtering in your project and  you try to use some of the features of the editor , you will find that styling has not been able to apply on the elements as style tag has been removed ,as you save your content of the editor. So to  apply those features  you have to create your own style set according to your need.  

Just example you have to create your own align-left feature instead of editor’s inbuilt. Firstly just remove inbuilt button of  align-left and create class for align-left feature.Apply it on the elements you want. Here I have taken all the elements as i can use align left feature anywhere on any element  in my article.

Insert the custom css file on which you would write your css for your align-left class.

And atlast pass the content_config variable to editor,

STYLE (custom.css) –


In result ,you will find the styles drop-down has been created in your editor. In which there is an option with the name of Align Left . Select any of the paragraph or any of the element given above syntax from your article and then choose styles of Align Left . It will insert the class align-left on that element. Using its class it will apply styles written in custom.css file.

Similarly you can add many of the feature with the same method either it is inbuilt or your custom. Like  I  have created another, of dropcap to first element of article .



STYLE (custom.css) –

To download  CKEditor visit – https://ckeditor.com/ckeditor-4/download/

Please follow and like us:

Leave a Reply