Knowledge Base

Tiny MCE Settings

Last Modified:
01 Oct 2019
User Level:
Administrator

Description

The default HTML editor used in TERMINALFOUR is TinyMCE Version 4.1.1. To configure the HTML editor go to System Administration > Hierarchy & Content Settings > HTML Editor.   

To learn to edit content with TinyMCE have a look at the TinyMCE page.

 

Annotated screengrab showing Tiny MCE Menu Options

An Administrator can use the HTML Editor feature to create more than one instance of the editor. Each instance can be customized to your user's needs whether they are content editors or end users by configuring the visibility of menu and toolbar icons.

If you wish to see how to remove toolbar menu items and icons, then skip to this section.

HTML Editor

HTML Editor Settings Tab

In the HTML Editor Settings tab, you can select the default HTML editor to be used.

Below you'll see a list of all available HTML Editors on the left. The User Level required to use the Editor is selected from the corresponding drop-down menu on the right. 

Screenshot of the HTML Editor screen

ItemDescription
Default HTML editor Assigns this as the default editor for new users. It can be changed on an individual user's profile
User access rights Set the minimum user level for each editor. If you, for instance, allow Moderators to have access to the Standard Textarea Editor, any user from this level and up will be able to select this editor in the User Profile. Additional editors can be configured on the Editors tab.
Default title in editor

Specifies the title text used when creating a link within the editor. This is used when creating or editing content but is not visible on preview or publish. The options are:

  1. Full section path
  2. Section or content name
  3. None

Editors Tab

All HTML Editors are listed in the Editors tab. To customize one of your HTML Editors, select its name. To create a new editor, select Create new editor.

Screengrab of the Editor Tab of the HTML Editor Settings

Configure the HTML editor settings

General settings

Screengrab of the HTML Editor General Settings from 8.2.15

ItemDescription
Name Sets the name used to identify the editor in the application
Enable cleanup Uses TinyMCE's cleanup functionality to strip certain tags from the produced HTML and automatically add closing tags where necessary.
Historically, this enabled the cleanup of code in the TinyMCE editor when content is pasted from MS Word or other sources. This feature is now enabled by default and can't be disabled. In future releases, this option will be removed from the configuration page.
Invalid elements Comma-separated list of element names to be removed from your content. This allows specific code to be removed automatically from content.
E.g., strong, em would remove all strong and em tags from content.
Extended valid elements

Sets the permitted extended elements and attributes. Please note that any rules defined here will overwrite the default TinyMCE rules. This could cause unexpected behavior.

E.g., images won't be displayed in TinyMCE if the src attribute is not defined on the img tag. TERMINALFOUR recommends consulting the TinyMCE documentation before adjusting these settings.

The following is an example of the extended valid elements TERMINALFOUR recommends with your editor:


iframe[src|width|height|name|align],
ol[class|compact<compact|dir<ltr?rtl|id|lang|onclick
|ondblclick|onkeydown|onkeypress
|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover
|onmouseup|start|style|title|type],
form[accept|accept-charset|action|class|dir<ltr?rtl|enctype
|id|lang|method<get?post?GET?POST|name|onclick|ondblclick
|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove
|onmouseout|onmouseover|onmouseup|onreset|onsubmit|style|title|target]

Convert fonts to spans Enables automatic conversion of font tags to span tags

Menu & toolbars

TinyMCE Menus & toolbars configuration

ItemDescription
Menu options to hide Sets which options to hide in the editor's main menu
Menu items to hide Sets which subitems to hide in the editor's menu options
Standard toolbar icons to hide Sets which buttons should be hidden in the toolbar
Additional toolbar icons to hide Permits "extra" toolbar icons to be hidden that could be put in place by custom plugins. Enter values in plain text, separated by commas or spaces.
Custom block formats

Sets the block formats that can be selected from a drop-down menu in the toolbar.  You can list the formats that are available via the Formats menu as well as styles from your custom stylesheet if you are using one. 
Each block format should be specified as 'title=element;'. e.g. Header 1=h1; Header 2=h2;

See Block Formats below.

Default formats to hide

If you don't want to list one or more formats in the Formats menu, you can hide them by adding them here. Styles from your custom stylesheet, if you are using one, are not available here. 

See Hide Default Block Formats below.

Enable custom styles

Enables custom styles in the Format > Formats menu. Define these custom styles by selecting a CSS file below.

See Custom CSS below.

Custom styles media

Defines the custom styles required in a CSS file in the Media Library

See Custom CSS below.


This short video shows how changing the settings are reflected in the HTML Editor. In this example, I want to disable underlining in the HTML Editor (so only links will use underlining). I also want to remove the 'Tools' menu item because I don't want my users to edit the source code:



In this case, I have :

  • removed the Tools menu option with Menu options to hide 
  • removed Underlining from the Format menu option with Menu items to hide
  • removed the Underline icon (to the right of the Italics icon) from the Toolbar with Standard toolbar icons to hide

Block Formats

The block formats under the format menu are controlled by the Default formats to hide options. 

Annotated screengrab of the Tiny MCE Custom Block Formats

Hide Default Block Formats

The block formats under the format menu are controlled by the Default formats to hide options. 

Annotated screengrab of the Hide Block Formats option in TinyMCE

Using Custom CSS

You can list the selectors (e.g., classes and IDs) from your own CSS rules in the Formats menu. These are listed under Format > Formats. Just upload a CSS file to the Media Library, check the 'Enable custom styles' option and select the stylesheet.

Menu and icons

The controls are made up of a menu and icons on the toolbar. The toolbar setup here shows the basic icons and menus.

Menus and corresponding icons

Not all functions have toolbar icons. Most functions are listed in the drop-down menus.

Menu / ItemIconDescriptionCan it be removed?
Edit
Undo   Yes, via the Menu items to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Redo   Yes, via the Menu items to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Cut     Yes, via the Menu items to hide option.
Copy     Yes, via the Menu items to hide option.
Paste     Yes, via the Menu items to hide option.
Paste as text     Yes, via the Menu items to hide option.
Select all     Yes, via the Menu items to hide option.
Find and replace     Yes, via the searchreplace plugin.
Insert
Insert image     Yes, via the image plugin.
Insert link   Yes, via the t4links plugin. The icon can be hidden via the Standard toolbar icons to hide option.
Insert link > Insert section link      
Insert link > Insert content link      
Insert link > Insert/edit external link      
Insert link > Insert anchor      
Insert date/time     Yes, via the insertdatetime plugin.
Horizontal line     Yes, via the Menu items to hide option.
View
Show blocks     Yes, via the visualblocks plugin.
Show invisible characters     Yes, via the visualchars plugin.
Visual aids     Yes, via the Menu items to hide option.
Fullscreen     Yes, via the fullscreen plugin.
Format
Bold   Yes, via the Menu items to hide option and the icon can via the Standard toolbar icons to hide option.
Italic   Yes, via the Menu items to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Underline   Yes, via the Menu items to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Strikethrough     Yes, via the Menu items to hide option.
Superscript     Yes, via the Menu items to hide option.
Subscript     Yes, via the Menu items to hide option.
Formats > Headings > Heading 1     Yes, via the Default formats to hide option.
Formats > Headings > Heading 2     Yes, via the Default formats to hide option. 
Formats > Headings > Heading 3     Yes, via the Default formats to hide option. 
Formats > Headings > Heading 4     Yes, via the Default formats to hide option. 
Formats > Headings > Heading 5     Yes, via the Default formats to hide option. 
Formats > Headings > Heading 6     Yes, via the Default formats to hide option. 
Formats > Inline > Bold   Yes, via the Default formats to hide option and the icon can via the Standard toolbar icons to hide option.
Formats > Inline > Italic   Yes, via the Default formats to hide option and the icon can via the Standard toolbar icons to hide option.
Formats > Inline > Underline   Yes, via the Default formats to hide option and the icon can via the Standard toolbar icons to hide option.
Formats > Inline > Strikethrough     Yes, via the Default formats to hide option. 
Formats > Inline > Superscript     Yes, via the Default formats to hide option. 
Formats > Inline > Subscript     Yes, via the Default formats to hide option
Formats > Inline > Code     Yes, via the Default formats to hide option. 
Formats > Blocks > Paragraph     Yes, via the Default formats to hide option. 
Formats > Blocks > Blockquote     Yes, via the Default formats to hide option. 
Formats > Blocks > Div     Yes, via the Default formats to hide option. 
Formats > Blocks > Pre     Yes, via the Default formats to hide option. 
Formats > Alignment > Left   Yes, via the Default formats to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Formats > Alignment > Center   Yes, via the Default formats to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Formats > Alignment > Right   Yes, via the Default formats to hide optionand the icon can be hidden via the Standard toolbar icons to hide option.
Formats > Alignment > Justify   Yes, via the Default formats to hide option and the icon can be hidden via the Standard toolbar icons to hide option.
Clear formatting     Yes, via the Menu items to hide option.
Table
Insert table with column headings   

Adds a table with column headings prepopulated with text to make editing easier. 

The markup that is output uses the following format to align with accessibility requirements:

<thead>
 <tr>
  <th scope="col">Column 1<th>
 </tr>
</thead>
Yes, via the table plugin.
Insert table with column and row headings   

Adds a table with column and row headings prepopulated with text to make editing easier. 

Column headings markup use the following format to align with accessibility requirements:

<thead>
 <tr>
  <th scope="col">Column 1<th>
 </tr>
</thead>
<tbody> 
<tr>
  <th scope="row">Row 1<th>
 </tr>
</tbody>
 
Table properties   You can add inline styles and classes to the table.  
Table caption/summary   Add captions and a summary to your table to improve the accessibility of your table.  
Delete table      
Cell > Cell properties      
Cell > Merge cells      
Cell > Split cell      
Row > Insert row before      
Row > Insert row after      
Row > Delete row      
Row > Row properties      
Row > Cut row      
Row > Copy row      
Row > Paste row before      
Row > Paste row after      
Column > Insert column before      
Column > Insert column after      
Column > Delete column      
Tools
Spellcheck   Yes, via the spellchecker plugin. The icon can be hidden via the Standard toolbar icons to hide option.
Source code     Yes, via the code plugin.

Icons that don't have a menu option

The icons can be removed via the Standard toolbar icons to hide option.

ItemIcon
bullist
numlist
outdent
indent
unlink
t4media
cleanup

Plugins

The HTML Editor comes pre-installed with custom plugins to add features to Tiny MCE's core functionality. These plugins can be enabled/disabled as required.

If you want to add your own custom plugins then have a read of this guide.

The Add custom plugin button allows additional TinyMCE plugins to be added. Each plugin should be an individual folder within the uploaded .zip file. Multiple plugins can be added to a single .zip file.

Below is a description of the standard plugins provided.

PluginSummaryDescription
advlist Create styled number and bulleted lists. Extends the core bullist and numlist toolbar controls by adding CSS list-style-type styled number formats and bullet types to the controls.
anchor Insert anchors (sometimes referred to as a bookmark). Adds an anchor/bookmark button to the toolbar that inserts an anchor at the editor's cursor insertion point. It also adds the menu item anchor under the Insert menu.
autolink Automatically create hyperlinks. Automatically creates hyperlinks when a user inputs a valid, complete URL. For example, www.example.com is converted to http://www.example.com.
code Edit your content's HTML source. Adds a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view. It also adds the menu item Source code under the Tools menu.
contextmenu Right-click to perform actions in TinyMCE Adds a configurable context menu that appears when a user right-clicks in the editable area.
directionality Toolbar buttons for setting the left-to-right or right-to-left direction of content. Adds directionality controls to the toolbar, enabling TinyMCE to better handle languages written from right to left. It also adds a toolbar button for each of its values, ltr for left-to-right text and rtl for right-to-left text.
fullscreen Zoom TinyMCE up to the whole screen. Adds full screen editing capabilities to TinyMCE. When the toolbar button is pressed the editable area will fill the browser's viewport. The plugin adds a toolbar button and a menu item Fullscreen under the View menu.
hr Insert a horizontal line. Allows a user to insert a horizontal rule on the page at the cursor insertion point. It also adds a toolbar button and a menu item Horizontal line under the Insert menu.
image Insert an image into TinyMCE. Enables the user to insert an image into TinyMCE's editable area.
Note that this is not drag-drop functionality and the user is required to enter the path to the image. Optionally the user can also enter the image description, dimensions, and whether image proportions should be constrained (selected via a checkbox). Some of these settings can be preset using the plugin's configuration options.
The plugin also adds a toolbar button and an Insert/edit image menu item under the Insert menu.
insertdatetime Insert the current date and/or time into TinyMCE. Provides a toolbar control and menu item Insert date/time (under the Insert menu) that lets a user easily insert the current date and/or time into the editable area at the cursor insertion point.
lists Normalizes list behavior between browsers. This list plugin Normalizes list behavior between browsers. Enable it if you have problems with consistency making lists.
noneditable Prevent users from changing content within elements. Ideal for templates. Enables you to prevent users from being able to edit content within elements assigned the mceNonEditable class.
paste Standard version of features for copying-and-pasting content from Microsoft Word. Also adds a menu item Paste as text under the Edit menu dropdown and a toolbar button.
print Print the content in TinyMCE. Adds a print button to the toolbar. It also adds a Print item to the File menu dropdown.
searchreplace Find and replace content in TinyMCE. Adds search/replace dialogs to TinyMCE. It also adds a toolbar button and the menu item Find and replace under the Edit menu dropdown.
spellchecker Enables TinyMCE's spellcheck functionality. Enables TinyMCE's spellcheck functionality. It also adds a toolbar button and the menu item Spellcheck under the Tools menu dropdown.
tabfocus Tab into and out of the TinyMCE control in your web form. Adds the possibility to tab in/out of TinyMCE.
table Table editing features. Adds table management functionality to TinyMCE. It also adds a new menubar item Table with various options in its drop-down including Insert table and options to modify cells, rows, and columns, and a toolbar button with the same functionality.
textpattern Matches special patterns in the text and applies formats or executed commands on these patterns. Matches special patterns in the text and applies formats or executed commands on these patterns. start and end text with * applies the format 'italic'
start and end text with ** applies the format 'bold'
# applies the format'h1'
## applies the format'h2'
### applies the format'h3'
#### applies the format'h4'
##### applies the format'h5'
###### applies the format'h6'
1. ', cmd: 'InsertOrderedList'
* ', cmd: 'InsertUnorderedList'
- ', cmd: 'InsertUnorderedList'
The default pattern is similar to Markdown syntax, so you can type # text to produce a header or **text** to make text bold. More instructions required - see https://www.tinymce.com/docs/plugins/textpattern/
visualblocks Allows a user to see block level elements such as paragraphs. Allows a user to see block level elements in the editable area. It is similar to WYSIWYG hidden character functionality but at a block level. It also adds a toolbar button and a menu item Show blocks under the View menu dropdown.
visualchars See invisible characters like non-breaking spaces. Adds the ability for users to see invisible characters like displayed in the editable area. It also adds a toolbar control and a menu item Show invisible characters under the View menu.
wordcount Show a word count in the TinyMCE status bar. Adds word count functionality to TinyMCE, placing a counter on the right edge of the status bar.
t4cleanup T4 special Removes attributes and html tags from the content
t4customstyles T4 special Allows you to have additional styles under formats
t4externallink T4 special This is identical to the standard 'link' plugin except for the addition of the 'insertLink:presubmit' event being fired
t4links T4 special Handles the insert section link, content link, anchors
t4media T4 special Handles insertion of media & media attributes modal
t4tableshim T4 special Handling attributes on resizing tables. comment in code: TinyMCE doesn't fire events onSubmit / onClose of its modals, so hijack onClose for the table plugin to fire our own event // The resizing of tables assigns the deprecated 'width' attribute so remove this and manually update the inline CSS that should be used.
t4tablestrip T4 special Removal of default in table cells

Other options

The wordcount is displayed in the bottom right of the status bar and can be removed via the wordcount plugin.

The menu displayed when the mouse is right-clicked can be removed via the contextmenu plugin.