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

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:

Either type the content directly into the Edit Window, or type the content into a word processor and copy-and-paste it into the Edit Window in 'Plain Text' mode (see below). The content can then be styled within the Edit Window - picking up styles defined within the website's style sheet.
Invoke the 'Paste from Word' option in the Edit Window. This option allows content created in Microsoft Word to be inserted into the Edit Window, but the results may be a bit unpredictable, or may simply not work at all.

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.

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

Button	Applies to	Description
New Document	Everything	Deletes everything you see in the current edit window
Bold	Selected text	Changes any selected text into bold (depending on your style sheet settings)
Italic	Selected text	Changes any selected text into italic (depending on your style sheet settings)
Underline	Selected text	Underlines any selected text
Strikethrough	Selected text	Puts a 'strikethrough' line over any selected text
Align Left	Block Elements	Left-aligns any selected paragraphs, or the paragraph where the cursor is currently located
Align Center	Block Elements	Center-aligns any selected paragraphs, or the paragraph where the cursor is currently located
Align Right	Block Elements	Right-aligns any selected paragraphs, or the paragraph where the cursor is currently located
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

Button	Applies to	Description
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	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	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	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	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	All text	Opens a pop-up window to allow you to search for text in the current edit window.
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	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	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	Block elements	Removes an indentation level (if previously applied with 'Increase Indent').
Decrease Indent	Block elements	Adds an indentation level.
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	Previous command	Undoes the previous edit command or modification to the content of the Edit Window.
Redo	Previous command	Re-applies formatting undone with the 'Undo' button (see previous).
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	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	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	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	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	N/A	Gives information about the TinyMCE editor version, links to the Moxiecode website and links concerning the installed editor plugins.
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	Cursor position	Adds the current date in the format YYYY-MM-DD.
Insert Time	Cursor position	Adds the current time in the format HH:MM:SS.
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	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	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

Button	Applies to	Description
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	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	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	Selected table	Inserts a new table row immediately before the table row which contains the current cursor position.
Insert Row After	Selected table	Inserts a new table row immediately after the table row which contains the current cursor position.
Delete Row	Selected table	Deletes the table row which contains the current cursor position.
Insert Column Before	Selected table	Inserts a new table column immediately before the table column which contains the current cursor position.
Insert Column After	Selected table	Inserts a new table column immediately after the table column which contains the current cursor position.
Delete Column	Selected table	Deletes the table column which contains the current cursor position.
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	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	Cursor position	Add a full-width horizontal line (compare below).
Remove Formatting	Block element	Removes all formatting from a block element.
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	Selected text	Converts selected text to subscript.
Superscript	Selected text	Converts selected text to superscript.
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	Cursor position	Inserts an emoticon symbol selected via a pop-up window.
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	Cursor position	Adds a horizontal line via a pop-up window. This version (compare above) allows you to format the horizontal line.
Print	N/A	Prints the current Edit Window to a designated output device.
Direction Left to Right	Block elements	Sets the direction of block elements to read from left to right.
Direction Right to Left	Block elements	Sets the direction of block elements to read from right to left.
Toggle Full Screen Mode	N/A	Toggles between the standard Edit Window view and Full Screen Mode.

Fourth (last) row of buttons

Button	Applies to	Description
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	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	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	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 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)	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	Selected text	Converts the selected text to a citation via a pop-up window (see below).
Abbreviation	Selected text	Converts the selected text to an abbreviation via a pop-up window (see below).
Acronym	Selected text	Converts the selected text to an acronym via a pop-up window (see below).
Deletion	Selected text	Marks the selected text as 'deleted' via a pop-up window (see below).
Insertion	Selected text	Marks the selected text as 'inserted' via a pop-up window (see below).
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.
Show/Hide Visual Control Characters	Everything	Not presently used.
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	Cursor position	Presently not used.
Insert Page Break for Printing	Cursor position	Inserts a page-break mark to denote where a printed page should break.
File Manager (upload files)	N/A	Launches the File Manager to upload files and manage uploaded files.
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

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

Link URL: this is the location of the web page or file on the internet that you want to link to. It can be (a) an absolute URL (e.g. 'http://www.google.com/'), or (b), a relative URL (i.e. a web page or file that resides on the same website). Relative URLs can be relative to the document root folder, or relative to the current page.
Link List: if you've uploaded any web pages or files via Jomatu that can be linked to, then those pages/files will appear in this pull-down list. Simply select the item from this list and the Link URL field will be populated automatically with the correct location.
Target: you should use the default value ('Opens in This Window/Frame') unless you have a particular reason to use another setting.
Title: the title text will appear when you hover your mouse over the link. It can be used to provide a description of what the link is.
Class: For advanced users only. Shows any CSS classes that have been applied to the link (anchor) element.

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

Image URL: this is the location of the image on the internet that you want to link to. It can be (a) an absolute URL (e.g. 'http://www.google.com/'), or (b), a relative URL (i.e. an image that resides on the same website). Relative URLs can be relative to the document root folder, or relative to the current page.
Image List: if you've uploaded any images via Jomatu then those images will appear in this pull-down list. Simply select the image from this list and the Image URL field will be populated automatically with the correct location.
Image Description: provide a short description of what the image is about. Whilst this description is not visible in the web page, it is useful for both search engines (which can read the description) and for visually impaired users.
Title: similar to the Image Description (above), however the title text will appear when you hover your mouse over the image.

Appearance tab

Alignment: images on web pages are normally 'inline' elements, which means that they appear within text lines. The first size settings governs the vertical alignment of the image relative to it's surrounding line of text. The last two settings ('Left' and 'Right') govern the horizontal placement of the image on the text line.
Dimensions: Images that are selected using 'Image List' (see above), or that are specified using 'Image URL' (see above) using a relative link, will have the dimensions set automatically. Otherwise, you can specify the dimension here (width/height) or otherwise change the automatic settings to create an image of a different size. Note: reducing the image size won't reduce the image file size.
Vertical Space: adds spacing to both the top and bottom of the image. The units are in pixels.
Horizontal Space: adds spacing to both the left and right of the image. The units are in pixels.
Border: adds a border to the image. The units are in pixels.
Style: for advanced users only. Allows you to insert/edit inline CSS styles that can be applied to the image.

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

Columns: this is the number of columns in the table.
Rows: this is the number of rows in the table.
Cell Padding: this is the amount of space between the cell's content and the cell's border. The units are in pixels.
Cell Spacing: this is the amount of space between each cell. The units are in pixels.
Alignment: to position the table on a new line (with no other content) leave this option as 'not set'. If you want to position the table within the same line as existing content (e.g. a line of text), then select one of the other options for positioning the table horizontally.
Width: the width of the table. If this field is left blank then the width of the table will depend only on its content. Otherwise the width may be specified either as a number of pixels (e.g. '250px'), or a percentage (of the width of its containing element, e.g. '40%').
Height: the height of the table. If this field is left blank then the height of the table will depend only on its content. Otherwise the height may be specified either as a number of pixels (e.g. '250px'), or a percentage (of the height of its containing element, e.g. '40%').
Class: For advanced users only. Shows any CSS classes that have been applied to the table element.
Table Caption: if checked, then a text field (initially empty) will be inserted above the table in the Edit Window. Click to place the cursor in this field and enter the text you want for the table caption.

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

Row Type: table rows are classified as 'header', 'body' or 'footer'. Select the type of table rows that you wish to set properties for.
Alignment: sets the horizontal alignment of the cell content within the table row(s) being set.
Vertical Alignment: sets the vertical alignment of the cell content within the table row(s) being set.
Class: For advanced users only. Shows any CSS classes that have been applied to the table row.
Height: the height of the table row(s). If this field is left blank then the height of the table row(s) will depend only on its content. Otherwise the height may be specified either as a number of pixels (e.g. '30px'), or a percentage (of the height of its containing element, e.g. '50%').

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

Alignment: sets the horizontal alignment of the cell(s) content.
Cell Type: for cells specified as 'header' cells, select type 'header', otherwise, for normal data cells, select type 'data'.
Vertical Alignment: sets the vertical alignment of the cell(s) content.
Scope: specified that the cell(s) should be a header the the selected option of cells. This option is deprecated and should not be used.
Width: the width of the cell(s). If this field is left blank then the width of the cell(s) will depend only on its content. Otherwise the width may be specified either as a number of pixels (e.g. '40px'), or a percentage (of the width of its containing element, e.g. '40%').
Height: the height of the cell(s). If this field is left blank then the height of the cell(s) will depend only on its content. Otherwise the height may be specified either as a number of pixels (e.g. '25px'), or a percentage (of the height of its containing element, e.g. '40%').
Class: For advanced users only. Shows any CSS classes that have been applied to the cell(s).

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

Type: the type of media defined by application.
File/URL: this is the location of the media on the internet that you want to link to. It can be (a) an absolute URL (e.g. 'http://www.google.com/'), or (b), a relative URL (i.e. media that resides on the same website). Relative URLs can be relative to the document root folder, or relative to the current page.
List: if you've uploaded any media via Jomatu then those media will appear in this pull-down list. Simply select the image from this list and the File/URL field will be populated automatically with the correct location.
Dimensions: the size of the media or the application that will play the media on the web page. The units are in pixels.

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.

Return to top^;
Previous manual: How to edit your website text;
Next manual: How to upload an image file;
Return to Wiki Index.

* 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.