editor-style.css and Formats Menu Separation?!?

  • Resolved KennyLL

    (@kennyll)


    7 years, 10 months ago

    Hi, we’ve been using TinyMCE Advanced along with Advanced TinyMCE Config for years on various sites to make our client’s lives much easier.

    It seems like in some recent update, the ability to load ‘editor-style.css’ so the text is styled nicely in the back-end, and replace the Formats menu contents with what is in ‘editor-style.css’, have been combined so you can only get ‘all-or-nothing’.

    Unfortunately, this appears to override the ‘style_formats’ option we setup in Advanced TinyMCE Config to allow us to declare what styles are in the Formats drop-down, and how they are applied (e.g., inline vs. block selector).

    So now, not only can we not easily determine what classes a users is able to select without completely stripping down our ‘editor-style.css’ file, we also can’t force certain styles to apply to a paragraph (they are all added as inline spans). And we had also set a format to allow a user to apply an actual ‘cite’ element to a citation, now not sure there is any way.

    I saw a couple recent support posts here where users were struggling with similar issues that might be more easily correctable if we could select those options separately again, or if what is in ‘TinyMCE Config’ would not be overridden by the single option.

    – Is there any other workarounds to get ‘TinyMCE Config’ formats to take priority over what’s in ‘editor-style.css’??

    THANKS! We’d be lost without these plugins!

    https://wordpress.org/plugins/tinymce-advanced/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Andrew Ozz

    (@azaozz)

    7 years, 9 months ago

    It seems like in some recent update, the ability to load ‘editor-style.css’ so the text is styled nicely in the back-end, and replace the Formats menu contents with what is in ‘editor-style.css’, have been combined so you can only get ‘all-or-nothing’.

    No, this is still a checkbox that needs to be checked by the user. editor-style.css is added by the theme, and a lot of themes use that now. However the styles are only imported when that option in TinyMCE Advanced is checked.

    Unfortunately, this appears to override the ‘style_formats’ option we setup in Advanced TinyMCE Config
    Is there any other workarounds to get ‘TinyMCE Config’ formats to take priority over what’s in ‘editor-style.css’??

    If you don’t need to import the styles, just turn that off. If you do, there is a setting for that. Check the TinyMCE docs: https://www.tinymce.com/docs/plugins/importcss/

    Thread Starter KennyLL

    (@kennyll)

    7 years, 9 months ago

    Thanks for the response, Andrew.

    Just to clarify:
    In older TinyMCE Advanced (e.g., v.4.1.9), there are 2 checkboxes titled:
    — Import editor-style.css
    and
    — Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.

    In newer TinyMCE Advanced (e.g., v.4.3.10.1), there is only one checkbox:
    — Create CSS classes menu

    The newer ‘Create CSS classes menu’ option combines what had been two separate functions, so now the ONLY way to load editor-style.css so text in back-end is styled will ALSO now replace all classes in the Formats menu with ANY classes found in the editor-style.css.

    We used to be able to ONLY check to load the editor-style.css, but NOT check to replace the Formats menu with all of the classes found in that file. This allowed much more control over what is displayed in the Formats menu, as we could just use TinyMCE Config to define exactly what we wanted, AND define HOW those styles were applied (e.g., as block elements not spans).

    Hope this makes more sense. Let us know if there might be any workaround to get the older behavior, as it’s really throwing off what we’re able to allow clients to format in the editor now.

    Thanks!

    Plugin Author Andrew Ozz

    (@azaozz)

    7 years, 9 months ago

    Ah, I see. Then your theme does not have “native” editor-style.css.

    As you already have the css file, and it is named editor-style.css, you only need to add it to the theme’s options. This is done with add_editor_style(); in your theme’s functions.php. Have a look at Twenty Ten, Twenty Eleven. etc.

    Thread Starter KennyLL

    (@kennyll)

    7 years, 9 months ago

    Perfect! I guess since we had always used the features in TinyMCE Advanced to load editor-style.css, we never thought to add it to our themes to load directly.

    This appears to restore our ability to separate loading editor-style.css from what replaces everything in the Formats menu using the newer versions of TinyMCE Advanced.

    Thanks a lot!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘editor-style.css and Formats Menu Separation?!?’ is closed to new replies.