HTMLArea3 Plugin

Subject	HTMLArea3 Plugin
Posted	8/6/2003; 2:59 PM by Seth Dillingham
In Response To	(#Top of Thread.)
Label	None.	Read	9323

<Previous

Next>

Thread:

Edit

HTMLArea Page: WYSIWYG Message Editing

HTMLArea is a D-HTML (dynamic html, javascript-based) tool written by InteractiveTools.com. It can replace any textarea field (the big text fields in web forms) with WYSIWYG editors that act more like word processors and don't require any knowledge of HTML.

HTMLArea version 3 is still "pre-release," but we've chosen it over HTMLArea2 because it is compatible with Mozilla 1.3a (and newer), Mozilla Firebird 0.6.1 (and newer), and Internet Explorer 5.5. HTMLArea 2 only worked with Explorer.

NOTE that the htmlarea3 plugin is only available with paid hosting accounts. We have over 2,000 free sites running on Free-Conversant, and fewer than 50 paid-hosting sites on the other servers. Our hope is that by offering some additional services only with the paid-hosting, more people will upgrade.

The HTMLArea3 plugin for Conversant provides a special "page" that you can create in your site, which includes all of the javascripts and windows needed to use HTMLArea3.

To use HTMLArea3 in your site, follow thes three steps:

Create a new HTMLArea3 page in your site, named htmlarea. There's nothing to configure in the page (yet, this isn't the final version), so just create it.
Edit the Full Page template you use on your __NewThread__, /edit, and /reply pages (or anywhere else that you use a message editing/posting form, such as your fullThread page). Add the following somewhere in the HEAD of the HTML template:


Edit the message-editing template (or any other template that is used to create a form for creating or editing messages), and add two things:
1. Add an id attribute to the #msgBody macro. This will add an id attribute to the html textarea tag. Set the id to "messageBody".
2. Now you need to insert some javascript to initialize the new editor. There's a macro for this, too, called htmlarea.initEditor. Add this macro immediately after the #msgBody macro:

That should be all you need to do. Now go to your __NewThread__ page (or edit or reply to a message), and you should have the WYSIWYG editor.

Tips

Some of the instructions, above, are just suggestions.

You can name the htmlarea page anything you want. If you use something else, just make sure that you use the right pagePath in step 2.
The wysiwyg editor works with ANY textarea field, not just the message body. So, if you have a custom "long text" field, you can use it there, too.
The id in step 3.a. doesn't have to be "messageBody." It just has to be unique among all ids used on the page. If you use something else, just make sure you also change the value of the id attribute in step 3.b.

Tip for Faster Pages

The WYSIWYG editor loads a number of extra files from the server, and so it may appear to make your site (or even other sites on the server) run more slowly. One way to prevent this problem is to make sure that the HTMLArea files are only loaded when needed, instead of on every page on the site.

The easiest way to make sure that HTMLArea3's files are only loaded when needed is to use a conditional macro with the #htmlarea.header macro in step 2, above. Like this:

That example would make sure that the files are only loaded when creating a new message, editing a message, or replying to a message. That's just an example: other conditional macros could be used to allow the files to be loaded onto fullThread pages, or Weblog II pages. The point is to only load the HTMLArea files when they're needed.

This feature was sponsored by Clark Venable.

<Previous

Next>

Thread:

Edit

ENCLOSURES

None.

REPLIES

	Re: HTMLArea3 Plugin 8/6/2003 by Brian Carnell
	At 02:59 PM 8/6/2003 -0400, Seth wrote: > b. Now you need to insert some javascript

	Another tip for using HTMLArea 8/6/2003 by Seth Dillingham
	I've added another tip to the instructions for using the HTMLArea WYSIWYG editor.

	Re: HTMLArea3 Plugin 8/6/2003 by Brian Carnell
	So far I'm getting lots of compliments from users who love the new feature.

	RE: HTMLArea3 Plugin 8/6/2003 by Terry Frazier
	This is great! I got the basic config working in just a couple of minutes.

	Re: HTMLArea3 Plugin 8/7/2003 by Greg Pierce
	Ok, I've got it setup at my site: http://greg.turtleprod.com/ Note that I added

	WYSIWYG Editor on Support Site 8/8/2003 by Seth Dillingham
	I've implemente the WYSIWYG editor here on the support site, so that everybody

	Tip For Webloggers Using HTMLArea 8/8/2003 by Seth Dillingham
	Another tip about the new WYSIWYG editor: it's especially useful for webloggers

	RE: HTMLArea3 Plugin 8/13/2003 by Mark Morgan
	"There's nothing to configure in the page (yet, this isn't the final version),

	Feature requests (was Re: HTMLArea3 Plugin) 10/1/2003 by Mark Morgan
	I am going to forget these if I don't post them. 1. Instead of "insert image"

	RE: HTMLArea3 Plugin 6/3/2004 by Clark Venable
	If I want to use the wysiwyg editor on an original weblog page (as opposed

	RE: HTMLArea3 Plugin 3/22/2005 by Clark Venable
	In the left gutter to this site is the option turn the wysiwyg editor on or

TRACKBACKS