WYSIWYG Editor in v5

This document describes the WYSIWYG Editor "plug-in" for v5.

1. WYSIWYG Editor in v5

In previouse enCore versions, users had to know HTML in order to add visual formatting to note texts, descriptions, etc. There was no alternative way of adding or editing mark-up, other than entering / editing raw HTML by hand.

In v5 users still have this option, but v5 does also add the ability of using a visual, What You See Is What You Get, editor. The supported editor adds the ability of manipulating text through making selections and clicking buttons (like in word processors), instead of having to manually enter HTML tags. The editor uses JavaScript for manipulating the text through a human friendly interface.

1.1 Setting up tinyMCE

v5 comes with two pre-set javascript setup scripts making it possible to use the tinyMCE editor from Moxiecode with enCore.

In order to enable this editor, tinyMCE has got to be installed on the server; simply download tinyMCE and extract the contents of the archive to the enCore-folder of your web server.

Note: tinyMCE is LGPL Licensed and written in JavaScript.

1.2 Enabling tinyMCE for MOO and Users

Once tinyMCE has been placed at (your installation's) /encore/tinymce, a wizard may set $xpress_client.wysiwyg_editor_enabled to 1 in order to globally enable the WYSIWYG editor (in-MOO).

Users may enable the editor by choosing Preferences > Theme and Appearance > Use visual editor if available > Yes, as highlighted in the screen shot below, which sets the use_wysiwyg_editor property of the user to 1.

Preferences

Wizards may set $player.use_wysiwyg_editor to 1 in order to make sure the default option is "use WYSIWYG editor".

1.3 Affected Fields

When tinyMCE is enabled, a predefined set of textareas will turn into WYSIWYG editor instances in "compliant" web browser (see known issues).

The affected textfields are:

Wizards and/or programmers may add other fields (e.g. slides) by replacing calls to $encore_web_utils:textarea() with $encore_web_utils:textarea_js_if_available() (note: examine the verbs for required arguments).

2. Using the WYSIWYG Edior in V5

When tinyMCE has been successfully set up and a MOO user has enabled tinyMCE, he or she will notice that the looks of the textareas listed above have changed (given the fact that a "compliant" browser is used).

In Gecko based browsers (Firefox, Mozilla and Netscape) and Opera, the textareas will turn into editor instances like the one shown in the picture below:

Firefox

..and in Microsoft Internet Explorer;

MSIE

Note that in browsers such as Safari the textareas will - unfortunately - remain as before:

Safari

Any standards compliant web browsers should, however, render the result in a standard way, because the code produced by tinyMCE consists of valid XHTML and CSS:

Result

3. Known Issues

The scripts defined on $encore_web_utils.wysiwyg_editor_inline_script_simple and $encore_web_utils.wysiwyg_editor_inline_script_advanced are used to initialize tinyMCE and turn textareas into editor instances in the following browsers only:

The editor will not work in browsers such as Safari.

Unfortunately, this is due to the system setup of enCore MOO. Because the web server and the MOO server are treated as different domains (they are indeed different servers - one listens on e.g. :7000 and the other on :7777), the security settings of browsers such as Firefox and Opera will prevent JavaScript in pop-up windows created by tinyMCE from executing. This is due to the same origin policy for JavaScripts in the above mentioned browsers. Due to Microsoft Internet Explorers lack of security, this browser does allow us to use more of tinyMCE's functionality. The additional functions provided by the advanced setup which works in Internet Explorer should not be taken as a sign of Internet Explorer's superiority over browsers such as Firefox and Opera, but rather as a sign of the insecurity of the MSIE-browser.

Please note that this might have some negative side effects. If a group of students, one of which uses Safari while the others use Firefox or Internet Explorer, works on a shared Note, the non-Safari users will - without noticing it - through tinyMCE produce (possibly rather complex) HTML code which the Safari user will have to work with manually. Unfortunately, because of the enCore MOO server setup, there exists no work-around other than urging the Safari user to either use a browser such as Firefox, a stand-alone HTML editor or to edit the raw HTML code by hand, or to urge the non-Safari users to disable the WYSIWYG editor while working on the shared note.

Last updated November 5 2006 by Trond K. Pettersen.

(End of file)