Jomatu Wiki: Documentation

Jomatu Wiki: How to use the Edit Window

Introduction

When you select a web page to edit from the Jomatu Browse Facility by clicking the 'Edit' button, you will be redirected to the Jomatu Edit Facility. This tutorial details each of the buttons and pull-down menus available on the editor, and covers the important, but subtle, differences between word processing and editing a web page.

Using our example website, our starting point is in the Edit Facility (the documentation for getting to this point can be found on the 'How to edit your website content' page - steps 1-3).

Step 1: Select a web page to edit: entering the Edit Facility

Edit Window - Step One

Before detailing all the buttons and pull-down menus that you can see in the Edit Window (just below the Jomatu Header), we need to detail the difference between standard word processing and editing a web page using the Edit Window.

Differences between word processing and web page editing

1) Paragraphs and Line Breaks

In a word processor, pressing the Enter/Return key inserts a paragraph mark and causes text to begin again on a new line. If you want to put an empty line between paragraphs, you would simply insert two paragraph marks.

When editing a web page (using the Edit Window), pressing the Enter/Return key also inserts a new paragraph. However, this will usually include an empty line automatically (depending on how your website is styled).

If you want to simply start text on a new line, you need to hold down the 'Shift' key prior to pressing the Enter/Return key. This inserts a 'Line Break', and it's important to understand that subsequent text is considered a part of the existing paragraph. Therefore all text following a 'Line Break' will be affected by any paragraph-level formatting.

2) Copying and Pasting content from other applications

It may seem tempting to create content in a word processor, style it, and then copy-and-paste that styled content into the Edit Window. However this is not a recommended procedure, because styling on a web page is very different from styling a word processing document. In a word processor, the styling is embedded in the content itself, whereas on a web page the styling is usually controlled by a style sheet.

The issue is further complicated by security protocols in various web browsers which may actually block your computer's copy-and-paste mechanism. Your options are as follows:

The first method above is the recommended method.

The Edit Window buttons

When you click on your website content, the edit window appears (see step one above). In detail, these are the four rows of buttons and pull-down menus that are available in the editor.

Edit Window - Step Two

Note: if you hover your mouse pointer over a button, a tool-tip appears which will help you to remember what each button does.

First (top) row of buttons

Icon Button Applies to Description
New Document button New Document Everything Deletes everything you see in the current edit window
Bold button Bold Selected text Changes any selected text into bold (depending on your style sheet settings)
Italic button Italic Selected text Changes any selected text into italic (depending on your style sheet settings)
Underline button Underline Selected text Underlines any selected text
Strikethrough button Strikethrough Selected text Puts a 'strikethrough' line over any selected text
Align Left button Align Left Block Elements Left-aligns any selected paragraphs, or the paragraph where the cursor is currently located
Align Center button Align Center Block Elements Center-aligns any selected paragraphs, or the paragraph where the cursor is currently located
Align Right button Align Right Block Elements Right-aligns any selected paragraphs, or the paragraph where the cursor is currently located
Align Full button Align Full Block Elements Justifies (aligns both left and right margins) of any selected paragraphs, or the paragraph where the cursor is currently located
  Styles Selected text This pull-down menu is not currently used
  Paragraph Block Elements This pull-down menu is used to convert any selected 'paragraphs', or the 'paragraph' where the cursor is currently located, to either a heading (six levels), a paragraph (e.g. to convert a heading back to a paragraph), an address (for postal addresses) or to preformatted text (i.e. text that remembers the white-space applied to it)
  Font Family Selected text This pull-down menu is used to change the font of any selected paragraphs, or the paragraph where the cursor is currently located. Please note that the font must be installed on your computer (or the computer of your website visitors) in order to see that particular font
  Font Size Selected text This pull-down menu is used to change the font size of any selected paragraphs, or the paragraph where the cursor is currently located

Second row of buttons

Icon Button Applies to Description
Cut button Cut Selected content Removes any selected content and copies it to your computer's clipboard. Note: if your browser prevents your use of this button, you can try the appropriate keyboard shortcut instead: Ctrl+X for windows users, and Cmd+X for Mac users.
Copy button Copy Selected content Copies any selected content to your computer's clipboard. Note: if your browser prevents your use of this button, you can try the appropriate keyboard shortcut instead: Ctrl+C for windows users, and Cmd+C for Mac users.
Paste button Paste Cursor position Pastes the content from your computer's clipboard to the current cursor position. Paste may be affected by the 'Paste Mode' (see next).Note: if your browser prevents your use of this button, you can try the appropriate keyboard shortcut instead: Ctrl+V for windows users, and Cmd+V for Mac users.
Paste as Plain Text button Paste as Plain Text N/A Toggles the 'Paste Mode', switching 'paste as plain text' on and off. Set the 'Paste Mode' prior to using the Paste button (see previous). It is recommended to activate 'paste as plain text' and format your text require from within the Edit Window instead of an external application.
Paste from Word button Paste from Word Cursor position Opens a pop-up window to allow you to paste content from Microsoft Word. Please note: depending on your browser, this may not work, or may not produce the results you expect (see above).
Find button Find All text Opens a pop-up window to allow you to search for text in the current edit window.
Find/Replace button Find/Replace All text Opens a pop-up window to allow you to search and replace text in the current edit window.
Insert/Remove Bulleted List button Insert/Remove Bulleted List Block elements Converts block elements to a bulleted (unordered) list. If applied to an existing bulleted list, the button converts each bulleted item to a paragraph. Note: this button combines with a pull-down arrow to allow you to select the bullet icon to be used.
Insert/Remove Numbered List button Insert/Remove Numbered List Block elements Converts block elements to a numbered (ordered) list. If applied to an existing numbered list, the button converts each numbered item to a paragraph. Note: this button combines with a pull-down arrow to allow you to select the number format to be used.
Increase Indent button Increase Indent Block elements Removes an indentation level (if previously applied with 'Increase Indent').
Decrease Indent button Decrease Indent Block elements Adds an indentation level.
Block Quote button Block Quote Block elements Converts the block element to a Block Quote (a section [within a document] that is quoted from another source - W3C).
Undo button Undo Previous command Undoes the previous edit command or modification to the content of the Edit Window.
Redo button Redo Previous command Re-applies formatting undone with the 'Undo' button (see previous).
Insert/Edit Link button Insert/Edit Link Selected content Makes the selected content into a web link via a pop-up window (read more). If the selected content is already a web link, then this button will edit that link.
Unlink button Unlink Selected web link Removes a web link from the selected web link. Note: this button also applies to any web link containing the current cursor position.
Insert/Edit Anchor button Insert/Edit Anchor Cursor position Inserts a named anchor. This is used to provide web links within the same web page. The anchor can be linked to by inserting a hash character ('#') before the anchor name in the link URL.
Insert/Edit Image button Insert/Edit Image Cursor position Inserts a new image at the cursor position, or if an existing image is selected, edits that image. Clicking this button launches a pop-up window (read more).
Cleanup Messy Code button Cleanup Messy Code Everything For advanced users only. This button will clean up any invalid HTML that has been added to the HTML source of the Edit Window content via the 'Edit HTML Source' button.
Help button Help N/A Gives information about the TinyMCE editor version, links to the Moxiecode website and links concerning the installed editor plugins.
Edit HTML Source button Edit HTML Source Everything For advanced users only. Allows direct editing of the Edit Window's HTML source code. This allows direct control over the HTML coding of the web page content being edited.
Insert Date button Insert Date Cursor position Adds the current date in the format YYYY-MM-DD.
Insert Time button Insert Time Cursor position Adds the current time in the format HH:MM:SS.
Preview button Preview Everything Provide a 'page layout' view of the content being edited. Note: this will not include your website's style sheets so won't provide an accurate representation of how the content will look on the actual web page.
Select Text Color button Select Text Color Selected text Applies the text color to the selected text. Clicking the adjacent down-arrow will launch a pop-up window where colors can be selected.
Select Background Color button Select Background Color Selected text Applies the background color to the selected text. Clicking the adjacent down-arrow will launch a pop-up window where colors can be selected.

Third row of buttons

Icon Button Applies to Description
Insert/Edit Table button Insert/Edit Table Cursor position Inserts a table at the cursor position via a pop-up window (read more). If an existing table is selected, then this button will edit that table instead.
Table Row Properties button Table Row Properties Selected table Edits the table row properties for a selected table, or a table containing the current cursor position. This button launches a pop-up window (read more).
Table Cell Properties button Table Cell Properties Selected table Edits the table cell properties for a selected table, or a table containing the current cursor position. This button launches a pop-up window (read more).
Insert Row Before button Insert Row Before Selected table Inserts a new table row immediately before the table row which contains the current cursor position.
Insert Row After button Insert Row After Selected table Inserts a new table row immediately after the table row which contains the current cursor position.
Delete Row button Delete Row Selected table Deletes the table row which contains the current cursor position.
Insert Coloumn Before button Insert Column Before Selected table Inserts a new table column immediately before the table column which contains the current cursor position.
Insert Coloumn After button Insert Column After Selected table Inserts a new table column immediately after the table column which contains the current cursor position.
Delete Column button Delete Column Selected table Deletes the table column which contains the current cursor position.
Split Merged Table Cells button Split Merged Table Cells Selected table Splits apart table cells that have previously been merged via the 'Merge Table Cells' button (see next).
Merge Table Cells button Merge Table Cells Selected table Merges selected table cells. If no table cells have been selected, a pop-up window asks you to specify which cells you want to merge (relative to the current cursor position).
Insert Horizontal Line button Insert Horizontal Line Cursor position Add a full-width horizontal line (compare below).
Remove Formatting button Remove Formatting Block element Removes all formatting from a block element.
Show/Hide Guidelines/Invisible Elements button Show/Hide Guidelines/Invisible Elements Everything Enables hidden elements to be shown. Sometimes you can't edit text content because it is hidden below another element (e.g. a layer). Highlighting the text then clicking this button will enable you to edit that text, though you may be restricted to keyboard editing only.
Subscript button Subscript Selected text Converts selected text to subscript.
Superscript button Superscript Selected text Converts selected text to superscript.
Insert Special Character button Insert Special Character Cursor position Inserts a special character via a pop-up window. These characters include common symbols, currency symbols, foreign characters and mathematical symbols.
Emotions Character button Emotions Cursor position Inserts an emoticon symbol selected via a pop-up window.
Insert/Edit Embedded Media button Insert/Edit Embedded Media Cursor position Embeds media into the web page at the current cursor position via a pop-up window (read more).
Insert Horizontal Line button Insert Horizontal Line Cursor position Adds a horizontal line via a pop-up window. This version (compare above) allows you to format the horizontal line.
Print button Print N/A Prints the current Edit Window to a designated output device.
Direction Left to Right button Direction Left to Right Block elements Sets the direction of block elements to read from left to right.
Direction Right to Left button Direction Right to Left Block elements Sets the direction of block elements to read from right to left.
Toggle Full Screen Mode button Toggle Full Screen Mode N/A Toggles between the standard Edit Window view and Full Screen Mode.

Fourth (last) row of buttons

Icon Button Applies to Description
Insert New Layer button Insert New Layer Cursor position For advanced users only. Inserts a new layer which, by default, is absolutely positioned (see 'Toggle Absolute Positioning' button below). Technically, it inserts an HTML DIV element, which can only be removed via the 'Edit HTML Source' button option.
Move Forward button Move Forward Selected Layer For advanced users only. Moves the selected layer forward by one level in the case where layers overlap. Technically, it increments the DIV element's z-index level.
Move Backward button Move Backward Selected Layer For advanced users only. Moves the selected layer backward by one level in the case where layers overlap. Technically, it decrements the DIV element's z-index level.
Toggle Absolute Positioning button Toggle Absolute Positioning Selected Layer For advanced users only. Toggles absolute positioning mode for the selected layer. Technically it toggles the DIV element's inline styling of the 'position' property.
Edit CSS Sytle button Edit CSS Style Block elements For advanced users only. Allows editing of block element inline CSS styles via a pop-up window. Note: the style settings shown will be for the selected content or the content containing the current cursor position. However, changes made will be applied to the containing block element.
Toggle Styling (Enable/Disable style sheets) Toggle Styling (Enable/Disable style sheets) Everything Disable/Enable all style sheets. This can be especially useful if you're having trouble editing; sometimes the website's styling can interfere with the Editor's ability to edit the content of your web page.
Citation button Citation Selected text Converts the selected text to a citation via a pop-up window (see below).
Abbreviation button Abbreviation Selected text Converts the selected text to an abbreviation via a pop-up window (see below).
Acronym button Acronym Selected text Converts the selected text to an acronym via a pop-up window (see below).
Deletion button Deletion Selected text Marks the selected text as 'deleted' via a pop-up window (see below).
Insertion button Insertion Selected text Marks the selected text as 'inserted' via a pop-up window (see below).
Insert/Edit Attributes button Insert/Edit Attributes Selected element For advanced users only. Displays common element attributes and allows for the editing and inserting of attributes, including JavaScript event handlers.
Insert/Edit Attributes button Show/Hide Visual Control Characters Everything Not presently used.
Insert/Edit Attributes button Insert Non-Breaking Space Character Cursor position Inserts a non-breaking space character. This differs from a normal space character in that it is (a) considered a part of a word, so lines won't break at that point, and (b) considered a 'printable' character in the sense that they won't 'collapse' in the way that white space normally does in an HTML document.
Insert Predefined Template Content button Insert Predefined Template Content Cursor position Presently not used.
Insert Page Break for Printing button Insert Page Break for Printing Cursor position Inserts a page-break mark to denote where a printed page should break.
File Manager (upload files) File Manager (upload files) N/A Launches the File Manager to upload files and manage uploaded files.
Edit Title and Meta Tags Edit Title and Meta Tags N/A Allows editing of the (normally hidden) web page's Title, Meta Keywords and Meta Description tags; useful for Search Engine Optimization.

Edit Window pop-up windows

Some buttons launch a pop-up window allowing you to specify detailed settings. The following is a description of the most common pop-up windows. Other pop-up windows are fairly self-explanatory so won't be covered below.

The Insert/Edit Link pop-up window

The Insert/Edit Link pop-up window

There are four clickable tabs in this pop-up window. The 'Popup', 'Events' and 'Advanced' tabs are for advanced users only, so we'll only cover the 'General' tab here, as follows:

General tab

The Insert/Edit Image pop-up window

The Insert/Edit Image pop-up window

There are three clickable tabs in this pop-up window. The 'Advanced' tab is for advanced users only, so we'll only cover the 'General' and 'Appearance' tabs here, as follows:

General tab

Appearance tab

The Insert/Edit Table pop-up window

The Insert/Edit Table pop-up window

There are two clickable tabs in this pop-up window. The 'Advanced' tab is for advanced users only, so we'll only cover the 'General' tab here, as follows:

General tab

The Table Row Properties pop-up window

The Table Row Properties pop-up window

There are two clickable tabs in this pop-up window. The 'Advanced' tab is for advanced users only, so we'll only cover the 'General' tab here, as follows:

General tab

The Table Cell Properties pop-up window

The Table Cell Properties pop-up window

There are two clickable tabs in this pop-up window. The 'Advanced' tab is for advanced users only, so we'll only cover the 'General' tab here, as follows:

General tab

The Insert/Edit Embedded Media pop-up window

The Insert/Edit Embedded Media pop-up window

There are three clickable tabs in this pop-up window. The 'Advanced' tab will depend on the type of media selected, so a detailed description is omitted here, the other two tabs are described as follows:

General tab

Source tab

For advanced users only. This tab shows the HTML source of the embedded media, and can be used to set/edit options not available through the pop-up window.

Becoming an advanced user

Many of the options available through the Edit Window are classified as being for 'advanced users only'. This means that a knowledge of HTML (HyperText Markup Language) or CSS (Cascading Style Sheet) or JavaScript are required to be able to understand and/or use the options effectively. For those interested, there are plenty of excellent books available for all levels of understanding.

This completes the 'How to use the Edit Window' documentation.


* The Edit Window is a third-party, open-source, WYSIWYG editor called TinyMCE, by Moxiecode Systems AB. For full details, visit their website at: http://en.wikipedia.org/wiki/TinyMCE.

† This particular pop-up window is a part of your computer's operating system; it is not created by Jomatu. Therefore the methods for locating your files will be dependent on your particular system. The example shown was generated on a computer running Microsoft Windows.