Using the Rich Text Editor

Using the Rich Text Editor

The Rich Text Editor (RTE) allows you and your client to edit HTML content without seeing any code: it is a wysiwyg environment much like a stripped down version of Word.

The RTE mode is enabled automatically when editing the site via the in-place editor, as long as there is no script in the code being edited. It is best to keep script in a separate region of the page, so the HTML code that represents the content can be edited with the RTE without worrying about affecting the script.

Wysiwyg text editing in an HTML environment has many challenges. You're counting on the editor to insert sensible HTML markup with a minimum of information, other than the raw text itself. The visual appearance of any given HTML markup depends, of course, on the stylesheets applied to it, and it may also depend on surrounding HTML markup to trigger certain rules in those stylesheets.

Because of this complexity, all wysiwyg editing that creates HMTL is an approximation, both in creating the optimal code for the content, and in creating a preview that represents how the text will look on the page, while it is being edited.

You can control both the stylesheet that is applied to the editor region, and the styles that are shown in the Style picker on the editor toolbar. See Customizing the Rich Text Editor for details.

Editor Toolbar

The RTE toolbar has many options, which are largely self-explanatory with a little exploration. For "excerpt" fields, which are small but sometimes need HTML content, a stripped down version of the toolbar is provided.

For details on what each icon does, refer to the editor documentation.

Cut, Copy, and Paste

In addition to the usual cut, copy, and paste commands, available via the toolbar or keyboard, you can paste text in two special ways by choosing the appropriate button:

• Paste as plain text: all HTML markup is stripped out.
• Paste word document: retains most styling from Word while cleaning up the markup.

Styling Text

To style text, first select it, and then click a button in the toolbar or choose an item from one of the toolbar's pop-up menus.

To preserve CSS formatting, it is best to avoid using the editor controls, when possible, except for choosing the Format and optionally a Style.

The Format is really the tag: p, h1, h2, etc.

The Style is chosen from a set of styles that you can define by customizing the editor settings. This lets you create a set of predefined styles from which your client can choose.

Inserting Images

To insert an image, position the cursor where you want to insert it, and click the image button. In the dialog that is displayed, enter the path to the image.

If you uploaded the image directly to your Webvanta site, and did not use a zip file to create a folder, then the path should be in the format /filename.jpg. If you are loading an image from an external site, include the full URL, starting with http://.

Enter the alt text to describe the image.

You can enter the dimensions of the image, but keep in mind that this is providing a size instruction to the browser, not resizing the image on the server.

If you want a link on the image, you can specify that on the Link tab.

You can also specify alignment and padding options, apply classes, and so forth.

Adding Links

To attach a link to a piece of text, select the text and click the Link button. Enter the URL for the link. If you want to force it to open in a new window, click the Target tab and choose New Window (_blank).

Using Cut and Paste

There are icons in the editor's toolbar that you can use for cut and paste, but your browser's security settings will probably block them from working. This is because access to your system clipboard is prohibited by default, and you don't want to enable it broadly because you wouldn't want arbitrary web sites being able to access your clipboard.

You can always use ctrl-X for cut, ctrl-C for copy, and ctrl-V for paste, so just ignoring the icons is the easiest fix.

If you do want to change your browser's security settings, here's where to look. To configure Firefox for this, enter about:config in the address bar; see this article for more details. You should only enable clipboard access on the specific site(s) you trust.

For IE7 and IE8, the default behavior is to prompt the user (on all sites) asking for clipboard permission; to suppress the prompt, click Tools, Internet Options, Security tab, Internet, Custom Level. Under Scripting, click Enable for Allow Programmatic clipboard access. See this article for details.

Using Full-Screen Mode

When you are editing a large body of text, click the Full Screen icon (the first icon in the top row) or press Ctrl-Alt-Enter (Ctrl-Option-Enter on a Mac). The editor region now fills the browser window. (It may then be too wide for easy editing, in which case you can simply resize the browser.)

To return to the normal view, click the Full Screen icon (or press the shortcut key) again.

Cheat Sheet

Ctrl-C	Copy selected text
Ctrl-X	Cut selected text
Ctrl-V	Paste text
Ctrl-Z	Undo
Ctrl-Y	Redo
Ctrl-B	Bold
Ctrl-I	Italic
Ctrl-U	Underline
Ctrl-L	Open Link window
Ctrl-Shift-S	Save
Ctrl-Alt-Enter (Windows) Ctrl-Option-Enter (Mac)	Resize to fill browser

Credits

The RTE is based on the open-source CKeditor.