Home/ Questions/Q 8701453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:24:04+00:00

I’m sorry if this question has been asked before, I’ve tried googling/looking on here/browsing

  • 0

I’m sorry if this question has been asked before, I’ve tried googling/looking on here/browsing the CKEditor forums and not come up with anything that I can seem to understand and implement (apologies, I’m not that great at this JavaScript stuff)

Basically, I want to add one custom option to the format dropdown list of CKEditor, it should create a span with a class like below:

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

I’ve tried using the below in the “config.js” file, but it doesn’t seem to 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 anybody point me in the right direction here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The “format” only deals with block level elements so you can’t use that to add span tag around selected text. You need “style” to do that. To add to the default styles that CKEditor comes with add your style object in the styles.js. That’s where the default styles are defined. Also, you need to add “name” attribute to the object.

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

    If you want to make a list of your own styles to replace defaults you can find details HERE.

    According to the link you can also use your own .js file to define styles or use stylesheet to fetch css styles.

    • 0