Thiết kế web với joomla 1.6(5).x part 13 pdf

119
CHAPTER
Working with
Editors and Media
IN THIS CHAPTER
Using WYSIWYG editors
Exploring the Media Manager
Working with media files
T
o create attractive and usable articles in Joomla!, you need to have an
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.
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
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
Part II: Working with Content and Users
120
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.
Top row controls
In the default configuration, the top row of the editor bar includes a set of controls focused on font
formatting, styles, and alignment. The bar includes the following controls:
Chapter 6: Working with Editors and Media
121
l
Bold: Format text bold.
l
Italic: Format text italic.
l
Underline: Format text underline.
l
Strikethrough: Format text strikethrough.
l
Align Left: Align paragraph to the left.
l

Align Center: Align paragraph to the center.
l
Align Right: Align paragraph to the right.
l
Align Fully: Fully align paragraph.
l
Styles: Click to view and apply available styles.
l
Format: Click to view and select HTML formatting.
l
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:
l
Bullet List: Click to convert text to bulleted list.
l
Numbered List: Click to convert text to numbered list.
l
Decrease Indent: Click to decrease paragraph indentation.
l
Increase Indent: Click to increase paragraph indentation.
l
Undo: Click to undo the last action.
l
Re-do: Click to re-apply the previous action.
l
Link: Click to insert a link. Opens a pop-up window that allows you input the URL and
set parameters and attributes.
l

Unlink: Click to remove a link.
l
Insert Anchor: Click to insert an anchor point in the text. Opens a pop-up window that
allows you input parameters and attributes.
Note
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.
l
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.
l
Cleanup Code: Click this button and the system will attempt to clean up the HTML code
for the text in the window. This is generally used where you have copied the code into the
window from another source, like Microsoft Word. Copying formatted text from other
Part II: Working with Content and Users
122
applications often leads to unnecessary code appearing in your article; this tool helps
avoid that problem by eliminating the unnecessary code.
l
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.
l
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.
l
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.
l
Insert Date: Click to insert the current date.
l
Insert Time: Click to insert the current time.
l
Insert Smilie: Click to open a pop-up window containing an assortment of smilies you
can add to your article.
l
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.
l
Left to Right: Select some text and this control becomes active. Click it to change the text
orientation to Left to Right.
l
Right to Left: Select some text and this control becomes active. Click it to change the text
orientation to Right to Left.
l
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.
l
Move to Front: Click on a layer and then click this button to move the layer to the front
of the order.
l
Move to Back: Click on a layer and then click this button to move the layer to the back of
the order.

l
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.
l
Select Font Color: Click to open a palette window that allows you to select the color for
the font.
Bottom row controls
In the default configuration, the bottom row of the editor bar includes a set of controls focused on
tables and other miscellaneous controls. The bar includes the following controls:.
Chapter 6: Working with Editors and Media
123
l
Insert 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.
l
Remove Formatting: Highlight a segment of text and then click this icon to clear all for-
matting associated with that text.
l
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.
l
Subscript: Select text and click this icon to transform the text into lowered subscript.
l
Superscript: Select text and click this icon to transform the text into raised superscript.
l
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.

l
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.
l
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.
l
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.
l
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.
l
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.
l
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.
l
Table: Delete Row: Click in a table cell and then click on this button to delete the row
where the cell is located.
l
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.
l
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.

l
Table: Delete Column: Click in a table cell and then click on this button to delete the
column where the cell is located.
l
Table: Split Cells: Click in a merged table cell and then click on this button to split the
cell into its original cells.
Part II: Working with Content and Users
124
l
Table: Merge Cells: Select more than one table cell and then click this button to merge
the cells into one.
l
Toggle Full Screen Mode: Click this button to open the editing window in full screen
mode for easy editing.
l
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:
l
XHTMLxtras: Clicking the Show option for this Parameter adds to the Editor’s toolbar six
additional windows, including:
l
Citation: You can specify the styling for a citation.

l
Abbreviation: You can specify the styling for an abbreviation.
l
Acronym: You can specify the styling for an acronym.
l
Insertion: You can mark a change to the article as an insertion and add a date and
other relevant information.
l
Deletion: You can mark a change to the article as a deletion and add a date and other
elegant information.
l
Insert Attributes: You can add attributes to an object or text.
l
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.
l
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
/>Chapter 6: Working with Editors and Media
125
Simple 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.
Using the XStandard editor
The XStandard editor is an optional WYSIWYG editor for use in Joomla! 1.5.x. XStandard strives
to provide an editor that is simple to use and fully accessibility-compliant. The XStandard editor
generates code that is clean and complies with the XHTML Strict standard. The markup also meets
the stringent requirements of the most common accessibility standards. Unfortunately, to use the
editor, you must download and install the XStandard application on each machine that you want
to use to edit your Joomla! site content. The XStandard Lite interface is shown in Figure 6.3.
Part II: Working with Content and Users
126
FIGURE 6.3
The XStandard Lite editor interface.
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:
/>Installing XStandard
To install the XStandard editor in Joomla! 1.5.x, follow these steps:
1. Log in to the admin system.
2. Click on the option Plugin Manager under the Extensions menu. The Plugin Manager
loads.
3. Click to enable the plugin names Editor - XStandard Lite 2.0.
4. Access the Global Configuration Manager by clicking the option Global
Configuration under the Site menu. The Global Configuration Manager loads in your
browser.
Chapter 6: Working with Editors and Media
127
5. Select the option Editor - XStandard Lite 2.0 from the combo box by the option

Default WYSIWYG Editor, located on the Site tab.
6. Click Save.
7. 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

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:
l
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.
l
Separator: Inserts the HTML <HR> tag.
l
Hyperlink: Inserts a hyperlink to a web address.
l
Attachment: Inserts a link to a file for the user to download.
l
Directory: Opens a dialogue that allows you to insert articles and special characters.
l
Edit: Click to edit the HTML source code in a text editor format.
l
View Source: Click to view the source of the article.
l
Screen Reader Preview: Opena a preview of the article showing Screen Reader view.
l

Expand: Expand the editing window to full screen.
Bottom row controls
The bar includes the following controls:
l
Bold: Format text bold.
l
Italic: Format text italic.
l
Underline: Format text underline.
l
Strikethrough: Format text strikethrough.
l
Align Left: Align paragraph to the left.
l
Align Center: Align paragraph to the center.
l
Align Right: Align paragraph to the right.
l
Add Long Quotation: Click to indent the text.
l
Remove Long Quotation: Click to outdent the text.
Part II: Working with Content and Users
128
l
Numbered List: Click to insert a numbered list.
l
Bulleted List: Click to insert a bulleted list.
l
Undo: Undo a command.
l

Redo: Redo a command.
l
Insert Layout Table: Click to open a dialogue that enables you to set the properties of a
table and inset it into the article.
l
Insert Data Table: Click to open a dialogue that enables you to set the properties of a
table and inset it into the article.
l
Draw Layout Table: Click to draw a table by dragging the mouse to indicate the desired
number of rows and columns.
l
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:
l
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.
l
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.
The choice to work with or without the WYSIWYG tools is largely a matter of personal preference.
Although a slight performance improvement can be seen when working with the configuration set
to No Editor, it will not be an issue for the vast majority of users. For most, the convenience of
having the easy-to-use WYSIWYG formatting options far outweighs the inconvenience of a slight
delay in loading times.
Chapter 6: Working with Editors and Media
129
FIGURE 6.4
The article editing interface shown in Joomla! 1.5.x with Global Configuration set to No Editor.
Tip
If you have multiple content contributors, I 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.