3.9 beta 3 – tinymce not take style colors in the editor bar

Can explain the issue a bit more please? What is missing?

I made a new post.

Typed in ‘Header 1’ and selected the text, changed it to a rather noxious green, then made it Header 1. Color worked.

Tried it the other way (made it a header then changed color) and it also worked.

If you’re saying that the visual version on the drop down doesn’t change, that would be true. It wouldn’t really be readable otherwise.

Exactly. In the menu takes only font-family and font-size but not the colors.
I have used tinymce in my application and change the colors in the menu is very comfortable.

an example

I remembered that I used the inline mode to realize my application.

Maybe the differences are due to that.

Can you link to your plugin? It’s possible that you have to update it for TinyMCE 4.

It is not a plugin but a theme.
to change editor styles I use the funcion add_editor_style

the part of the css file relative to the headers is as follows

html body.mceContentBody h1,
  html body.mceContentBody h2,
  html body.mceContentBody h3,
  html body.mceContentBody h4,
  html body.mceContentBody h5,
  html body.mceContentBody h6,
  .mce-content h1,
  .mce-content h2,
  .mce-content h3,
  .mce-content h4,
  .mce-content h5,
  .mce-content h6 {
    clear: both; }
  html body.mceContentBody h1,
  .mce-content h1 {
    color: #775f38;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 2.3125rem;
    line-height: 1.2;
    margin: 0 0 20px 0; }
  html body.mceContentBody h2,
  .mce-content h2 {
    color: #775f38;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 0 0 20px 0; }
  html body.mceContentBody h3,
  .mce-content h3 {
    color: #444444;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 20px 0; }
  html body.mceContentBody h4,
  .mce-content h4 {
    color: #775f38;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 20px 0; }
  html body.mceContentBody h5,
  .mce-content h5 {
    color: #444444;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 20px 0; }
  html body.mceContentBody h6,
  .mce-content h6 {
    color: #775f38;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 20px 0; }

It’s not you, it’s tinyMCE 4, which is … not something we can easily fix. If you inspect the CSS on https://www.tinymce.com/tryit/inline.php you can clearly see they do this for H1:

<span id="mce_40-text" class="mce-text" style="font-family:'Trebuchet MS', Arial, sans-serif;font-size:24px;font-weight:bold;font-style:normal;text-decoration:none solid rgb(108, 171, 0);text-transform:none;color:rgb(108, 171, 0);background-color:rgba(0, 0, 0, 0);padding:0 2px;border:0px none rgb(108, 171, 0);border-radius:0px;outline:rgb(108, 171, 0) none 0px;text-shadow:none;">Heading 1</span>

So it’s all inline, AND it’s not actually calling an H ??

You’ll have to work and research the changes in TinyMCE to see how to apply those.