Using TinyMCE in WebTOP environment
24-May 2007.
1,726
1 One of my greatest challenge while developing the WebTOP application (using Savvy.PItO) for ChronoSight is integrating it with TinyMCE Text Editor. In fact the same applies in any WebTOP/AJAX application where module are pulled without the use of page refresh. TinyMCE have prepared tinyMCE.execCommand() JavaScript function call for this purpose.
For this example I going only going to show you how to do dynamic load and unloading of TinyMCE with JavaScript.
Before starting
You need to download Savvy.js and add this following line inside <HEAD> section of your HTML, for this tutorial we will need to include Savvy.Core and Savvy.PItO.
<script type="text/javascript" src="savvy.core.js"></script>
<script type="text/javascript" src="savvy.pito.js"></script>
The Example
Let make a simple Note Form, here I'm going to create an Object notes to organize all function related to contact us.
var notes = {};i. Init Function
First of all, we need to have an initialize function triggered upon click from a button or link (your choice).
notes = {
init:function() {
if(is_null(Element.Id("note-win"))) {
var block = Element.Create("div").setAttrib("id","note-block").setCSS("height","300px");
var win = PItO.show({
element:"contactus-win",
title:"Contact Us Form",
width:500,
height:345,
onclose:notes.closeEditor
}).addDOM(block);
block.addHTML("<form id='note-form'>");
block.appendHTML("<textarea id='note-textarea' name='notetext' cols='40' rows='10'></textarea>");
block.appendHTML("</form>");
tinyMCE.execCommand("mceAddControl", true, "note-textarea");
}
}
}I want to keeping it simple, I'm sure most of you know the basic of any form right? The line tinyMCE.execCommand("mceAddControl",true,"note-textarea"); will actually tell TinyMCE to add it editor control to HTML element with identifier equal to note-textarea. At the same time you also need to define onclose parameter in PItO.show() to automatically call a function when someone close the PItO window.
ii. closeEditor Function
Again we will be using tinyMCE.execCommand but now instead of adding control to the element, we wil be using mceRemoveControl parameter value.
notes = {
init:function() {
/* see above */
},
closeEditor:function() {
tinyMCE.execCommand("mceRemoveControl", true, "note-textarea");
}
};There you go, now you can WebTOP with TinyMCE.
» ChronoSight - Using TinyMCE in WebTOP environment (2):
on 28-May 2007 at 11:10 AM | Quote
This tutorial is a continuation to Using TinyMCE in WebTOP environment, but today I'm going to cover on Form object under Savvy.Core, by default Form.validation() can't validate TinyMCE editor since it's neither Input, Select nor T...