Forgot your password?
Clear and rebuild Plone's portal_catalog
Zope In Education
LicenceCredits
|
Document ActionsCross-browser WYSIWYG HTML editor for ZopeI'm interested in WYSIWYG text editor components, but because I use Mozilla, I've never really gone in for the CMFVisualEditor. Besides which, it isn't installed on my Zope host. Read on for details of my experiments with HTMLArea by interactivetools.com.
Right now I'm writing this article body using HTMLArea, with a modified newsitem_edit_form. And, showing off a bit :).
So what did I have to do to get it going? Well, first cab off the rank was downloading it from interactivetools.com. Yes, the download really is on that page, but you'll have to look closely. Once that was done, the larger task of making it work lay ahead... Point to note: at the current time, HTMLArea 3.0 works with Internet Explorer 5.5 or better and Mozilla 1.3b or better. And its only alpha software, so it still has a few bugs. But being Open Source, you can at least see how it works, and customise it to suit your needs. Step 1 - Prove it works unmodified.This was the 'minimal position' - would the example.html page
work from my server without any modification? So I created a new folder
at the root of my site (/htmlarea) and uploaded all the contents into
it. Then navigated to http://lawtec.net/htmlarea/example.html and...Nothing happened :( When I had a look in htmlarea.js, what that I needed to set the path to the image and popup folders. So I did that, refreshed the browser, and it worked! Step 2 - Testing in the CMF.I set my next target as getting it to work for the body field of the newsitem_edit form. I knew that some of the script definitions had to go in the head part of the page, so I cut and pasted the following into a new DTML Method called htmlarea_head:<script type="text/javascript" src="/htmlarea/htmlarea.js"></script> <script type="text/javascript" src="/htmlarea/htmlarea-lang-en.js"></script> <script type="text/javascript" src="/htmlarea/dialog.js"></script> <script type="text/javascript"> var editor = null; function initEditor(fld) { editor = new HTMLArea(fld); editor.generate(); } function insertHTML() { var html = prompt("Enter some HTML code here"); if (html) { editor.insertHTML(html); } } function highlight() { editor.surroundHTML('<span style="background:yellow">', '</span>'); } </script> Then I added this line to the appropriate place in main_template.pt: <span tal:replace="structure here/htmlarea_head" /> If you have a look in example.html head, you'll see that the easiest way to test it is to add this line to the <body> tag: onload="HTMLArea.replaceAll()" Then I browse to your favourite page featuring textarea fields (say the newsitem_edit_form) and saw two rich text editing boxes. Whoopee! Step 3 - Integration on demand.So the final step I got up to before I started typing this wasto only make the editor show up on the body field, and only when I ask it to. I haven't worked out how to turn it off yet, so so this was the best solution. Caveat - you must have an id attribute in your textarea field which has the same value as the name attribute. In the case of the body field on the newsitem_edit_form you need to add id="text:text" into the source code of the page. Finally, I added the button below the body field as follows: <input type="button" value="HTMLArea" id="ha_init" name="ha_init" onclick="initEditor('text:text')" /> And it was done!! Enjoy! |
