TinyMCE Interface

There are a lot of buttons available to manage your content. Most of them are already know from Google Docs of MS Word. The default TinyMCE visual editing buttons are:

  • Paragraph – you can choose the style of the text by selecting the given options (ex. paragraph text, headings, etc.);
  • Bold – apply bold formatting to enhance the selected text or number, or remove bold formatting;
  • Italic – make selected text italic or remove italic formatting;
  • Bulleted List – add or remove bullets to selected paragraphs;
  • Numbered List – add or remove numbers to selected paragraphs;
  • Blockquotes – add blockquotes (style is defined by the WordPress theme you are using) to a selected text;
  • Align left – align the selected text to the left;
  • Align center – align the selected text in the center;
  • Align right – align the selected text to the right;
  • Insert/edit link – add or edit a link to your text;
  • Insert Read More tag – add a Read More tag to your content to notify WordPress about excerpt break;
  • Fullscreen – expand the text editing window to a fullscreen;
  • Toolbar Toggle – by selecting this button, the second line of icons will appear, revealing the advanced visual editing buttons.

The advanced visual editing buttons are:

  • Strikethrough – you can strikethrough any word by selecting it or clicking anywhere in the word you want to strikethrough;
  • Horizontal line – add a straight horizontal line under the text as a divider;
  • Text color – change the color of the text. You can choose predetermined colors, or make custom colors for more visually interesting content;
  • Paste as text – when this button is enabled, all content that you paste will be plain text;
  • Clear formatting – remove any formatting you have done on a selected text;
  • Special character – access the special character library, to add a character to your text;
  • Decrease Indent – decrease space of the left side of the selected content;
  • Increase Indent – introduce space from the left side of the selected content;
  • Undo – Reverse the previous action you made;
  • Redo – redo the previous action;
  • Keyboard Shortcuts – a list of shortcuts you can use to access the toolbar functions quicker.

Note: Different WordPress plugins and extensions can enhance TinyMCE editor with additional options, like Skin feature in Visual Composer.

Default light skin for TinyMCE editor in Visual Composer Website Builder for WordPress

Add Media in TinyMCE

You can add images to your text by selecting the Add Media button in the upper right corner. It opens the WordPress Media Library where you can upload your files to the library or select files already uploaded before. In addition, you can easily add an image or file title, caption, alt, and description.

Visual and Text tabs in TinyMCE

By default, TinyMCE offers to edit texts through Visual and Text tabs (available in the upper right corner). The Visual tab allows editing text and instantly see all the formatting applied.

The Text tab lets you edit the text in HTML mode which can be useful for advanced users or someone that wants to add customization. For example, you want to add CSS property or custom CSS class to some part of your content within the text block.

Why can’t I see all the advanced buttons of TinyMCE?

If you are experiencing a situation, where you can see only a part of the available buttons, it’s possible that the Toolbar Toggle (read above) is disabled, as it is by default. Before selecting the Toolbar Toggle, only the default TinyMCE visual editing buttons are visible. When you select it, all the advanced visual editing buttons will appear, enabling the option to change the color of the letters, clear formatting and many more.