CODEWITHSUNDEEP
javascripttinymce-4
Nethaneel Sagun
Nethaneel Sagun

Reputation: 11

Font colors as classes in TinyMCE

I've been looking into TinyMCE and I was wondering if there was a way for setting colors and font-sizes in the default forecolor and fontsizeselect toolbar as classes instead of inline CSS styles.

So instead of something like:

<span style='color: #fff;font-size:18px'>Text here</span>

It's going to look like:

<span class='f_col_white f_size_xl'>Text here</span>

Upvotes: 1

Views: 292

Answers (2)

Yi Feng Xie
Yi Feng Xie

Reputation: 5027

forecolor can be only configured via Text Color Options. All of the options are applying inline styles.

An alternative way is to define color styles in style_formats like so:

tinymce.init(
  toolbar: "styleselect",
  content_css: "https://the-stylesheet-which-contain-classes-you-defined",
  style_formats: [
    { title: "White Color", classes: "f_col_white", inline: "span" }
  ],
  // other options  
)

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13744

The short answer to this is "no" - the plugin does not work this way.

Inserting inline styles means that content will render the same in the editor as it would when rendered later in a browser. Attaching classes would mean that you would have to load CSS into the editor and load that same CSS into a rendered web page for the content to look the same. Certainly not impossible (or overly difficult) but would require more work to get right.

If you want these types of behaviors you can create your own plugins based on the ones provided by TinyMCE (e.g. textcolor for the foreground color issue) and modify the plugin to work as you desire.

Upvotes: 1

Related Questions