Rich Text Editor

The Rich Text Editor allows you to change the look and appearance of a page and its content without having to manually input code. It operates similar to a word processing application on your computer.

Rich Text Editor Overview

The first row of the Rich Text Editor tools covers copy and paste functions, find/replace, and formatting of content.

back to topEdit HTML Source

The Edit HTML Source button allows you edit content as HTML instead of using the front-end of the editor.

Edit HTML Source

When you are finished editing the HTML, click update to go back to the front-end of the editor. Note: any invalid HTML will be discarded by the editor.

HTML Editor

back to topCopy/Paste

Copying and pasting content into the editor works like a word processing application on your computer would work. Content can be copied and pasted from within the editor to outside sources and vice-versa.

To cut content to be pasted later, select your content and click the Cut button.

Cut Button

The keyboard shortcut Control (Ctrl) + X can be used instead of the Cut button.

To copy, select content within the editor and click the Copy button.

Copy Button

The keyboard shortcut Control (Ctrl) + C can be used instead of clicking the Copy button.

To paste content in the editor, click the Paste button.

Paste Button

The keyboard shortcut Control (Ctrl) + V can be used instead of clicking the Paste button.

When pasting content into the editor from an outside source (a web page, Word document, etc.), it inherits styles from that source. To paste as plain text, click the Paste as Plain Text button to the right of the Paste button.

Paste as plain text

This will bring up the Paste as Plain Text window.

After putting content into the Paste as Plain Text window, click Insert. This will insert the content without the additional styles.

To paste content into the editor from Microsoft Word, click the Paste from Word button. A window will pop up.

Paste your content into the window and click Insert. Similar to pasting as plain text, this will remove inherited styles from the Word document.

Paste From Microsoft Word

back to topFind/Replace

Content within the editor can be found with the Find tool. Clicking the Find button will bring up the Find/Replace window.

Find Button

Enter the string of text that you would like to find within the content in the Find What field.

The Direction field under it will choose which end of the content the search will start from; if Up is selected, it will start at the bottom of the content and move upwards. If Down is selected, then it will start from the top of the document and move downwards. The Down option is selected by default.

If you check the Match Case checkbox, the editor will do a case-sensitive search, meaning that it will look for the exact letters in the search term in uppercase and lowercase. For example, if you were to search for "aptuitiv" and checked off Match Case, the editor would ignore the word "Branch" because it contains an uppercase "A", not a lowercase "a".

Find Window Filled In

When you have filled out the fields in the Find/Replace window, click Find Next to see your results.

The Find/Replace feature allows you to replace multiple strings of text that you search for within the Rich Text Editor. For example, if you had the word "wheels" in your content multiple times and wanted to replace it with the word "tires", you could use the Find/Replace feature and replace all of the words more easily than going through the content and finding each word individually, deleting it, and retyping the word "tires."

To use the Find/Replace tool, click on the Find/Replace button next to the Find button.

Find/Replace Button

This will bring up the Find/Replace window. This feature is very similar to the Find tool, with the added Replace with field.

To replace content using this Find/Replace tool, simply enter in the string you'd like to find and replace in the Find What field, and enter in what you would like to replace it with in the Replace with field under it. Select the direction you would like to search in and choose whether you would like to match case or not.

Clicking Find Next will show you every instance of the word you are searching for in the content. Clicking Replace will replace only the selected instance; clicking Replace All will replace every instance within the document.

Find/replace window filled

back to topRemove Formatting

The Remove Formatting button will remove any text styles you have applied to a selection within your content.

Remove Formatting Button

To use the Remove Formatting tool, select a string of text and click the Remove Formatting button. This will remove any font-styles applied to the string. Note: This will not remove any links or structure within the content (tables, lists, images, etc.)

back to topShow/Hide Guidelines/Invisible Elements

The Rich Text Editor, by default, shows guidelines for elements within the editor, such as tables, iframes, and more.

Show/Hide Guidelines Button

By default, guidelines are shown in the editor.

Table With Guidelines

Clicking the Show/Hide Guidelines/Invisible Elements button will hide these guidelines.

Table Without Guidelines

back to topClean Up Messy Code

The Rich Text Editor features a tool to clean up messy code. Messy code could be defined as code that isn't serving a purpose within the content; for example, tags that are overwritten by other tags, empty HTML tags, etc.

To clean up messy code within the content, select the content that you would like to clean up and click the Cleanup Messy Code button.

Clean Up Messy Code

back to topUndo/Redo

The editor has Undo and Redo functions, similar to features you would find in your computer's word-processing application. To use the Undo and Redo tools, click on the buttons in the editor.

Undo/Redo Buttons

The keyboard shortcuts for Undo and Redo are Control (Ctrl) + Z and Control (Ctrl) + Y, respectively.

back to topCitations, Abbreviations, and Acronyms

Citations

The Citation button allows you to wrap content in <cite> tags. Citation tags are used to cite sources for your content, among other purposes. To insert a citation, click the button to bring up the Citation Element window.

Citation Button

Here, you can give the citation element a title, ID, a predetermined class, CSS style, a text direction, and a language. Click Insert to insert the citation element into your content. Text that you type now will be inserted into the citation. If you would like to put existing content into an citation element, simply select the content and follow the same steps above.

Citation Element

Abbreviations

The Abbreviation button allows you to wrap content in <abbr> tags. Abbreviation tags are used to denote an abbreviation for something in your content. For example, <abbr title="Hypertext Markup Language">HTML</abbr> is the proper use of an abbreviation.

To insert an abbreviation, click the Abbreviation button. This will bring up the Abbreviation Element window.

Abbreviation Button

The Abbreviation Element window is very similar to the Citation Element window. You can give the Abbreviation element a title, ID, a pre-determined class, CSS style, a text direction, and a language. When you are finished, click Insert to insert the element into the editor. If you would like to put existing content into an abbreviation element, simply select the content and follow the same steps above.

Abbreviation Element

Acronyms

The Acronym button allows you to wrap content in <acronym> tags. Acronym tags are used to define an acronym for something in your content; for example, <acronym title="as soon as possible">ASAP</acronym> is the proper use of an acronym.

To insert an Acronym, click the Acronym button. This will bring up the Acronym Element window.

Acronym Button

Inserting an acronym element is very similar to inserting an abbreviation and a citation element. You can give the acronym element a title, ID, a pre-determined class, CSS style, a text direction, and a language. When you are finished, click Insert to insert the element into the editor. If you would like to put existing content into an acronym element, simply select the content and follow the same steps above.

Acronym Element

Deletion and Insertion Elements

Deletion and Insertion elements (<del>, <ins>) are used to show content that has been deleted and inserted from a document. For example, if a news post contained inaccurate information, the incorrect information could be put into a deletion element to show that it was removed from the content, and new content that is being inserted into the post could be put into an insertion element to show that the post was recently updated.

Note that content within a deletion element will, by default, still be visible to the reader. A standard deletion element puts a line through text within it.

Content within an insertion element, by default, is underlined to set it apart from other content.

To insert a deletion element into your content, select content within the editor and click the button at the top of the Rich Text Editor toolbar.

Deletion Button

Clicking the Deletion button will bring up the Deletion Element window. Here you can give the element a date/time of deletion, a citation, title, ID, a pre-determined class, CSS style, a text direction, and a language. To set the time attribute to the time that you are editing or inserting the element, click the Insert Current Date/Time button to the right of the Date/Time field.

When you are finished filling the fields in the Deletion Element window, click Insert to insert the deletion element into your content.

To insert an Insertion element into your content, click the Insertion button at the top of the Rich Text Editor toolbar, next to the Deletion button, and follow the same steps for the deletion element.

Insertion Button

back to topNon-breaking Space Character

A non-breaking space character (in HTML: &nbsp;) is used to fill space in an element without having to put actual content in it. For example, if you had an empty table cell in a shopping cart page, unused table cells would be filled with non-breaking space characters so the table structure looks correct to the user.

To insert a non-breaking space character into your content, click the Insert Non-Breaking Space Character button.

NBSP button

Text Color/Text Background Color

The color of your font can be changed using the Select Text Color button.

Text Color Button

Clicking the small arrow to the right of button will bring up a color pallette that you can choose from. Clicking a color will set the font as that color.

Text Color Palette

More colors can be chosen by clicking the More Colors option at the bottom of the color pallette. This will bring up the Select a Color window. In the Color Picker tab, you can select the color hue as well as a tint (darkness). When finished, click the Apply button. More predefined colors can be chosen from the Palette and Named tabs.

Color Picker

Note: When a color is picked, that color will be set to the default color by the color tool. For example, if you picked a red color from the palette, and wanted to make other text in the editor red as well, you wouldn't have to go back into the palette and pick that same red color; you can just select the text you'd like to change and click the Select Text Color button again.

To change the background color of text, click the Select Background Color button to the right of the Select Text Color button, and follow the same steps described for changing the text color.

Text Background Color

back to topBold, Italics, Underlining, Line-through

Font can be bolded, italicized, and underlined using these buttons. A line-through can also be applied to text.

Bold, Italics, Underline, Line-through

To apply these styles to text, simply click the button and start typing. To apply these styles to existing content in the editor, select the string you'd like to apply them to and click the buttons.

back to topText Alignment

Text can be aligned to the left, center, right using these buttons. The Align Full button can also be aligned to span text across the full width of the parent element (from the left margin to the right margin, like you'd see in a book).

Text Align Buttons

To change the alignment of text, click one of the alignment buttons. To change the alignment of existing content, select the string you'd like to change and click one of the alignment buttons.

back to topStyles

The Styles dropdown menu contains pre-defined classes that you can apply to your content. To apply one of these classes to your content, select an option from the dropdown menu.

Font Styles

Note: these classes are pre-determined and usually provided by the web developer.

back to topHTML Elements

Different elements can be chosen using the drop down menus. Different HTML elements have different sizes and are often times used to show the most important content on a page to both the reader and to search engines.

To insert or change an element, click the Format dropdown menu. By default, the value is set to Paragraph.

Font Elements

back to topFont Families

Font families are a set of multiple styles of fonts; for example, Times, Times New Roman, and Georgia are part of a serif font family. Using a font-family instead of a single font will ensure that the font being displayed has a fallback in the event that a reader's computer doesn't have the first font listed in the font family. To change the font family, click the Font Family dropdown menu and select an option from the menu.

Font Family

back to topFont Size

The font size can be changed using the Font Size dropdown menu.

Font Size

back to topLists

An ordered or unordered list can be created by clicking their respective buttons. Ordered lists are listed with numbers by default.

Lists Buttons

When you are finished entering items into a list, you can close the list by clicking the list button you used to open the list originally, or by clicking your Enter/Return key twice.

back to topIndentation

Indents can be added or removed from content using the Increase Indent and Decrease Indent buttons.

Indent Buttons

back to topBlock Quotes

Block quotes can be inserted by clicking the Block Quote button. A block quote can be used to set specific text apart from the rest of the content.

Block Quote

back to topInsert/Edit links

You can insert and edit links using the rich text editor, as well as anchors and images.

To add a link, select a string within your content that you wish to turn into a link and click the Insert/Edit Link button.

Insert Link

This will bring up the Insert/Edit Link window. Here, you can enter in a URL, a target, a title, and a class for the link tag. To link to a page within your own site, click the Browse button to the right of the Link URL field.

Browse Button

This will bring up the file browser. For a more detailed explanation of the file browser, visit the file browser documentation page.

You can browse both files and pages on your site using the file browser. If you want to link to a file, navigate to and hover over the file and click the Use This File button.

To link to a page or app on your site, click the Pages/Apps tab in the top left of the file browser window.

\

Navigate to the page or app you would like to link to by using the tabs on the left and selecting the page you would like to link to in the center of the file browser.

File Browser; pick a page

After clicking on a file or page to link to, you will be redirected back to the Insert/Edit Link window.

Insert Link window filled

The Events tab contains event handlers for users interacting with the link. For example, you can run a javascript function when the link is clicked by calling a function within the onclick field in the Events tab.

The Advanced tab allows you to set advanced properties for the link tag, such as ID, style, classes, language direction, and more.

After you're finished, click the Insert button to add the link to your text.

back to topInserting and Editing Images

To insert an image or edit an existing image in the editor, click the Insert/Edit Image button.

Insert/Edit Image

For more information on how to insert and edit images using the Rich Text Editor, go to the adding images and editing images documentation pages.

back to topTables

To create a table in the Rich Text Editor, click on the Insert/Edit Table button.

Insert Table button

The Insert/Edit Table window will pop up. Here, you can set the general properties of the table, such as how many columns and rows it will have, cell padding and spacing, border, dimensions, and more.

Table Element Window

Cell padding is the spacing between a table cell's edge and the content within it. Cell spacing is the space between table cells.

Alignment of the table can be set to left, right, or center using the Alignment dropdown. A border can be set with the Border field. The border field will set a border around the outside of the table and within the table cells as well.

The Width and Height fields set the width and height of the table itself.

The Class dropdown menu shows a list of pre-defined classes that can be applied to the table.

Inserting and Editing Embedded Media

Embedded media, such as a Youtube video, can be inserted into the rich text editor by clicking the Insert/Edit Embedded Media button.

Editing Table Rows

Once created, table rows can be edited by clicking the Table Row Properties button. This will bring up a new window.

Edit Table Row Button

Alignment of the row content can be set using the Alignment dropdown menu.

Vertical alignment of the row can be set using the Vertical Alignment dropdown menu.

A pre-defined class can be given to the table if one is created by using the Class dropdown menu.

The height of a row can be set using the Height field.

The Advanced tab of the Table Row Properties window allows you to set an ID, style, text direction (right-to-left, left-to-right), and the background. A background image can be set or you can choose a background color. If a background image and a background color are picked, the image will override the color.

Multiple table rows can be updated with these settings by selecting an option from the dropdown menu just above the Update button.

back to topTable Cell Properties

Table cell properties can be set by clicking the Table Cell Properties button.

Table Cell Properties Button

This will bring up the Table Cell Properties window. Here you can set different properties for the table cell and the data within it.

The Alignment menu will set the alignment of the content within the cell. The Vertical Alignment menu will set the vertical alignment of the content within the cell to top, center, or bottom. The Cell Type menu sets the element to be a data element or a header element (<td> or <th>). The scope menu applies a scope to the cell.

The width and height of the table cell can be altered by filling in the Width and Height fields. A pre-made class can be given to the cell from the dropdown menu.

The Advanced tab allows you to set properties to the table cell, such as an ID, style, language direction, language code, background image/color, and a border color.

To choose a background image, click the icon next to the Background Image field. This will bring up the file browser. For a more detailed explanation of the file browser, visit the file browser documentation page.

Multiple cells can be updated at one time by changing the option in the dropdown menu just above the Update button. When you are finished making changes, click the Update button to return to the Rich Text Editor.

back to topInserting/Deleting Rows and Columns

Rows can be inserted and deleted using the Insert Row and Delete Row buttons.

Insert Row Before will insert a row before the row you currently have selected. Insert Row After will insert a row after the one you have selected. Delete Row will delete the row you have selected.

Inserting and deleting columns works the same way as inserting and deleting rows.

back to topSplitting and Merging Table Cells

Table cells can be merged using the Merge Table Cells button. Merging cells combines two cells into one.

Merge Cells

To split merged cells, select the cells and click the Split Merged Table Cells button to the left of the merge button.

Split Merged Cells

back to topForms

Forms can be inserted and edited using the Rich Text Editor by clicking the Insert/Edit a Form button.

Insert/Edit Form Button

Clicking the button will bring up the Insert/Modify Form window.

Here, you can give the form a Name, Action, Method, Target, Encryption Type, and a class. Forms can automatically be validated as well using this menu by checking Auto-validate at the top of the window.

Advanced properties for the form can be changed by clicking the Advanced tab.

Here, you can give the form multiple attributes, like an ID and a style. When the form is filled out and submitted, you can run a function by filling in the onsubmit field. Similarly, you can run a function when the form is reset by filling in the onreset field.

The Hidden Fields tab is used to insert hidden fields into a form.

To add a hidden field into a form, give it a name or ID and a value and click the green Add button.

Hidden fields are often used to pass data to a server that users can't see or alter; for example, PayPal uses hidden fields in order to process what type of currency (such as USD, CDN, GBP) to use in an order form.

To delete a form and all of the elements within it, click the Delete Form button.

back to topInsert/Edit Form Elements

After creating a form, you can insert form elements inside of it (inputs, text areas, select menus, etc.) using the Rich Text Editor.

To insert an input element click the Insert/Edit form input element button.

Insert/Edit Form Elements Button

This will bring up the Insert/Modify Form window. Here, you can choose what type of input (text, checkbox, submit button, etc) you would like to use, as well as a name, value, dimensions, background image/color, border color, and a class.

The Advanced tab allows you to set more advanced properties on the form element. You can set an ID, a function to run on an event (onfocus, onblur, etc.), a max length for the input; in addition, you can check whether the field is required/checked/disabled or not by clicking the check boxes.

When you are finished, click Insert to add the field to your form.

Insert a select menu into a form

To add a select menu to your form, click the Insert/Edit form select element button.

Insert/Edit Form Select Element Button

Give the select menu a name by filling in the Name field at the top of the window. To add values to the select menu, type a Name and Value in the fields and click the green Add button.

You can give the menu a default selected value by specifying which one you would like in the Default Selected Value field.

If you would like users to be able to select multiple options in the select menu, check the Multiple Selections Allowed checkbox. The Number of Option Rows allows you to specify how many visible options the user can see; inserting a 1 will show only the selected option in a drop-down style menu; a higher number will show multiple options in a scrolling menu.

Inserting Text Areas

To insert a text area element into your form, click the *Insert/Edit Form Textarea Element* button.

Insert/Edit Form Textarea Element Button

Similar to inserting an input element, you can give the text area a name and value, as well as dimensions (rows and columns), a background image/color, border color, and a pre-determined class.

To give the text area advanced properties, click the *Advanced* tab. Here, you can give the element an ID or a style, as well as a function to execute on a certain event, such as onfocus or onblur. The textarea element can also be a required or disabled field by clicking the Required or Disabled checkboxes.

back to topSubscript and Superscript

Text can be changed to subscript and superscript by clicking one of the buttons. To change text that is already in the content to subscript or superscript, select the text and click one of the buttons.

Insert/Edit Subscript/Superscript Buttons

back to topSpecial Characters

To insert special characters into the editor, click the Insert Special Character button.

Insert Special Character Button

This will bring up the special characters window. Click on a character to insert it into your content and return to the editor.

back to topHorizontal Lines

To insert a horizontal line, click the Insert Horizontal Line button.

Insert Horizontal Line Button

In the Insert Horizontal Line window you can specify a width, height, and whether you want a shadow on your horizontal line. When you are finished, click Insert to add the horizontal line into the editor.

back to topFull-Screen Mode

Full-screen mode shows only the editor on the screen and nothing else. To enter the full screen mode, click on the *Toggle Full Screen Mode* button.

Toggle Full Screen Mode Button