TinyMCE Editor

TinyMCE is a classic content editor of WordPress (replaced by Gutenberg in WordPress 5.0). It allows you to write, edit and format text on your website. It is an easy way to manage all your texts with already familiar tools.

Whenever you add the content elements of Visual Composer that includes text paragraphs, you will have an option to work with the TinyMCE editor.

TinyMCE Controls

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

  • Paragraph – you can choose the style of the text by selecting the given options (ex. paragraph text, headings, etc.);
  • Exclusive: Font family – select default fonts or choose from all available Google Fonts;
  • Exclusive: Font weight – control the font weight of your text;
  • Exclusive: Font size – choose from various font sizes;
  • Exclusive: Line height – select line height for your paragraphs and headings;
  • Exclusive: Letter spacing – set custom letter spacing for your paragraphs and headings;
  • 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 (in Visual Composer, all advanced options are available by default):

  • 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.

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.

TinyMCE Skins

Visual Composer offers you an option to quickly switch between light and dark skins for the TinyMCE editor. By default, TinyMCE has a light content background which is good for editing dark text.

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

If you have white text, you can use skin toggle (located bottom right corner of TinyMCE) to quickly switch content area to the dark background for better contrast.

Dark skin option for TinyMCE editor via Visual Composer Website Builder for WordPress