HTML Editor includes two main features, the HTML Editor text editor instance and the standalone file manager feature. This guide shows you how to insert each of these features to your page.
You will need the following items before starting this tutorial:
- Dreamweaver CS3 or later
- HTML Editor 3
- PHP form
- Optional – SecurityAssist (if applying security to file management)
Installing your extension
The first step to getting started with your purchase is to install your extension. All WebAssist Dreamweaver extensions are installed through the Adobe Extension Manager. Please refer to the Installing WebAssist extensions tutorial.
Define a site in Dreamweaver
Before you can use HTML Editor you will need to have defined a site in Dreamweaver so that the extension knows where to save the various files it creates. Please refer to the Define a dynamic site in Dreamweaver tutorial.
Preparing your form
In most cases, you will find it easier to apply HTML Editor to a form that already functions as desired. The HTML Editor instance or the standalone file manager will either replace a form element that you specify, or add the text editor where the cursor is placed on your form.
Before launching any of the HTML Editor interfaces, open your form in Dreamweaver, and place your cursor where you wish to insert the feature, or select the form element that you wish to replace. Continue with this tutorial for instructions on how to add the desired functionality.
You can insert an HTML Editor instance to any PHP form that you have on your site. This feature is most commonly used
To help speed up the process, HTML Editor includes 2 different presets that will automatically choose the optimum settings for you.
- No File Management: Does not provide options for uploading or editing files.
- File Management Enabled: Allows users to upload files and edit images that have been uploaded to the server.
Using these presets will help get you started on the right track to inserting the toolbar you desire. With a preset selected, you can still customize the style to your liking.
- From the WebAssist menu choose Forms > HTML Editor > Insert Editor.
- From the Editor preset option, choose a preset you wish to start with. If you don't want to start with a preset, choose <New from blank>.
- From the Skin menu, choose a skin that you would like to use.
The default skin allows you to choose an interface color that will change the appearance of the editor.
- Specify a width and height.
- Use the interface color swatch to select a color you would like to use as the background of the HTML Editor toolbar.
This color will only be applied when using the Default skin.
The interface color option also changes the color of the File Manager interface. Since the File Manager only includes the Default skin, this color change will take effect even if your HTML Editor skin is not set to Default.
- From the Editor Name menu, enter a name for the new instance.
If you had selected a form element prior to launching this interface, the Editor Name field will be pre populated with this name.
- 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.
- From the Styles list preset menu, choose a Styles List preset you would like to use, or leave the default entry to have a new Styles list created for you.
The Styles List is the "Styles" dropdown menu that can be included with the toolbar. You can click the Edit option to add custom entries to this dropdown for your users to take advantage of.
From the Styles list preset menu, choose a Styles List preset you would like to use, or leave the default entry to have a new Styles list created for you.
The Styles List is the "Styles" dropdown menu that can be included with the toolbar. You can click the Edit option to add custom entries to this dropdown for your users to take advantage of.
If you chose the File Manager Enabled preset, you will need to configure your database settings so that the instance can add the necessary database information for handling the file upload and image editing capabilities.
The options available within the HTML Editor are fully customizable. The Editor Settings interface is broken down into 4 tabs for easy customizing. To launch the Editor Settings interface, click the Edit button next to the Editor preset menu in the main HTML Editor interface.
- General: Provides options for Doctype, Language, and File Upload.
- Toolbar: Allows you to add/remove the different options from the HTML Editor toolbar.
- Formatting: Includes settings for formatting text and checking spelling.
- Styling: Allows you to specify CSS style sheets to be applied to the text editing and Styles menu.
The following section will outline how you can use each tab to customize your HTML Editor instance.
For more specific details on the functions provided by each option, click the Help button from within the user interface.
Step 1: General Tab
After clicking the Edit button next to the Editor preset menu, you will be taken to the General tab of the Editor Settings interface.
- Specify your desired Document Type or Language The default settings will work for most users.
- Select set focus on load if you wish the cursor to be placed within this HTML Editor instance when the page loads.
- Choose Allow file upload if you wish to include a File Manager instance with the editor.
This will allow your users to upload images or files into the HTML Editor instance as well as edit any images that have already been uploaded.
If enabled, you will be required to configure your database details before you can insert this HTML Editor instance.
- Choose Show directories in File Manager if you want your users to be able to navigate to other directories to upload images on the server.
- Choose the Toolbar tab to customize your toolbar options.
Step 2: Toolbar Tab
In the Toolbar tab you can customize the various buttons that appear on your toolbar.
- Choose either Default or Basic from the menu list.
These two options provide a different set of toolbar buttons to allow you to quickly jump to a toolbar preset that would be most desirable.
- Further customize your toolbar options by selecting Add or Delete to add more items, or remove items. The more items you include in your toolbar, the larger the toolbar becomes. You may need to adjust the height value in the General tab to accommodate for larger toolbars.
- Use the Up or Down arrows to rearrange the order of items in your toolbar.
- Select the Formatting tab.
Step 3: Formatting Tab
Settings in the Formatting tab are optional, but may be useful for ensuring that your editor enters data into your database as desired.
Here we will address a few of the most commonly used formatting features.
More details regarding each option can be found be selecting the Help button from the user interface.
- From the Greek and Latin menu, choose how the content should be encoded.
The default setting, No encoding, should work for most users.
- Choose the Keep structure from Word option if you are providing the paste from Word button to your toolbar.
- Under Additional Settings, choose if you would like to have the instant spell checker enabled for checking spelling as the user types.
- Choose the Styling tab once you have selected all your options.
Step 4: Styling Tab
In the newest version of HTML Editor, the Styling tab has been enhanced to provide a much greater set of options for applying CSS style sheets to your HTML Editor instance. Specifically, you can apply the CSS style sheets that are used on your website to the HTML Editor text area, allowing your user to see the content they are editing as it would appear on the website.
Additionally, the Styling tab includes access to the Styles menu editor where you can customize the Styles list to include any styles or attributes that your users would find useful.
- Click Add to add a style sheet.
- Click the Style sheet browse option and browse and select the style sheet to apply.
- Repeat steps 1 and 2 until you have added all the CSS style sheets that apply to content on your website.
- In the Body class menu, choose the class you wish to use for the default text.
- To customize the Styles list, click the Edit button at the bottom of the Styling tab.
For more information on using the Styles List interface, see the Styles List section below.
- Click OK when you have customized all the settings for your editor.
You will be prompted to save a preset if desired. Saving your settings in a preset allows you to use these settings at a later date, saving you time.
Step 5: Customizing the Styles List
This interface has been included so that you can provide your users with CSS styles and attributes that they can apply to the content they are editing.
You will need to make sure that the Styles List has been included in the HTML Editor toolbar from the Toolbar tab of the Editor Settings interface.
- Click Add to create a new entry in the Styles list.
- In the Name field, enter a desired name for this entry.
- From the Element menu, choose the type of element this should apply to.
- With the entry selected, use the options below to add attributes or styles for that entry.
You can add as many styles or attributes to a single entry as desired.
The default entries in the Setting and Value fields have been provided to help guide you through adding the styles you desire.
- Click OK when you are ready to save these changes.
- After clicking OK, you will be asked to enter a Reference Name for this Styles List preset. This allows you to select this Styles List when creating other HTML Editor instances.
The custom Styles Lists that you create can be shared with all HTML Editor instances on your site, specific to only one HTML Editor instance, as well as copied from HTML Editor presets that you have saved for other sites you have created.
- Share: From the dropdown menu provided at the top of this interface, choose the reference name of the Styles List preset you would like to share.
- Import: Click the Import button if you wish to import entries from an HTML Editor instance that exists on your site (without sharing) or choose a preset that you have created previously.
You have now configured all the settings for your HTML Editor instance. When you click OK on the main HTML Editor interface, the instance will be inserted to your page and the necessary files will be copied to your site.
If you selected to include file upload capabilities, you will need to configure your database and security in the Site Settings interface. This interface will appear after clicking OK on the main HTML Editor interface.
For more information on configuring this, see the Database and Security section of this tutorial.
The standalone file manager instance allows you to add an enhanced file upload feature to your form that includes the file manager for editing images.
- Place your cursor on your form where you wish to insert the file manager.
Alternatively, you can select an existing form element to replace.
- From the WebAssist menu choose Forms > Insert File Manager.
- Select Show directories in File Manager if you wish to allow your users to navigate to different sub directories.
- Enter the sub-directory you would like to have the files uploaded to when using this file manager instance.
This will be a sub-directory of the main directory you specify when configuring the Site Settings.
- In the Field Name field, enter a name for the field.
- Enter an initial value for the field, or choose the value lightning bolt to specify one dynamically.
- Click the Edit icon to configure your database and security settings.
For more information on configuring this, see the Database and Security section of this tutorial.
- Once you have configured your database and security settings, click OK to insert the file manager to your page.
If you have chosen to include file upload with the HTML Editor instance, or you are inserting a standalone file manager instance, you will need to provide the details for your database, and configure security to prevent malicious image editing or upload.
Step 1: Database details
- When clicking OK to complete either the HTML Editor instance, or the File Manager instance, you will be prompted to configure your Site Settings.
- On the File Manager tab, you can specify the following settings:
- Upload directory: This is the directory on your server where images will be uploaded.
This is the base directory for any sub directory you may have specified on the General tab of the Editor Settings.
- Connection: Choose the database connection you wish to use.
If you have not configured a database connection yet, click Define to specify one now.
- Move to the Security tab to start configuring security.
Step 2: Security
HTML Editor integrates with existing SecurityAssist security so that you can restrict access to the File Manager only to those who you have specified permissions through SecurityAssist. If you do not have SecurityAssist, or have not applied security to your website, it is strongly suggested that you do this so that you can prevent unwanted visitors from uploading or modifying files.
- On the Security tab any SecurityAssist access groups that you have created will be listed in the tree control.
- Select the groups that you wish to provide access to the File Manager.
- In the Failed Redirect field, specify a page that you would like users who are not in the permitted groups to be directed to.
- Click OK to save your settings.
Requirements
Print tutorial
