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

CHAPTER Working with Editors and Media 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 editor Although XStandard Lite requires an additional download and a change 119 IN THIS CHAPTER Using WYSIWYG editors Exploring the Media Manager Working with media files Part II: Working with Content and Users in configuration, for some users it is the preferred option Both editors are discussed in the following 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: 120 Chapter 6: Working with Editors and Media 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 121 Part II: 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 l Toggle HTML Mode: Click to switch from the WYSIWYG interface to a straight text editor, 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 different 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 different 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: 122 Chapter 6: Working with Editors and Media 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 formatting 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 characters 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 popup 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 popup 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 123 Part II: Working with Content and Users 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 previously, 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 http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template 124 Chapter 6: Working with Editors and Media 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 125 Part II: Working with Content and Users 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 a complete manual installation, following the instructions on the developer’s web site: http://www.xstandard.com/ 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 126 Chapter 6: Working with Editors and Media 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: 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 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 127 Part II: Working with Content and Users 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 provides 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 editing 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 128 Chapter 6: Working with Editors and Media 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, 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 129 ... edit your Joomla! site content The XStandard Lite interface is shown in Figure 6.3 125 Part II: Working with Content and Users FIGURE 6.3 The XStandard Lite editor interface Joomla! 1.6 Joomla! ... installation, following the instructions on the developer’s web site: http://www.xstandard.com/ Installing XStandard To install the XStandard editor in Joomla! 1.5.x, follow these steps: Log in to the admin... 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