CODEWITHSUNDEEP
ckeditor
Ahmad
Ahmad

Reputation: 2129

How to add a css class to a selected Paragraph/Div?

Is there any option in ckeditor by adding a css class by selecting a paragraph?

My requirements are that I have lengthy text in the field with some paragraphs. One of paragraph I want to change the style through css. So for that I want an option in the ckeditor toolbar from where I can add a css class to a paragraph, not from source and editing the html.

Like currently there is an option for the "Normal (DIV)" in the Format dropdown. Can I add another option in this dropdown with "DIV with class test" and it will add a div with a test css class?

Upvotes: 1

Views: 1148

Answers (1)

Pandi_Snkl
Pandi_Snkl

Reputation: 494

Adding Styleset to ckeditor config. but it only add style attribute to div not class.

CKEDITOR.stylesSet.add('CustomStyle', [
    { name : 'TxtDanger', element : ['p','div','h1'], styles : {'color' : 'red' } }
]);

CKEDITOR.editorConfig = function( config ) {
    config.stylesSet = 'CustomStyle';
};

Now you Can Get 'TxtDanger' style in your ckeditor style dropdown. But, 'CustomStyle' is replace your default ckeditor styles(Paragraph, Heading1,2..). so first add all default style into your 'CustomStyle'. here list of default styles.

Upvotes: 1

Related Questions