Using the Text Editor

This documentation covers the Rich Text Editor. You will learn how to use it to format your content, track changes, and more. It is based on TinyMCE, so if you've used tools and websites that use the same editor before, you should already know how it works. However, we've customized it and added a few new features exclusive to EasyContent, so let's dive in!

Our rich text editor is divided into six parts.

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. It holds the following 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 / Command + Z on your keyboard to restore your content 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 and puts them to your clipboard.
• Copy - copies the highlighted 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 from your computer, you can paste it directly into the text area. Your screenshot gets instantly uploaded without having to use the upload tool. However, your image will simply be named as "image.png", so you may not want to do that if you want your files to have a descriptive name.
• Paste as text - this is a toggle. If turned on, any rich text (formatted text from external sources) you copy will be pasted as plain text (removes all formatting) into 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 what 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 where the cursor is currently pointing.
• Link - allows you to transform 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 your cursor currently is in the text area.
• Special character - brings up a panel containing various special characters that you can select and insert into your text.
• Horizontal line - adds a horizontal line to where your cursor currently is in the text area.
• Table of Contents - generates a table of contents element based on your article's headings.

Format

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

Tools

The tools menu contains the source code viewer.

Table

Tools for building and formatting tables.

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

Formatting Toolbar

The formatting toolbar contains shortcut icons for the most commonly used formatting tools.

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 a bullet list
• Insert a 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. Toggle for tracking changes
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

Here are some tips and tricks you can use with our text editor.

Tracking Text Changes

Text Change Tracking is a valuable feature that allows your team to keep track of any changes made to a content item. This is especially useful for collaborating 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" modal will appear.

In the "Insert/Edit Link" modal:

• 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 for the link 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 it and clicking the Insert comment icon. 

Element Status Bar

This shows what HTML element is being used for the section where your cursor is currently pointing. You can click on it to select the entire 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.