ASP and JavaScript WYSIWYG Editor

Introduction

Most people who have been visiting our site for a while have probably noticed that we're not much for designing great user interfaces. It's possible that you might even think that we don't care. Well nothing could be further from the truth.

The main reason we don't spend much time on making our scripts emit "pretty" code is not that it can't be done, but simply because we're trying to teach people about a server-side technology. Now there's nothing that says you can't use ASP with JavaScript or CSS, but for the beginning user it's just something else they have to worry about. When you don't understand how the records are getting from a database into an HTML table, having a pretty border around that table doesn't help in the least and can actually make things more confusing by adding more HTML to look at when you're troubleshooting.

I only mention this because it's possible that because we don't tend to spend time making the UI of our scripts pretty, one could think we feel UI design is unimportant. As I mentioned earlier this is not the case and now for the reason I got off on this rant. One of our visitors has sent in a great example of a piece of code that not only makes editing HTML on a web page easier, it has a great looking UI. So enough rambling...

Darren's Email

Hi John,

Here is another application.

It is an ASP and javascript IE WYSIWYG editor. It allows a user's input to be much richer without having to add any server side controls. It is part of a Content Management App that I'm working on.

I've also attached the HTML javascript version for comparison. This would probably be useful to your viewers. It shows how to combine multiple HTML pages into a single ASP page as well as working with clent side javascript (all of the quotes) from within ASP.

Darren

The Readme

The following is included in the zip file download in PDF format, but for those of you still debating downloading it...

IE WYSIWYG Editor

This script is useful if added to a form or integrated into another application. It will allow your users to provide a richer level of input than with a plain textbox.

To customize

1. Integrate into your web site.
2. Modify the ImagesDir variable to the directory following your domain name where your images are located on your web server.
3. Modify the PostURL variable to an application that can accept input from the editor.
4. The application that accepts the form submission must be configured to receive the form element named form_submission from the editor. Example: Request.Form ("form_submission")
5. An included ASP file demonstrates how to accept data from the editor and save it to an .htm file. Note: The asp file is for demonstration purposes only.

Note: A simple text erea will be shown in place of the WYSIWYG editor in the event that the user is not running Internet Explorer

Works best with IE5.5 and above however most functions will work under IE 4

Screen Shot

For those of you still doubting... take a look:

Download

Thanks Darren!

Update

Apparently people have been asking how to load data/files into the editor. Darren recently wrote me with instructions and an update for doing just that. Here's his email:

John

This may useful. I was asked how to load data into the editor. The attached zip file contains instruction on passing data from the server to the client. This example only shows how to pass the data, and does not discuss data access with ActiveX Data Objects (ADO) or the File System Object.

Darren

Here's the example he mentions in zip file format: Open_a_file_in_the_WYSIWYG_Editor.zip (11 KB).