Text Editor

This documentation covers the Text Editor.

The text editor is one of the major parts of the content editor page and is where the majority of your time in EasyContent will be spent into. We have separate documentation for the content editor which you might want to check out.

If you've used any web-based text editor like the classic WordPress editor or Joomla's TinyMCE text editor, then you already know how to use ours since we've also used TinyMCE as its core.

TinyMCE is highly customizable so we adjusted it to meet the needs of our application and clients. Therefore, some features here may work slightly different than what you're used to and you might find completely new features as well. It's a good idea to skim this documentation to check for any new features or differences between other implementations of TinyMCE.

If you're completely new to all of this, don't worry! We'll be covering everything in detail so you can get yourself familiarized with our text editor so you can focus on creating impactful content.

Let's get started!

The 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 manage your content.

Currently, the menu bar holds the following menu items: File, Edit, View, Insert, Format, Tools, and Table. We'll take a look at each of them in more detail in the following sections.

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 - previews how the content looks like on 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 latest changes you've made.
  • Redo - redo the latest 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 of your desktop using the "print screen" function of your computer, you can paste it directly to the text area using the shortcut key combination Ctrl+V. Your screenshot gets uploaded instantly without having to explicitly use the upload tool. However, keep in mind that its filename will be in the format similar to this: screenshot_date-random_number_identifier.png, 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 from the source) to the text editor.
  • Select all - selects the entire content of 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 how the text editor displays its content.

  • Source code - displays the source code editor. You can edit it directly to add custom HTML elements to the content.
  • Visual aids -  visual aid for borderless tables. If the border of a table is set to "0", then TinyMCE adds a dotted line around the table by default.
  • Show blocks - this option displays the boundaries between element blocks like paragraphs, images, headings, and other elements.
  • Fullscreen - this option puts the text editor in fullscreen mode (a.k.a distraction-free mode).
  • Preview - previews how the content looks like on a basic webpage.

Insert

The insert menu has the tools that allow you to add certain elements to the text editor. You can use this to add links, videos, images, special characters, etc.

  • Image - allows you to insert or upload an image to wherever the cursor is on the text area.
  • Link - allows you to add hyperlinks on the text area (or insert it as a clickable link if an element is highlighted).
  • Media - allows you to add a video from an external URL or a video embed code to your content.
  • Table - allows you to insert a table to wherever the cursor is on the text area.
  • Special character - this tool brings up a table containing various special characters that you can select to insert into the text area.
  • Horizontal line - adds a horizontal line to wherever the text cursor is currently at.
  • Table of Contents - creates a table of contents element based on your content's headings. A live example would be this documentation's table of contents near the beginning.

Format

The format menu contains tools that allow you to manipulate an element's formatting.

When you activate an option without a selected text (for example the bold formatting), the subsequent text you type will follow the option you've just selected, in other words, all text you type from now on will be in bold.

Tools

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

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

Table

The table menu contains tools for building and formatting tables.

  • Table - used to define a table with Column * Row dimensions that'll be inserted into wherever the text cursor currently is.
  • Cell - contains options for manipulating a single specific cell.
  • Row - contains options for inserting, deleting, and manipulating rows.
  • Column - contains options for inserting, deleting, and manipulating columns.
  • Table properties - only available when your text cursor is on a table. Contains options for editing the currently selected table's properties such as the width, background color, 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 so you don't have to dig deep into the menu bar to find them.

It contains the following:

  • Undo and redo
  • Text formatting dropdown selection
  • Text alignment
    • Left, Center, Right alignments
  • Inline text formatting options
    • Bold
    • Italic
    • Underline
    • Text color
    • Background color
    • Clear formatting
  • Bullet list
  • Numbered list
  • Decrease indent
  • Increase indent

Standard Toolbar

The standard toolbar contains shortcut icons to formatting items that don't fit in other categories.

From left to right, we have:

  1. Insert/edit link
  2. Remove link
  3. Insert image
  4. Insert video
  5. Table (used for quickly inserting a table or editing an existing one)
  6. Source code (for viewing and editing your text's HTML code)
  7. Fullscreen
  8. Insert comment

Text area

The text area is where you type and edit your article's content. Despite what we call it, it's not restricted to text elements only. You can add multimedia elements such as video files, images, video embeds, and others using the tools from the different menus covered above.

Right-clicking anywhere within the text area brings out a context menu that allows you to quickly insert links.

Inserting a Link

  1. Select the text you want to add a link to or put your text cursor on the area where you want your link to appear.
  2. Right-click, then select the insert/edit link option.
  3. The Insert/Edit Link window will appear.

  • Put your link's URL in the URL field.
  • Optionally, if you're adding a new link from scratch (there's no selected text), add the anchor text you want to use for your link in the Text to display field.
  • You can define an optional title in the Title field. This will appear as a tooltip when a user hovers their mouse on the link.
  • You can also choose to have the 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 in the content by clicking on the URL field. This is useful if you want users to download a file after clicking a certain link.

Note: If you have the Grammarly browser extension installed and the option "Show definitions and synonyms via double click (all sites)" is enabled, it can conflict with the text editor's context menu. We recommend that you disable this option while working on the text editor at the moment. We're looking for ways to improve this and we'll notify you once we figured out how to fix this.

Adding Comments

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

Element Status Bar

The element status bar displays what HTML element the currently selected or highlighted item, or whatever item is next to the cursor in the text area is.

Word Count

Displays the document's total word count.

Now, why don't you check out the documentation for the content editor page next?