How to add WYSIWYG editor button in phtml form

Question

I want to add wysiwyg editor button for 'characteristics' field in below form. I added script as in backend, but is not working in my form. When I click that button it alerts windows is not defined,

    <form action="<?php echo $this->getUrl('createform/index/create'); ?>" id="createform" name="createform" method="post" enctype="multipart/form-data">
                <div class="fieldset">
                    <ul class="form-list">
                        <li class="fields">
                            <div class="field">
                        <div class="input-box">             
                                <table width = "700" cellspacing = "300" cellpadding = "150">
         <tr> 
        <th><p><label for="name" class="required"><?php echo Mage::helper('createform')->__('Name') ?><span>*</span></label></th>  <th> <input name="name" id="name" title="<?php echo Mage::helper('createform')->__('Name') ?>" value="" class="input-text required-entry" type="text" /></p></th> </tr>
         <tr>   
        <th><p><label for="characteristics" class="required"><?php echo Mage::helper('createform')->__('Characteristics') ?><span>*</span></label></th>  <th><textarea name="characteristics" id="characteristics" title="<?php echo Mage::helper('createform')->__('Characteristics') ?>" value="" class=" required-entry required-entry textarea" type="text"></textarea></th> 
<th><button style="" onclick="catalogWysiwygEditor.open('http://www.website.com/createform/index/index/', 'characteristics')" class="scalable btn-wysiwyg" type="button" title="WYSIWYG Editor" id="id1"><span><span><span>WYSIWYG Editor</span></span></span></button></p></th></tr> 
        <tr>    
        <th><p><label for="roomtypes" class="required"><?php echo Mage::helper('createform')->__('Room Types') ?><span>*</span></label></th> <th><textarea name="roomtypes" id="roomtypes" title="<?php echo Mage::helper('createform')->__('Room Types') ?>" value="" class="input-text required-entry" type="text"
            ></textarea></p></th> </tr>
         </table>
         </div>
         </div>
         </ul> 
        </div> 
        </form>

<script type="text/javascript">
Window.keepMultiModalWindow = true;
var catalogWysiwygEditor = {
    overlayShowEffectOptions : null,
    overlayHideEffectOptions : null,
    open : function(editorUrl, elementId) {
      if (editorUrl && elementId) {
            new Ajax.Request(editorUrl, {
                parameters: {
                    element_id: elementId+'_editor',
                    store_id: '<?php echo $this->getStoreId() ?>'
                },
                onSuccess: function(transport) {

                    try {
                        this.openDialogWindow(transport.responseText, elementId);
                    } catch(e) {

                        alert(e.message);
                    }
                }.bind(this)
            });
        }
    },
    openDialogWindow : function(content, elementId) {
        this.overlayShowEffectOptions = Windows.overlayShowEffectOptions;
        this.overlayHideEffectOptions = Windows.overlayHideEffectOptions;
        Windows.overlayShowEffectOptions = {duration:0};
        Windows.overlayHideEffectOptions = {duration:0};

        Dialog.confirm(content, {
            draggable:true,
            resizable:true,
            closable:true,
            className:"magento",
            windowClassName:"popup-window",
            title:'WYSIWYG Editor',
            width:950,
            height:555,
            zIndex:1000,
            recenterAuto:false,
            hideEffect:Element.hide,
            showEffect:Element.show,
            id:"catalog-wysiwyg-editor",
            buttonClass:"form-button",
            okLabel:"Submit",
            ok: this.okDialogWindow.bind(this),
            cancel: this.closeDialogWindow.bind(this),
            onClose: this.closeDialogWindow.bind(this),
            firedElementId: elementId
        });

        content.evalScripts.bind(content).defer();

        jquery(elementId+'_editor').value = jquery(elementId).value;
    },
    okDialogWindow : function(dialogWindow) {
        if (dialogWindow.options.firedElementId) {
            wysiwygObj = eval('wysiwyg'+dialogWindow.options.firedElementId+'_editor');
            wysiwygObj.turnOff();
            if (tinyMCE.get(wysiwygObj.id)) {
               jquery(dialogWindow.options.firedElementId).value = tinyMCE.get(wysiwygObj.id).getContent();
            } else {
                if (jquery(dialogWindow.options.firedElementId+'_editor')) {
                    jquery(dialogWindow.options.firedElementId).value = jquery(dialogWindow.options.firedElementId+'_editor').value;
                }
            }
        }
        this.closeDialogWindow(dialogWindow);
    },
    closeDialogWindow : function(dialogWindow) {
        // remove form validation event after closing editor to prevent errors during save main form
        if (typeof varienGlobalEvents != undefined && editorFormValidationHandler) {
            varienGlobalEvents.removeEventHandler('formSubmit', editorFormValidationHandler);
        }

        //IE fix - blocked form fields after closing
        $(dialogWindow.options.firedElementId).focus();

        //destroy the instance of editor
        wysiwygObj = eval('wysiwyg'+dialogWindow.options.firedElementId+'_editor');
        if (tinyMCE.get(wysiwygObj.id)) {
           tinyMCE.execCommand('mceRemoveControl', true, wysiwygObj.id);
        }

        dialogWindow.close();
        Windows.overlayShowEffectOptions = this.overlayShowEffectOptions;
        Windows.overlayHideEffectOptions = this.overlayHideEffectOptions;
    }
};
</script>

Answer 1

Add the following function in your Adminhtml Edit Class Softprodigy_Demo_Block_Adminhtml_Demo_Edit:

protected function _prepareLayout() {
    parent::_prepareLayout();
    if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
        $this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
    }
}

Add the following content field in your Adminhtml Form class Softprodigy_Demo_Block_Adminhtml_Demo_Edit_Tab_Form:

$fieldset->addField('content', 'editor', array(
    'name'      => 'content',
    'label'     => Mage::helper('demo')->__('Content'),
    'title'     => Mage::helper('demo')->__('Content'),
    'style'     => 'height:15em',
    'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),
    'wysiwyg'   => true,
    'required'  => false,
));