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.
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.)
- Click "Disable rich-text."
- 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>
- You can return to rich-text view by clicking "Enable rich-text.
- 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.
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.)
(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.