Working with
Editors and Media
understanding of the various Editor and Media Management options Joomla! provides a number of article-editing choices The system is bundled with a very good WYSIWYG editor, TinyMCE Alternatively, you can choose to download and install the XStandard Lite editor Finally, for those who prefer to work without an editor, you can also create content directly in HTML with only a text editor interface
TT: create attractive and usable articles in Joomla!, you need to have an
In addition to the editing tools, Joomla! is also bundled with a Media Manager that enables you to add and manage the media files in your web site without having to use an FTP folder By using the editors in conjunction with the Media Manager, you can add images or other files to your articles quickly and easily, as I explain later in this chapter
Using WYSIWYG Editors
Z Ụ
IN THIS CHAPTER Using WYSIWYG editors Exploring the Media Manager Working with media files
WYSIWYG is an acronym for What You See Is What You Get The term is used to describe content-editing tools that let you view your text formatting as you work The interface for most of these tools is similar to what you might find in a typical desktop word processing tool, such as Microsoft Word
WYSIWYG editors are easy to use and one of the most popular features of content management systems Joomla! creators recognized the importance of the WYSIWYG editor and installed an excellent open source editor known as TinyMCE Joomla! 1.5.x also includes an alternative: the XStandard Lite edi- tor Although XStandard Lite requires an additional download and a change
Trang 2Part Il: Working with Content and Users
in configuration, for some users it is the preferred option Both editors are discussed in the follow-
ing sections
Using the TinyMCE editor
TinyMCE is a full-featured WYSIWYG editor with a number of configuration options that allow the site administrator to tailor the interface to suit the particular needs of the site As you can see in Figure 6.1, the interface with its multiple toolbars above the content window is not dissimilar to what you might see in a desktop word processer The tool works exactly the same as a desktop word processing application and enables you to view your work as you go
TinyMCE is enabled in the default configuration FIGURE 6.1 The default TinyMCE editor interface In the default system, the editor is in Advanced mode aan Joomla 1.5.10 - Administration oto ttp://localhost:8888/joomlal5 10/administrator/index.php?option=com_c a = is 1 \ Logou: ` ` a) @ t Tive Pupished lo Ye State Publish Alia Hits Alas No = = Revised Sectior Uncategor sed ategerised Created Modified BiUs|\| 3222322 )- rma’ F mi =4= = i d t — ¿ x x 4 Done 2 YSiow Z
Top row controls In the default configuration, the top row of the editor bar includes a set of controls focused on font
Trang 3Bold: Format text bold Italic: Format text italic
Underline: Format text underline Strikethrough: Format text strikethrough Align Left: Align paragraph to the left Align Center: Align paragraph to the center Align Right: Align paragraph to the right Align Fully: Fully align paragraph
Styles: Click to view and apply available styles Format: Click to view and select HTML formatting Font Family: Click to view and select font Middle row controls
In the default configuration, the middle row of the editor bar includes a set of controls focused on the insertion and formatting of various elements The bar includes the following controls:
Note
Bullet List: Click to convert text to bulleted list Numbered List: Click to convert text to numbered list Decrease Indent: Click to decrease paragraph indentation Increase Indent: Click to increase paragraph indentation Undo: Click to undo the last action
Re-do: Click to re-apply the previous action
Link: Click to insert a link Opens a pop-up window that allows you input the URL and set parameters and attributes
Unlink: Click to remove a link
Insert Anchor: Click to insert an anchor point in the text Opens a pop-up window that allows you input parameters and attributes
Anchors are used to mark places inside an article that can be hyperlinked This allows you to add accelerators to an article, providing a way for the user to jump to a specific place in the article by clicking on a link
Insert Image: Click to open the Insert Image dialogue, which allows you to add an image to an article Discover the path information for your image file by using the Media
Manager
Trang 4Part Il: Working with Content and Users
applications often leads to unnecessary code appearing in your article; this tool helps avoid that problem by eliminating the unnecessary code
e Toggle HTML Mode: Click to switch from the WYSIWYG interface to a straight text edi- tor, allowing you to edit the content and formatting in plain HTML Click again to return to the WYSIWYG editor
e Find: Click to open a window containing the Find and the Find and Replace controls This control opens the same window as the Find and Replace control , but its shows a dif- ferent tab on the resulting window
e Find and Replace: Click to open a window containing the Find and the Find and Replace controls This control opens the same window as the Find control , but its shows a differ- ent tab on the resulting window
@ Insert Date: Click to insert the current date @ Insert Time: Click to insert the current time
e Insert Smilie: Click to open a pop-up window containing an assortment of smilies you can add to your article
e Insert Embedded Media: This control enables the easy insertion of embedded media
files, such as Flash, Quicktime, Shockwave, Windows Media, and Real Media Click the
button to open the insertion dialogue Click on the Advanced tab in the pop-up window to see additional controls used for Flash files
e Left to Right: Select some text and this control becomes active Click it to change the text orientation to Left to Right
e Right to Left: Select some text and this control becomes active Click it to change the text orientation to Right to Left
e Insert New Layer: Click to insert a new layer Click and drag the shape to alter the height and width You can also edit the new layer by clicking on the HTML button and then changing the CSS for the layer directly The order of the layer can be changed by using the next two controls
@ Move to Front: Click on a layer and then click this button to move the layer to the front of the order
@ Move to Back: Click on a layer and then click this button to move the layer to the back of the order
e Absolute Position: Click to toggle absolute positioning of the elements in the article This control is most useful for controlling the formatting of articles that contain multiple layers e Select Font Color: Click to open a palette window that allows you to select the color for
the font
Bottom row controls
Trang 5Insert Horizontal Rule: Click to insert a horizontal rule at the location of the cursor in the text The rule is created with the HTML tag HR and can be controlled by the styling set for that tag Note that this tool is very similar to the Insert Horizontal Rule control Remove Formatting: Highlight a segment of text and then click this icon to clear all for- matting associated with that text
Toggle Guidelines: If your article is using any invisible elements, for example, multiple layers, click this icon to make the boundaries of the object visible and allow you to work with the object more easily
Subscript: Select text and click this icon to transform the text into lowered subscript Superscript: Select text and click this icon to transform the text into raised superscript Insert a Custom Character: Click to open a window containing a list of the custom char- acters available in the system Click on a character in the pop-up window to insert it into the article
Insert Horizontal Rule: Click to open a window that allows you to specify the width, height, and styling of a horizontal rule Note that this tool is very similar to the Horizontal Rule control
Insert a New Table: Click to insert a table into the article A pop-up window opens that allows you to define the basic characteristics of the table If you want to edit an existing table, click on the table and then click on this button to open the pop-up window for editing
Table: Row Properties: Click in a table cell and then click on this button to open a pop- up window that allows you to edit the characteristics of the row where the cell is located Table: Cell Properties: Click in a table cell and then click on this button to open a pop- up window that allows you to edit the characteristics of the table cell
Table: Insert Row Before: Click in a table cell and then click on this button to insert a
new row of empty cells above the row where the cell is located
Table: Insert Row After: Click in a table cell, then click on this button to insert a new
row of empty cells below the row where the cell is located
Table: Delete Row: Click in a table cell and then click on this button to delete the row where the cell is located
Table: Insert Column Before: Click in a table cell and then click on this button to insert
a new column of empty cells before the column where the cell is located
Table: Insert Column After: Click in a table cell and then click on this button to insert a
new column of empty cells after the column where the cell is located
Table: Delete Column: Click in a table cell and then click on this button to delete the column where the cell is located
Trang 6Part Il: Working with Content and Users
e Table: Merge Cells: Select more than one table cell and then click this button to merge the cells into one
e Toggle Full Screen Mode: Click this button to open the editing window in full screen mode for easy editing
® Edit CSS Style: Click to open a set of controls that let you tailor the styling of the text Cross-Reference
A number of the options outlined above can be turned off by editing the settings in the TinyMCE Plugin The Plugins are discussed in Chapter 19
Optional features
The TinyMCE Editor is powered by a plugin The plugin is named Editor - TinyMCE 2.0 and can be accessed under the Plugin Manager The plugin includes a number of parameters that dictate in part what controls are visible to the users of the editor In addition to the controls discussed previ- ously, several more are hidden in the default configuration
Under the Plugin Advanced Parameters tab several optional features can be turned on for users: e XHTMLxtras: Clicking the Show option for this Parameter adds to the Editor’s toolbar six
additional windows, including:
e Citation: You can specify the styling for a citation
e Abbreviation: You can specify the styling for an abbreviation e Acronym: You can specify the styling for an acronym
e Insertion: You can mark a change to the article as an insertion and add a date and other relevant information
e Deletion: You can mark a change to the article as a deletion and add a date and other elegant information
e Insert Attributes: You can add attributes to an object or text
e Template: If the Parameter is set to Show, the users can choose from a set of predefined content templates for use in the article Note that no default templates are in the system, so if you want to use this feature you must also define the templates
e Element Path: Toggling the Element Path Parameter to On adds an accessibility feature to the editor When Element Path is active, the bottom bar below the editing window shows the name of the HTML elements as you move the cursor in the article This is intended as an aid to those using keyboard navigation
Note
If you want to enable the templates feature in your TinyMCE editor, take a look at the documentation for that
feature, as it is rather involved Visit
Trang 7Simple Mode
Simple Mode is an optional setting for the TinyMCE Editor In Simple Mode, the editor interface
includes only nine buttons: Bold, Italic, Underline, Strikethrough, Undo, Re-do, Cleanup Code, Bullet List, and Numbered List
Figure 6.2 shows the Simple Mode interface
FIGURE 6.2
The TinyMCE Editor interface in Simple Mode Note that by default, the Simple Mode toolbar appears
below the editing window
an00 Joomla 1.5.10 - Administration
T 3] http: //localhost:8888 /joomlal5 10/administrator/index.php?option=com_¢c
a sy Iq il II
o Ye YSiow 1.084s Z
Using the XStandard editor
Trang 8Part Il: Working with Content and Users FIGURE 6.3 The XStandard Lite editor interface aan Done Joomla 1.5.10 - Administration GB http: / /localhost:8888 /joomlal5 10 /administrator/index.php?option=com_c | 0 12 © Logou: 2 WB YSiow 6.3865 Z Joomla! 1.6
Joomla! 1.6 does not come preconfigured to support the XStandard editor Although it is possible to install it, you will need to do a complete manual installation, following the instructions on the developer’s web site: http://www.xstandard.com/
126
Installing XStandard
To install the XStandard editor in Joomla! 1.5.x, follow these steps: Log in to the admin system
Click on the option Plugin Manager under the Extensions menu The Plugin Manager loads
Click to enable the plugin names Editor - XStandard Lite 2.0
Access the Global Configuration Manager by clicking the option Global
Configuration under the Site menu The Global Configuration Manager loads in your
Trang 9Select the option Editor - XStandard Lite 2.0 from the combo box by the option
Default WYSIWYG Editor, located on the Site tab Click Save
Download the XStandard Lite component from the developer’s web site and install it on the machine you plan to use for editing your Joomla! site Note that you must install the version relevant to your local machine’s OS Visit http: //xstandard.com to download the editor’s files
The XStandard controls
The control and formatting options for the XStandard Lite are simpler than those for the TinyMCE editor All controls are laid out in two rows at the top of the editing window
Top row controls
The bar includes the following controls:
Styles: Opens a combo box containing a list of styles Apply a style by selecting the text first and then clicking to select the style
Separator: Inserts the HTML <HR> tag
Hyperlink: Inserts a hyperlink to a web address
Attachment: Inserts a link to a file for the user to download
Directory: Opens a dialogue that allows you to insert articles and special characters Edit: Click to edit the HTML source code in a text editor format
View Source: Click to view the source of the article
Screen Reader Preview: Opena a preview of the article showing Screen Reader view Expand: Expand the editing window to full screen
Bottom row controls
The bar includes the following controls: Bold: Format text bold Italic: Format text italic
Trang 10Part Il: Working with Content and Users
e Numbered List: Click to insert a numbered list e Bulleted List: Click to insert a bulleted list ® Undo: Undo a command
e Redo: Redo a command
e Insert Layout Table: Click to open a dialogue that enables you to set the properties of a table and inset it into the article
e Insert Data Table: Click to open a dialogue that enables you to set the properties of a table and inset it into the article
@ Draw Layout Table: Click to draw a table by dragging the mouse to indicate the desired number of rows and columns
@ Draw Data Table: Click to draw a table by dragging the mouse to indicate the desired number of rows and columns
Configuration options
The XStandard Editor is powered by a plugin named Editor - XStandard Lite 2.0 that includes a parameter that allows you to switch between different configuration modes The default mode pro- vides the WYSIWYG editor interface and the toolbars previously outlined Two other options are available:
@ Source: When this option is selected, the users of the editing window see a very different toolbar with a source editing window The Source toolbar includes only nine options, many of them concerned with the visibility of the source in the editing window
e Screen Reader: Select the Screen Reader option to start the editor with the Screen Reader launched Note the toolbars displayed in this configuration option are the same as those shown in the default setting
Working with the No Editor option
It is possible to work directly with the HTML source behind the article by selecting the HTML edit- ing option on either of the WYSIWYG editors, or by selecting the option No Editor in the Global Configuration Manager In any event, the result is a plain text-editing window that enables you to type HTML formatting tags directly into the window, as shown in Figure 6.4
Trang 11FIGURE 6.4
The article editing interface shown in Joomla! 1.5.x with Global Configuration set to No Editor
an00 Joomla 1.5.10 - Administration
3 http: //localhost:8888 /joomlal5 10/administrator/index.php?option=com_¢c Done o Ye YSiow 0.549 Z Tip
If you have multiple content contributors, | recommend that you enable at least one of the WYSIWYG editors and set it to the default role Those users who prefer to work with the HTML code can always toggle the view to show the HTML editing window Also, do not forget that it is possible to allow registered users to select which editor they can use and therefore it may be desirable to enable more than one This ability only applies to users assigned to the group Authors or higher
Cross-Reference
Enabling the ability for users to select their preferred editor is discussed in Chapter 11
Overview of the Media Manager
The Media Manager provides Joomla! site administrators with the ability to add images and other media files to the system and to help keep those files organized After you have added the files to the system, you can use the Media Manager to preview images and discover the paths to files so that you can insert them into the articles on your site