Free: Using Advanced HTML Editor to Create a Content Management System Support

In this free, 20 page tutorial, Matt Machell shows you how to use Dreamweaver server behaviours and the DMXzone Advanced HTML Editor extension to build a password-protected Content Management Solution for a web site, that allows normal users to read news or text or whatever you choose to put on your site, while users with the correct password can add or amend the text using an intuitive word processor-like administration system - so your clients can maintain their own web sites without having to know HTML and without risking breaking the look and feel of the site!

Because Matt's using the extension and built-in server behaviours, there's no handcoding involved, so matt shows you how to use it using both ASP and PHP.

Making the news_add.asp Page

Now we're ready to play with our Advanced HTML editor extension. Open up the news_add.asp page ,  set the page title to “Add News”, add a suitable heading and attach the main.css stylesheet using the link method.

In the Insert panel click the form elements tab. Add a form to the page and call it addnews. Now, at the very end of the forms section of the insert panel is our Advanced HTML Editor. Click the button and the editor will appear on the page. You'll get a warning notifying you that several folders have been added to your site, and not to forget to upload them. If you forget to upload them, then the news application won't work!

These folders contain the scripts used to control the HTML editor. If you look in the Files Panel you should see new folders called AdvHTML_Images, AdvHTML_Popups and ScriptLibrary.

If you click on the editor and have the Properties panel open, you'll see all the options available for the editor:

The top of the panel are the items form element name, width, height, language, style and initial value. These can be used to set the visual appearance of the editor to fit in with your site. There's also an advanced button, but we'll ignore this for now.

I'm going to use the metal style, which gives a clean metallic look. I'll also set the size of the editor to 300px by 100px, since we want our news items to be relatively small. I've set the name of the editor to news_item.

At the bottom of the properties panel are the various HTML options you can allow users to set in the editor. Initially they can add anything, but you want to be careful about this. Consider how each of the options could be used to break the look of you site. For example, if you've used Verdana all over and users have the option to change the font to Times, then things are going to start looking messy.

To disable an option in the editor, just click the relevant area of the properties panel. I'm going to disable the font-name, font-size, alignment, horizontal rules, text color and background color options (see screenshot below). If the users want to change things they'll have to make use of the styles I've defined in main.css.

If I wanted I could also disable lists, indenting, searching, the character map, hyperlinks, images, tables, subscript, superscript, underline, strikethrough, bold, italic, the option to cleanup formatting , cleanup the font tags, word cleanup and switch to HTML view. There are a lot of options, so I'd recommend having a play with them to see which are most suitable for your site.

Standards compliance-minded among you will be happy to learn that the editor uses strong and em tags for its bold and italic. It also degrades to a normal textarea in browsers that it's not compatible with (it only works in Internet Explorer 5.5 and up at the moment)

Now that we have the editor sorted, we'll add a dropdown box with the label viewable and the options y and n, and a submit button.

Next, go to the Server Behaviors panel and add another Restrict Access to Page behavior, exactly the same as before.

Now, we're going to add an insert Record Behavior, so that we add our news item to the database when we submit the form. Click + > Insert Record, and fill the dialog in with the details shown below:

 Our page should now look something like this:

If everything has gone according to plan, when you test the page you should be able to add new items to the news, and they will appear on the list of our main, news_admin.asp page. Note that we don't have to add the date, since the table's default will set it automatically when we insert the record.