TinyMCE Custom Styles

TinyMCE Custom Styles | Tim Reeves (original author David Stöckl) | advanced,editor,style,tinyMCE,visual

Description

Clients and colleagues tend to get crazy if they have to edit HTML code on their own or if little things are not working as expected. Make your editing experience as simple and good as possible!

This Plugin does two things for you:

A. Installs two files – editor-style.css and editor-style-shared.css – into your chosen location (so you can still do updates of the Plugin), which can be edited in the backend of your site.

  • editor-style.css is used for styling your TinyMCE Editor
  • editor-style-shared.css is used for styles to be used in your theme AND in your TinyMCE editor (so you do not have to copy)

Note: To use this feature, you have to write your own CSS code into these files, which is the only professional way to do it.

B. The main feature of this Plugin is to offer a GUI to create custom style formats for TinyMCE dynamically.

  • Easy to add, change and delete
  • No editing of source code required
  • Note that each style can have both CSS Classes and/or CSS Inline-Styles. The latter (excepting color) will even be applied to the Formats dropdown menu items. However, I do not recommend inline styles as they are inserted into the text of the post/page and remain unchanged if you later alter the style in the plugin settings – so in general stick to Classes!

How the two stylesheets are applied

The shared style sheet file is enqueued to be included on frontend pages (via the usual <link> tag in the <head> area) using the standard WordPress function wp_enqueue_style.

So, as with most other stylesheets, the statements in it will automatically apply to the whole HTML page. So define class names which will not collide with any already in use by the theme – and never define styles for html elements without a limiting class name which would apply to all elements of that tag type.

Bad: li { font-size: 2em; }
Good: li.myownlarge { font-size: 2em; }

Both stylesheets are passed to tinyMCE by calling: add_filter(‘mce_css’, …)

What this causes to happen is that they are linked in to the HTML document which is the source for an <iframe>, which is the editing area of tinyMCE. So they should definitely only apply to HTML in the iframe – although I have heard that some situations, e.g. a cache plugin, may break this mechanism.

WordPress MultiSite

Although it does not check for MultiSite, the plugin works in the MultiSite environment, since WordPress uses a separate Options table for each MultiSite. You can reuse the same CSS files (by supplying the same custom directory in each Site), or add separate ones for each Site.

Current Languages

  • en_US
  • de_DE (David Stöckl and Tim Reeves)

Compatibility with other tinyMCE plugins

This plugin is compatible with a number of others which also enhance TinyMCE in different ways, in particular:

  • Preserved HTML Editor Markup Plus
  • Visual Editor Custom Buttons
  • tinyWYM Editor
  • Advanced TinyMCE Config
  • WP Editor (enhances the “Text” tab)
  • WP Edit (by Josh Lobe)

Here is a detailed description of how to put all these plugins together (in german).

Credits

This plugin is a fork of TinyMCE Advanced Professsional Formats and Styles which has been abandoned by the original author. Initially I just fixed a JavaScript bug so that it worked again, and cleaned up the code and messages a bit. In versions 1.0.2 and 1.0.3 I did a lot more work on the settings page, see the changelog. 1.0.4 preserves standard styles and those of other plugins, and adds an option to add a submenu for its styles. If anyone wants to help me keep this great plugin alive and further improve it, please do! Especially translations are very welcome.

Installation

  1. Upload the Plugin to your wp-content/plugins/ folder
  2. Activate the Plugin
  3. Go to Settings -> TinyMCE Custom Styles
  4. Follow the instructions on the screen – write your CSS and create your custom formats

Important: Some Settings of TinyMCE or certain TinyMCE Plugins require you to do some manual settings for the Plugin to work. The Plugin WILL work, if you configure it correctly – check the FAQ for help.

Plugin author

Tim Reeves (original author David Stöckl)

Plugin official website address

https://wordpress.org/plugins/tinymce-custom-styles/
If you encounter problems in using the TinyMCE Custom Styles plugin, you can comment below, and I will try my best to help you solve the problem

Leave a Comment

Your email address will not be published.