Site News: Added TinyEditor to the dominoGuru.com Comment Form!

02/10/2010 07:55 PM by Chris Toohey

So easy, even an IBM Lotus Notes Domino Web Application Developer could do it! With Tim Tripcony and Nathan T Freeman on the assist, I've added TinyEditor, a XHTML-generating JavaScript WYSIWYG editor to the Comment Form for this site.

It was pretty simple really... just ran into two issues (hence the need for the assists - I couldn't see the forest from the trees today):

First, I'll tell you how I implemented this really slick WYSIWYG editor:

1. I downloaded the latest release of TinyEditor from the author's site.
2. Unzipping the contents to my hard drive, I simply imported each item as a File Resource into the dominoGuru.com NotesDatabase design.
3. Since the images used by the editor are contained within a subdirectory (images, naturally), I opted to rename each imported image to "image/<image name>" versus modifying the source JavaScript library.

While the editor rendered in Internet Explorer, it wouldn't in Firefox or Chrome. Nathan saw that the style.css was rendering as HTML... which borked the rendering in the real web browsers. Creating a style.css Stylesheet fixed Domino's Content Type rendering, and it was now visible across all the browsers that I use.

The next step was to wire the TinyEditor to my Comment HTML Form.

This part was easy - I use the Domino CRUD API to create Comments (which are Response NotesDocuments to each Post NotesDocument) and hand-roll my own XHTML Comment Form:

<form id="comment" name="comment" method="POST" action="response?createdocument&parentUNID=<Computed Value>">
<label for="author">Author:</label>
<input type="text" name="author" id="author" value="" /><br />
<label for="mailaddress">Email:</label>
<input type="text" name="mailaddress" id="mailaddress" value="" />
<span class="info">(not published)</span><br />
<label for="website">Website:</label>
<input type="text" name="website" id="website" value="" /><br /><br />
<textarea name="body" id="comment_body"></textarea><br /><br />
<label for="code">Captcha:</label>
<span class="info captcha">Evaluate this Formula:
<code>@LowerCase(@Text("FOO"))</code></span><br /> <label for="captcha">&nbsp;</label>
<input type="text" name="captcha" id="captcha" value="" /><br /><br />
<span class="actions">
<input type="submit" value="Submit Comment" onclick="instance.post();" />
</span>
</form>

- becomes -

<form id="comment" name="comment" method="POST" action="response?createdocument&parentUNID=<Computed Value>">
<label for="author">Author:</label>
<input type="text" name="author" id="author" value="" /><br />
<label for="mailaddress">Email:</label>
<input type="text" name="mailaddress" id="mailaddress" value="" />
<span class="info">(not published)</span><br />
<label for="website">Website:</label>
<input type="text" name="website" id="website" value="" /><br /><br />
<label>&nbsp;</label>
<span class="info">(HTML markup allowed - <strong>play nice</strong>!)</span><br />
<textarea name="body" id="comment_body"></textarea><br /><br />
<script type="text/javascript">
var instance = new TINY.editor.edit('editor',{
   id:'comment_body',
   width:500,
   height:175,
   cssclass:'te',
   controlclass:'tecontrol',
   rowclass:'teheader',
   dividerclass:'tedivider',
   controls:['bold','italic','underline', 'strikethrough','|','subscript', 'superscript','|', 'orderedlist', 'unorderedlist','|','outdent', 'indent','|','leftalign',' centeralign','rightalign','blockjustify', '|','unformat','|','undo', 'redo','n','font','size', 'style','|','image','link','unlink& #039;],
   footer:true,
   fonts:['Verdana','Arial','Georgia','Tre buchet MS'],
   xhtml:true,
   cssfile:'style.css',
   bodyid:'comment_body',
   footerclass:'tefooter',
   toggle:{text:'View Source',activetext:'WYSIWYG Editor',cssclass:'toggle'},
   resize:{cssclass:'resize'}
});
</script>
<label for="code">Captcha:</label>
<span class="info captcha">Evaluate this Formula: <code>@LowerCase(@Text("FOO"))</code></span><br />
<label for="captcha">&nbsp;</label>
<input type="text" name="captcha" id="captcha" value="" /><br /><br />
<span class="actions">
<input type="submit" value="Submit Comment" onclick="instance.post();" />
</span>
</form>


The sample code from the TinyEditor author's website did not create the new instance JavaScript variable - which Tim pointed out - so it was a simple matter of calling the instance.post(); Function from the Comment Form's Submit button.

So, in conclusion: TinyEditor is an awesome simple WYSIWYG editor that's easy to implement (provided you have good friends that don't mind lending a hand).

You can download TinyEditor from the Michael Leigeber's website, or leave a comment below to see it in action!