ASP 101 - Active Server Pages 101 - Web04
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
What is Adovbs.inc and Why Do I Need It?
An Overview of ASP.NET
Connections, Commands, And Procedures

QUICK TIP:
ASP Code-Based Security
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


ASP and JavaScript WYSIWYG Editor

by Darren Death

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:

IE WYSIWYG Editor Screen Cap

Download

You can download the ASP and Javascript WYSIWYG editor (44 KB) from here. It includes everyting you need. As Darren mentioned in his email, he also included an HTML version (42 KB) which I'm also posting for reference.

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).


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers