|
Free-Conversant Support / HTMLArea Page: WYSIWYG Message Editing |
| Home | About Conversant | Free Sites | Hosting | Support | XML-RPC |
|
Support Home Documentation Search Support Site Discussion Group Ask a Question Recent Topics Message Calendar Membership Logon Join Now! Subscribe via Email Unsubscribe via Email |
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:
<!--#htmlarea.header pagePath="htmlarea"--> -
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:
-
Add an id attribute to the #msgBody macro. This will add an id attribute to the html textarea tag. Set the id to "messageBody".
-
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:
<!--#htmlarea.initEditor id="messageBody"-->
-
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:
<!--#if condition="requestIsEdit || requestIsNewThread || requestIsReply"--><!--#htmlarea.header pagePath="htmlarea"--><!--#endif-->
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.
View in DG