Replacing a Standard Textarea with a Rich Text Editor

Now it’s time to make the staff that will work to update the site happy. Instead of learning HTML, they’ll put their Word knowledge to good use, as the textarea will turn into something much friendlier—an HTML online editor.

Figure 32. Final editing page

Before starting to replace the textarea with KTML Lite, make sure you have the extension installed.

An extension is a tool that can be added to Dreamweaver to bring greater functionality and enhance its capabilities. Extensions can vary from small HTML programs to complex Java applications. Their purpose is to reduce areas of manual coding, and minimize repetitive tasks in order to increase productivity.

You can install and manage extensions using Macromedia Extension Manager, an accessory to Dreamweaver. Extensions are usually delivered as executable MXP files. Just run them and Extension Manager will initiate the installation. You can find a lot of extensions on the Dreamweaver Exchange, the biggest repository for extensions on the web.

The steps to follow in order to enhance the page are:

1. Open the edit.php page.
2. In the Application panel click the Server Behaviors tab to open it.
3. Click on the textarea to select it.

4. In the Server Behaviors tab click the Plus (+) button > KTML 4 > KTML 4 Lite

   

   Figure 33. Apply the KTML 4 Lite Server Behavior

5. The KTML 4 Lite server behavior has four sets of options that you can use to configure the editor to suit your needs: editor size, toolbars, buttons, security permissions, and more.

6. In the Basic tab, set primary editor options:

   

   Figure 34. Configure the Basic options

1. In the Apply to field pop-up menu, select the form field to replace.
2. In the Width text box, enter 650. For the Height, enter 500. These are the dimensions, in pixels, of the editor area.
3. The KTML editor allows you to format content using CSS styles. To maintain consistency, use the same CSS stylesheet as the rest of the site, that is, the one that comes with the Starter Page you used. Click the Browse button and select the CSS file in the site root: mm_travel2.css.
4. KTML allows users to upload images, movies, and documents on the server and insert them in their pages. In the Files upload folder and Media upload folder text boxes, you can specify where to store the uploaded files. Leave these settings at their default values. These folders will be automatically created for you when first accessed.
5. In the Show toolbar pop-up menu, select On load. This way, the toolbar will display as soon as the editor loads.
6. In the Show property panel pop-up menu, select Yes.

7. In the Toolbars tab, configure which toolbars and buttons will display:

   

   Figure 35. Configure the editor toolbars

1. In the Toolbar presets pop-up menu, you can select which predefined configuration of buttons you want to use.
2. Using the grid you can add or remove toolbars from the current configuration. For each selected toolbar, you can use the checkboxes to display or hide buttons.

8. In the Security tab, define file upload restrictions:

   

   Figure 36. Configure security settings

1. In the Allowed document types and Allowed media types lists, specify the file extensions that can be uploaded to the server.
2. In the Maximum file size text box, you can enter the maximum allowed size for uploaded files.
3. In the Strip server location, select whether the full server path will be used for links or not.

9. When you’re done configuring all options, click OK to close the user interface and apply the changes. A translator—a scale image that represents the editor displays instead of the textarea:

   

   Figure 37. KTML translator replaces the textarea

If you follow the same steps as when first testing the edit page, you will see that it is now much easier to edit content:

Figure 38. Edit the destination details visually!

The KTML editor workspace consists of the toolbar section: on top, the main editing area, and the Property inspectors area.

There are several toolbars available in KTML, for text formatting, editing, for inserting form elements or links, images and tables. Hovering the mouse over each button will display a quick tip on its function.

The Property inspector area will display additional options for supported elements, allowing more in depth settings. The options displayed vary based on the selected element.

Now you have finished with the hard work, and you can have a little fun editing the demo destination. This way, you will learn how to use some of the editor’s features.