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

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.. e Insert Smilie: Click to open

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

119

Part 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:

`

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

formatting, styles, and alignment The bar includes the following controls:

Bold: 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

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

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:

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

Table: Split Cells: Click in a merged table cell and then click on this button to split the cell into its original cells

Part 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

http: //wiki.moxiecode.com/index.php/TinyMCE: Plugins/template

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

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

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 Il: Working with Content and Users

FIGURE 6.3

The XStandard Lite editor interface

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

browser

Select 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

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

Add Long Quotation: Click to indent the text

Remove Long Quotation: Click to outdent the text

Part 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

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