Question

What is the difference between the format_tags property and the stylesSet property in the CKEDITOR config?

I’m using the API for some custom buttons (which are elsewere in the DOM, not in the editor itself) and I also have a dropdown for styles.

I first used the format_tags property:

var tags = config.format_tags.split( ';' );
// Create style objects for all defined styles.
var styles = {};
$.each(tags,function(i,tag) {
  styles[ tag ] = new CKEDITOR.style( config[ 'format_' + tag ] );
  styles[ tag ]._.enterMode = ckeditor.config.enterMode;
});

After this I could call the desired style function to apply (or remove) it.

Today I stumbled upon the stylesSet property, I can use it like this:

CKEDITOR.stylesSet.add('my_custom_style', [
  { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
  { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
]);

This looks better for me, because I know can use extra classes and inline style for an element.

Can somebody explain why there are two ways to format text? Why is the format_tags used when you have a better configuration option like stylesSet?

Answer 1

I looked into it. It seems that you can use the same format for a format_tag as a stylesSet.

I now have this in my config:

config.format_tags = 'h1;h2;h3;test';
config.format_test = { element : 'span', attributes : { 'class' : 'test' }, styles: { color: 'blue'} };

This works the best for adding custom format-tags to your ckeditor.