Add custom format option to CKEdtitor?

Question

I apologize if this question was asked earlier, I tried to search / search here / browse the CKEditor forums and not come up with anything that I can understand and implement (sorry, I'm not that great for this JavaScript stuff)

Basically, I want to add one custom option to the drop-down list of the CKEditor format, it should create a range with a class, as shown below:

<span class="custom-font"></span> 

I tried using below in the "config.js" file, but it does not work:

 config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;span' config.format_span = { element : 'span', attributes : { 'class' : 'cutsom-font' } }; 

Can someone point me in the right direction?

Answer 1

The "format" uses only block-level elements, so you cannot use this to add a span tag around selected text. For this you need a "style." To add to the default styles that CKEditor offers, add your style object in styles.js. This is where the default styles are defined. In addition, you need to add the attribute "name" to the object.

 { name: 'Your custom style', element: 'span', attributes: {'class':'custom-font'} } 

If you want to create a list of your own styles to replace the default values, you can find the details HERE .

According to the link, you can also use your own .js file to define styles or use a stylesheet to extract CSS styles.