ckeditor custom default paragraph

0
votes

In ckeditor, I only want to allow two types of p elements, either red or blue. I prepared the following fiddle. The problem is that initially, paragraph format is plain black, neither blue or red. How can I set initial paragraph format in the editor?

My contentsCss link is as follows:

.clsRed{ 
    color: red;
}

.clsBlue{ 
    color: blue; 
}

ckeditor configuration is set as follows: 

allowedContent: 'p(clsRed,clsBlue)',
format_tags: 'Red;Blue',
format_Red: {'name': 'Red', element: 'p', attributes: {'class': 'clsRed'}},
format_Blue: {'name': 'Blue', element: 'p', attributes: {'class': 'clsBlue'}},
1
ckeditor

1 Answers

0
votes

The solution I found is to add transformation to p elements, so whenever p is encountered, it is transformed accordingly. Filter works like this:

editor.filter.addTransformations( [
    [{
        element: 'p',
        right: 
            function( el, tools ) 
            {
                // Modify p elements without any class
                if (el.classes == null || el.classes.length == 0) 
                {
                    el.classes = ['clsBlue'];
                }
             }
    }]
]);