Page 1 of 1

TinyMCE : Customs Formats

Posted: Sat Feb 13, 2021 4:49 pm
by musicscore
Hey there.

I want to add custom formats in TinyMCE.
So I selected "at a custom formats dropdown" in the settings of TinyMCE and added this code :

Code: Select all

Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6

This works perfect but now my problem.

I also want to add a div with the class "color-gold" and a div with the class "color-black".

So I added ";Color-cold=div" add the end of the previous code but how do I enter the class (color-gold and color-black) ?

Please help. TIA.

Re: TinyMCE : Customs Formats

Posted: Mon Feb 15, 2021 4:43 pm
by DIGI3
Under the CSS tab in TinyMCE settings, add the following to the "Style formats" box:

Code: Select all

title: 'Gold', block: 'div', classes: 'color-gold'
title: 'Black', block: 'div', classes: 'color-black'
Then your editor will see these options under Format > Formats, or you can add the styleselect button to the toolbar. This will add the div wrapper and the corresponding class to the selected block.