jq-tinyMCE gives you a unobtrusive way to tack-on tinyMCE WYSIWYG HTML editing to any form. Simply:$('.classname').tinymce()

Here it is:

// tiny MCE -
//    jQuery plugin for accessible, unobtrusive WYSIWYG HTML editing
// v .1
// by Alton Crossley
// http://www.nogahidebootstrap.com/jtinymce/
// Free beer and free speech. Enjoy!
// The cool part is oh-so-simple
$.fn.tinymce = function(options)
{
    return this.each(function()
    {
        preString = "<div class='jqHTML_frame' style='width:"+$(this).css("width")+"px;height:" + ($(this).css("height")+20) + "px;'><div>";
        postString = "</div><div class='jqHTML_link' style='float:right' onclick="toogleEditorMode('" + this.id + "');">HTML</div></div>";
        $(this).wrap(preString + postString);
        //alert(this.id + '
' + $(this).html() + '
');
        //alert(this.id + '
Width:' + $(this).css("width") + '
Height:' + $(this).css("height"));
    });
}
// this is where we decide the toggle of 'on' (true) or 'off' (false)
// init an array to keep each id's state seperate
var tinyMCEmode = new Array();
// this is called by the click method
function toogleEditorMode(sEditorID)
{
    if(tinyMCEmode[sEditorID])
    {
        try
        {
            tinyMCE.removeMCEControl(tinyMCE.getEditorId(sEditorID));
            tinyMCEmode[sEditorID] = false;
        }
        catch(e)
        {
            alert( "REMOVE:" + sEditorID + ':
' + e.message);
        }
    }
    else
    {
        try
        {
            tinyMCE.addMCEControl(document.getElementById(sEditorID), sEditorID);
            tinyMCEmode[sEditorID] = true;
        }
        catch(e)
        {
            alert( "ADD:" + sEditorID + ':
' + e.message);
        }
    }
}
function removeAllMCE()
{
    for (var i in tinyMCEmode)
    {
        if(tinyMCEmode[i])
        {
            tinyMCE.removeMCEControl(tinyMCE.getEditorId(i));
            tinyMCEmode[i] = false;
        }
    }
    initMCE()
}
function initMCE()
{
    tinyMCE.init({ mode : "none",
       theme : "advanced",
       plugins : "advhr,advlink,style",
       theme_advanced_layout_manager : "SimpleLayout",
       theme_advanced_disable: "hr,",
       theme_advanced_buttons1: "pasteword,justifyleft,justifycenter,justifyright,justifyfull,separator,removeformat,separator,charmap,advhr,separator,styleprops",
       theme_advanced_buttons2: "styleselect,bold,italic,underline,separator,link,separator,bullist,numlist,outdent,indent,",
       theme_advanced_buttons3: "",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       content_css : "css/content.css"});
}
initMCE();

---

Notes from Teh Anonymous Newb

Disclaimer: The below is quick and dirty from someone with a limited understanding. YMMV. Caveat user. Etc.

You need to invoke the function on load, e.g.

$(document).ready(function(){

$('#contenttextarea').tinymce();

});

...assuming you have a textarea element with an id="contenttextarea".

Note: I could not get this to work using a class. E.g., $('.contenttextarea).tinymce(); did not work on a textarea with class of "contenttextarea".

Also, the plugin below does not automatically apply the tinyMCE controls. Instead, it shows the textarea as plain with a link to click to show the controls. Here is a quick workaround if you want to show the controls on load:

$(document).ready(function(){
	$('#textareaid').tinymce();
});
$.fn.tinymce = function(options){
    return this.each(function(){
        // I don't think the style declaration is not really used in this sense, but I left it anyway
        preString = "<div class='jqHTML_frame' style='width:"+$(this).css("width")+"px;height:" + ($(this).css("height")+20) + "px;'>";
        postString = "</div>";
        $(this).wrap(preString + postString);
+ '
Height:' + $(this).css("height"));
        // this comes last to avoid IE7 bug
        tinyMCE.addMCEControl(document.getElementById(this.id), this.id);
    });
}
function initMCE()
{
    tinyMCE.init({ mode : "none",
       theme : "advanced",
       plugins : "advhr,advlink,style",
       theme_advanced_layout_manager : "SimpleLayout",
       theme_advanced_disable: "hr,",
       theme_advanced_buttons1: "pasteword,justifyleft,justifycenter,justifyright,justifyfull,separator,removeformat,separator,charmap,advhr,separator,styleprops",
       theme_advanced_buttons2: "styleselect,bold,italic,underline,separator,link,separator,bullist,numlist,outdent,indent,",
       theme_advanced_buttons3: "",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       content_css : "css/content.css"});
}
// initialize tiny mce
initMCE();

---