How to use the Editor tool

What is the Editor tool?

The Editor tool is found in different content items and aids in formatting text and adding other enhancements (such as images) to it. 

When you add or edit an article, you'll see a box in which text can be added, with a set of editing buttons above it, shown here.


Working in the Editor tool

In general, the Editor tool lets you work on text in a way that's similar to word processing applications. However the behaviors of this tool will differ from word processors because each option is a representation of a set of HTML/CSS functions. Although you have the option of working directly on code (see below), the primary use of the Editor is to provide users who don't know HTML or CSS with an easy, intuitive way to format text.

Formatting Text

All text styling in the Editor is preset. There is no way to change the size or color of text other than to apply existing styles to it. Occasionally, when text is pasted into the Editor from a word processing application, some formatting shows up in the editing box (colors or unexpected font sizes, for example) that changes or disappears outside the Editor after saving the related content item.

Use the icons in the menu of the Editor tool to add formatting to text, as explained in "What do the icons mean?" below.

You can also edit some of the HTML code directly in the editor by following these steps. (Please do not attempt this if you are unfamiliar with HTML; this method assumes that you already have working knowledge of HTML.)

  1. Click "Disable rich-text."

     
  2. The HTML code of your text will appear in the editing window. Type directly in the window to modify the code. As the note explains, the following HTML tags may be added and changed: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br> <img> <table> <tbody> <tr> <td> <hr> <sub> <sup> <h1> <h2> <h3> <h4> <h5> <h6> <span> <address> <div> <th> <embed> <param> <object> <blockquote> <b> <i> <area> <map> <del> <strike> <ins> <dfn> <samp> <kbd> <var><abbr> <acronym>
     
  3. You can return to rich-text view by clicking "Enable rich-text.

  4. When finished, click the Save or Preview buttons to review your changes on the front end. 

Copying and Pasting Text

To copy and paste text into the Editor tool, use one of the following methods:

  • Hold CTRL on PC or hold command on Mac and type "c" to copy text.
    Hold CTRL on PC or hold command on Mac and type "v" to paste text.
  • Right click in the part of the screen where you want to copy or paste text with a PC mouse (or a Mac mouse with two buttons) to call up a menu revealing copy, paste and other options. If you're using a Mac mouse with only one button, hold control and click the mouse button, to call up the menu.
  • Use the Edit > Copy or Edit > Paste options in your browser's main menu.

When pasting text copied from Word or another word processor, some formatting will carry over and some will not and sometimes, it looks like formatting has copied over when it has not. In the latter case, the formatting will need to be reapplied.

  • Formatting that will usually carry over: bold and italic styles, external links
  • Formatting that may or may not carry over: lists and tables
  • Formatting that won't carry over: colors and font sizes

Undo and Redo

Undo and Redo work as expected. You can Undo or Redo by one of the following methods:

  • Clicking on the Undo and Redo icons in the Editor menu.
  • Using CTRL-z on PC or Command-Z on Mac to undo and CTRL-y on PC or Command-y on Mac (or the quick keys designated in your browser's Edit menu) for Redo
  • Using the Edit > Undo or Edit > Redo items in your browser's main menu.
     

What do the icons mean?

The table below lists all the button icons in the Editor tool and explains what they do and how to use them.

image

Makes text bold. To use it, select the text you want to bold and click the icon.

image

Makes text italic. To use it, select the text you want to bold and click the icon.

image

Sets text to align at left. This is a default alignment of text, but it's here in case you've changed the alignment to something else and want to set it back. To use it, click inside a paragraph and click the icon.

image

Sets text to align centered on the page. To use it, click inside a paragraph and click the icon.

image

Sets text to align at right. To use it, click inside a paragraph and click the icon.

image

Creates an unordered (bulleted) list. To use it, type the items of your list with each item separated by a hard return (HTML tag <P>). Select all of the items and click the icon. To create sublists, select the items of your sublist and click the indent icon (see below).

image

Creates an ordered (numbered) list. To use it, type the items of your list with each item separated by a hard return (HTML tag <P>). Select all of the items and click the icon. To create sublists, select the items of your sublist and click the indent icon (see below).

image

Adds indentation to paragraphs. To use it, click within a paragraph or select a group of paragraphs and click the icon.

image

Adds outdentation to paragraphs. To use it, click within an indented paragraph or select a group of indented paragraphs and click the icon. By default, paragraphs are outdented as much as technically possible.

image

Undo. To use it, simply click the icon. There are several levels of undo. As an alternative to clicking the icon, try CTRL-Z (PC) or Command-Z (Mac).

image

Redo. To use it, simply click the icon. There are several levels of redo. As an alternative to clicking the icon, try CTRL-Y (PC) or Command-Y (Mac).

image

Adds a link to text. To use it, select the text you want to link, click the icon and a screen will appear. Add the URL to the Link URL field.

There are some “predefined” links (called anchors) on pages. For example, there is a predefined page anchor at the top of every page. To create a link that will take you to the top of a page when clicked, you type the text of the link (e.g., “Top of Page”) at the point where you want the link to appear, select the text, and click on the link icon. In the dialog that appears, type #page in the Link URL field and click Insert. The text will be highlighted in blue as a link, and clicking it will bring you to the top of the page.Another predefined anchor, zone-footer, will go to the bottom of the page. As in the #page example, type #zone-footer in the URL field and click insert.

Best Practice Tips for Links:

When adding links to pages on the Five College site, best practice is to remove "https://www.fivecolleges.edu" from URLs before adding them. This allows more flexibility in where the subpage is located (its address is relative to its parent rather than being a fixed address).

All internal links (links to other areas in the same program site) should open in the same window and tab. All PDFs, documents, and other sites should open in the same window but with a new tab.

image

Removes a link. To use it, select the text or click an area within the text you want to remove the link from and click the icon.

image

Adds an anchored bookmark. To use it, place your cursor where want to add the bookmark and click the icon. A screen will appear where you can enter a name for the anchor. When you add an anchor into a content item, it will appear as an option whenever you add a new link to the content item you're working on. (An anchored bookmark is a feature of HTML. The tool represented by this icon allows you to place a coded bookmark in your content without knowing any code.)

image

Turns text into superscript (former) or subscript (latter). To use it, select the text you want to convert and click the appropriate icon.


Adds a plain horizontal rule, which is a dividing line separating two paragraphs. To use it, place your cursor before the first character of the paragraph below which you want the line to appear and click the icon.

image

Removes some formatting from a paragraph. To use it, click inside the paragraph and click the icon.

image

Adds a special character to text. To use it, click in the spot where you want to insert the special character and click the icon. A screen will popup that shows a selection of characters. Click on the character you want to insert (the window closes and the character apears in your text).

image

Adds a special horizontal rule, which is a dividing line separating two paragraphs. To use it, place your cursor before the first character of the paragraph below which you want the line to appear and click the icon. A screen will popup where you can fill in the width in pixels or percentage, the height in pixels and decide whether or not to add a shadow. This kind of rule always aligns to center.


[The word appearing by default on this tool may also be "Format."] Adds font formatting paragraphs based on styles specified by Five Colleges. These styles are constructed with CSS and they're based on text elements inherent to HTML. To use this tool, click in the paragraph where you want to style the text, click the icon, and select the style you want to apply by clicking its name. "Format" adds styling according to default specifications; "Paragraph" is used for most of the text in a document; "Heading 3" is the recommended style for subheadings; and Headings 4 and 5 offer two identical, but differently colored sub-subheading styles; Heading 6 styles text as though Paragraph was applied and made bold and blue. The rest of the listed styles have not been configured. Representations of these styles are directly below this table.


Adds special formatting to paragraphs based on styles specified by Five Colleges. This list of special formatting options will continue to grow as more editorial needs are identified. To use this tool, click in the paragraph where you want to style the text, click the icon, and select the style you want to apply by clicking its name. Two styles shown in this menu are handy for aligning images left and right of a paragraph. Do do that, insert an image (see "Add Image," below) at the very beginning of a paragraph before and on the same line as the first character. Click on the image to select it, then select the "image align left" or "imag align right" style. You can only apply styling to images once; if you want to make further adjustments after applying a style to an image, you will need to delete and reinsert the image.


Toggles the editor screen to full screen and back again.


Allows you to paste text into the Editor copied from Microsoft Word. While you can paste text copied from Word directly into the editing window, this "Paste from Word" tool automatically strips formatting out of Word documents that might interfere with text behaviors. To use it, copy text from a Word document, click the icon, paste the text into the gray window and click the Insert button.

image

Adds a table and is used in conjunction with the other table formatting tools on the menu. The table is specifically an HTML element and this tool allows you format the table presumably without accessing code. Please note that HTML tables are unlike tables built in MS Word or other word processing tools and may be difficult to use without a basic understanding of HTML and particularly the <table><tr><td> set of tags. An understanding of CSS (Cascading Style Sheets) also helps.

image

A table formatting tool that allows configuration of rows.

image

A table formatting tool that allows configuration of cells.

image

A table formatting tool that inserts a row above or below a selected row or deletes a selected row.

image

A table formatting tool that inserts a column to the left of or to the right of a selected column or deletes a selected column.

image

A table formatting tool that splits merged table cells.

image

A table formatting tool that merges table cells.


Adds an image or other media to the Editor. To use it, place the cursor in the part of your document where you want to add an image and click the icon. A list of pages on the entire Five College website will appear. Browse to where the image you want to add is located on the site (after being added as a File Upload content item) and select it by clicking on it. A new screen will appear allowing you to choose from different options and sizes for formatting the image (see below). When you're done formatting the image, click the Insert button. The image will appear where your cursor was placed.


Allows manual insertion of an endpoint for the Teaser of a content item. A Teaser (or preview) is a shortened view of a saved content item where options are given to front-end users to view more. Teasers are useful on pages where many different content items are added because their use allows more to fit on one page.


Here is a list of the styles found under Format/Paragraph ()

This is Format.
(Useful for clearing out erroneous styling from other applications that come along with text pasted from Word and other word processing applications).

This is Paragraph.
(Best for basic body text.)

This is Address.
(Not currently configured. Don't use.) 
This is Preformatted.
(Not currently configured. Don't use) 

This is Heading 2.

This is Heading 3.

This is Heading 4.

This is Heading 5.
This is Heading 6.

Here is a list of styles found under Styles ()

Image align left causes text to wrap around an image's right side, starting from the top. The image of the koala in this example is only here to show what happens when this formatting is applied. A brief explanation of how to apply this style is given in the section of this page called, "What do the icons mean?" but a more comprehensive explanation of adding and formatting images on the website will be available soon in the side menu of this section of the Five College website.

Image align right causes text to wrap around an image's left side, starting from the top. The image of the koala in this example is only here to show what happens when this formatting is applied. A brief explanation of how to apply this style is given in the section of this page called, "What do the icons mean?" but a more comprehensive explanation of adding and formatting images on the website will be available soon in the side menu of this section of the Five College website.

Drop cap converts all selected characters of a text to a large format that basically aligns on the left side of a paragraph. Drop caps should be used sparingly because they can visually overwhelm text with their size and boldness.

small type style is useful for setting captions and adding tertiary information to text.