Using the Text Editor

This documentation covers the Text Editor. You will learn how to use it to format your content, track changes, etc.

For the purpose of this article, we've divided the text editor into six parts to make it easier to tackle things.

1. Menu bar
2. Formatting toolbar
3. Standard toolbar
4. Text area
5. Element status bar
6. Word count

Menu Bar

The menu bar contains the tools you can use to help you format your content.

As of this writing, the menu bar holds the following menu items: File, Edit, View, Insert, Format, Tools, and Table. Let's take a better look at each of them.

File

The file menu contains New document, Preview, and Print.

• New document - clears the content of the entire text area.
  • You can use undo or Ctrl + Z on your keyboard if you accidentally clicked this while working on something.
• Preview - shows you how the content would look like as a basic webpage.
• Print - prints the content of the text area.

Edit

The edit menu contains the tools for copying, pasting, and selecting elements in the text area.

• Undo - undo the last change you've made.
• Redo - redo the last undo you've made.
• Cut - cuts the highlighted element(s) in the text area.
• Copy - copies the highlight element(s) in the text area to your clipboard.
• Paste - pastes the content of your clipboard to the text area. If you captured a screenshot using the "print screen" feature of your computer, you can paste it directly to the text area using the shortcut key Ctrl or Command + V. Your screenshot gets instantly uploaded without having to use the upload tool. However, your image will have a random filename, which can be an issue if you want to use descriptive filenames.
• Paste as text - this is a toggle. If turned on, any rich text (i.e. text copied from a rich text editor like Microsoft Word or text from an external website) you copy will be pasted as plain text (removes all formatting) to the text editor.
• Select all - selects everything in the text editor.
• Find and replace - find all instances of a string of text and optionally replace it with something else.

View

The view menu contains options for changing the way the text editor displays its content.

• Source code - displays the source code editor.
• Visual aids - a visual aid for borderless tables. If a table's border is set to "0", then TinyMCE will add a dotted line around the table to represent its borders.
• Show blocks - displays the boundaries between element blocks like paragraphs, images, headings, lists, etc.
• Preview - previews how the content looks like as a basic webpage.
• Fullscreen - puts the text editor in fullscreen mode (a.k.a distraction-free mode).

Insert

The insert menu has tools that let you add certain elements to the text such as links, videos, images, special characters, etc.

• Image - allows you to insert or upload an image to where the cursor is currently pointing.
• Link - allows you to add hyperlinks or transform a highlighted text into a link.
• Media - allows you to add a video from an external URL or a video embed code.
• Table - allows you to insert a table where the cursor currently is on the text area.
• Special character - brings up a panel containing various special characters that you can insert into the text area.
• Horizontal line - adds a horizontal line to wherever the cursor currently is on the text area.
• Table of Contents - generates a table of contents element based on your article's headings. A live example would be this documentation's table of contents above.

Format

The format menu contains tools for formatting text and other elements.

Tools

The tools menu contains the source code editor and word counters.

• Source code - view and edit the content's source code.
• Word count - shows the word and character count of the entire document or a selection.

Table

Tools for building and formatting tables.

• Table - used to define a table with Column * Row dimensions that'll be inserted into where your text cursor currently is.
• Cell - contains options for manipulating a single cell.
• Row - contains options for inserting, deleting, and manipulating rows.
• Column - contains options for inserting, deleting, and manipulating columns.
• Table properties - contains options for editing the current table's properties such its the width, background color, border style, and other parameters.
• Delete table - completely deletes the currently selected table or whatever table your text cursor is currently at.

Formatting Toolbar

The formatting toolbar contains shortcut icons for the most commonly used formatting tools. This way, you don't have to dig deep into the menu bar to find them.

It gives quick access to the following (from left to right):

• Undo and redo
• Text formatting
• Text alignment
  • Left, Center, Right alignments
• Inline text formatting options
  • Bold
  • Italic
  • Underline
  • Text color
  • Background color
  • Clear all formatting
• Insert bullet list
• Insert numbered list
• Decrease indent
• Increase indent

Standard Toolbar

The standard toolbar contains shortcut icons to additional frequently used tools as well as icons for tracking text edits. Learn about text change tracking here.

From left to right, we have:

1. Insert/edit link
2. Remove link
3. Insert image
4. Insert media
5. Insert/edit table
6. View source code
7. Fullscreen
8. Insert comment
9. Track changes toggle
10. Show/hide changes
11. Accept (a single change) and a dropdown to accept all changes
12. Reject (a single change) and a dropdown to reject all changes

The Text Area

Let's give you some tips and tricks you can use with our text editor.

Tracking Text Changes

Text Change Tracking is a valuable feature that allows users to keep track of any changes made to a content item. This is especially useful for collaborating on content with others, as it allows everyone to see the changes made and keep track of any revisions in real-time.

To use this feature, simply enable it by clicking "Track Changes" in the text editor's standard toolbar.

Once text change tracking is active, any text changes will be highlighted in different colors to indicate what has been added or deleted, including who made the change and when it was made. Users can then choose to accept or reject these changes.

Adding Links

1. Select the text you want to add a link to.
2. A menu will appear.
3. Click the link icon and the "Insert/Edit Link" window below will appear.

In the "Insert/Edit Link"  window:

• Put your link in the URL field.
• The Text to display field shows the text you highlighted. This will be turned into a hyperlink. You can edit it if you want.
• You can define an optional title in the Title field. This will appear as a tooltip on mouseover.
• You can also choose to have your link open in a new window by setting the option in the Open link in... field.
• You can link to any of the attached files by clicking icon next to the URL field.

Adding Comments

You can add comments to any element in the text editor by highlighting them and clicking the Insert comment icon. 

Element Status Bar

This shows the HTML of the element where the blinking cursor is located. You can click on it to select the element in the editor.

Word Count

Displays the article's total word count. Clicking it switches to the character count view and vice versa.

That's everything you need to know about our text editor. You should now be able to use it to its fullest!

Now, why don't you check out the documentation for the content editor page next? This one will cover the sidebar widgets and editor tabs so you can take your skills to the next level.