Getting started with HTML Editor

Tutorial created by Ray Borduin, WebAssist

Categories: Dreamweaver, PHP

1 ratings | Sign in to rate this tutorial | View comments

next section

What do you need to start?

1. Dreamweaver CS4 or higher.
   
2. Site defined in Dreamweaver with a PHP web page containing a form field and optional CSS style sheet - Watch video tutorial: Setting up a site in Dreamweaver.
   
3. Optional: PHP connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.

next section

Prepare your form

You can apply the HTML Editor to an existing form or to a new PHP page. When applying to an existing form, you have the option to insert a new HTML Editor instance, or replace an existing text area with the HTML Editor toolbar.

1. In Dreamweaver, open your PHP web page that contains a form. The HTML Editor can be added wherever your cursor is placed.
   
   
   
   
   
2. From the Insert menu, choose WebAssist > HTML Editor > Insert Editor.
   
   
   

next section

Choose editor options

The HTML Editor includes three different presets so you will not have to spend too much time configuring settings. From the Editor preset option, choose one of the presets which can be inserted with just a few clicks of the mouse. .

1. No File Management: Does not provide options for uploading files.
   
   
   
   
   
2. Default Manager Enabled: Allows users to upload files.
   
   
   
   
   
3. Advanced Manager Enabled: Allows users to upload, manage, and edit files.
   
   
   

Alternately, if you'd rather not start with a preset, choose <New from blank> and follow these steps.

1. Specify a width and height.
   
   
2. Choose a background color for your HTML Editor interface from the menu. Choose the advanced option for custom colors.
   
   
3. From the Editor name menu, choose an existing text area to replace, or enter a name for the new instance.
   
   
4. If desired, enter a static Initial value for the field or choose the lightning bolt to specify a dynamic value.
   
   If you are replacing an existing text area that already has an initial value specified, this will be retained and you can leave the field blank.
   
   
   

next section

Customize editor options

The options available within the HTML Editor are fully customizable. The Editor Settings interface is broken down into four tabs for easy customization.

1. Next to the Editor preset menu, click on the pencil icon to customize the settings for your editor.
   
   
   

General:

The General tab includes the basic settings that can be changed for the HTML Editor. This includes options such as Document Type and Language as well as settings for image upload editing. Keep in mind, default settings are often sufficient.

1. Specify your desired Document type and Language.
   
   
2. Select Set focus on load if you wish the cursor to be placed within the HTML Editor when the page loads.
   
   
3. When Full page editing is checked, the editor is configured to handle entire pages vs fragments of content.
   
   
4. Choose Allow file upload if you wish to give users the ability to upload files when using the HTML Editor.
   
   
5. If selected, Show directories in File Manager will include the Directories panel within the File Manager allowing the user to navigate between subdirectories.
   
   
6. You can enter a subdirectory based on the upload directory that is specified in the Site Settings interface.
   
   This is based on the upload directory that is specified in the Site Settings interface.
   
   
   

Toolbar:

In the Toolbar tab you can customize the various buttons that appear on your toolbar.

1. Choose either Default or Basic from the Toolbar Options menu list.
   
   
2. Use the Add and Delete icons to further customize your Toolbar items.
   
   Keep in mind that the more items you include in a toolbar, the larger it becomes. Thus, a larger toolbar may need its height value adjusted in the General tab.
   
   
3. Use the Up or Down arrows to rearrange the order of items in your toolbar.
   
   
   

Formatting:

The Formatting tab configures default values, standards, and encoding options to handle the formatting of certain types of content. It also configures how to format content that is copied and pasted from another editing source.

1. Enter the number of spaces to be indented.
   
   
2. Select the behavior for Greek and Latin characters. Available options: No encoding, Encode Greek characters only, Encode Latin characters only, Encode both (default selection).
   
   
3. Checking the Encode HTML entities causes the editor to encode special characters, such as quotes and ampersands as HTML entities.
   
   
4. For Encode additional, enter a space separated list of characters that you would like to encode, regardless of the other encoding selections.
   
   
5. Check Plain text only to cause any formatting within pasted text to be removed and the content to be added to the editor as plain text. Checking this box also disables the Paste from Word toolbar button if it is added to the set of buttons for the editor toolbar.
   
   
6. Checking Keep structure from Word causes the editor to keep the HTML structure instead of the appearance of the Word text.
   
   
7. By selecting Check Spelling as you type, words that are not listed in the selected dictionary will be underlined in red.
   
   
8. Text Direction allows you to choose from Right to Left or Left to Right to suit the desired language.
   
   
   

Styling:

The Styling tab allows you to specify style sheets saved within your site that should be applied to the content that is being edited or created within the HTML Editor.

1. To add a style sheet:
   
   1. Click the Add icon.
      
   2. Choose the Style Sheet Browse option.
      
   3. Select the style sheet to use.
      
   4. Click OK.
      
   5. Repeat until you have added all the style sheets.
      
   6. Reorder style sheets as necessary.

   
   

   In most cases, you will want to apply the same style sheets that are applied to the page that the content will appear on. You can add as many style sheets as you like.
   
   
2. In the Body class menu, select the class name to apply to the body of the HTML Editor content.
   
   
3. Click on the Pencil icon to edit the options provided in the Styles menu that appears in the HTML Editor toolbar.
   
   
   
   
   
4. Click OK when you have customized all the settings for your editor.
   
   You will be prompted to save an optional preset. Saving your settings in a preset allows you to re-use them at a later date.

next section

File manager and security settings

The File Manager feature that is included with HTML Editor allows you to insert an advanced file manager interface for uploading files and providing image editing features such crop, re-size, and rotate. In order to include this feature, a MYSQL database connection is required. Changes made within the File Manager interface are global and apply to all HTML Editor instances within the specific Dreamweaver site.

File Manager:

If you selected a preset that includes file uploading or advanced image editing, you will need to configure these site settings before exiting the HTML Editor interface.

1. In the Upload directory menu, choose the directory where you will upload your File Manager files. You can also specify sub directories of this directory.
   
   This directory needs to have Read/Write/Execute permissions set in order for all the File Management features to work.
   
   
2. For Connection, select the MySQL database connection that you are using with your website.
   
   In order to include this feature, a MYSQL database connection is required. Click Define if you have not created a database connection.
   
   
   

Security:

It is important to configure Security settings to control who can access the File Manager and modify uploaded files.

1. Click Access Rules to select who will be provided access to the File Manager.
   
   
2. From the Failed Redirect field, choose the page that users will be redirected to if they have not been provided access to the File Manager.
   
   
   
   
   
3. Once all the settings are configured, click OK.
   
   
4. When you are ready to add the HTML Editor to your page, click OK.
   
   
   
   
   
5. Save (Ctrl or Cmd + S) and preview your page (File > Preview in Browser).
   
   
   

Re-enter HTML Editor interface

The HTML Editor interface can be accessed at any time to make additional changes to the appearance or functionality of your editor.

1. Click to select the placeholder graphic.
   
   
   
   
   
2. In the Properties Inspector, choose Edit.
   
   
   
   
   
3. Now you can re-enter the HTML Editor interface to make additional changes.
   
   
   

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

1 ratings | Sign in to rate this tutorial