So fügen Sie die WYSIWYG-Editor-Schaltfläche in HTML-Form hinzu

Ich möchte die Wysiwyg-Editor-Schaltfläche für das Feld "Eigenschaften" in der folgenden Form hinzufügen. Ich habe ein Skript wie im Backend hinzugefügt, funktioniert aber in meinem Formular nicht. Wenn ich auf diese Schaltfläche klicke, wird Windows nicht definiert.

    <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>

Fügen Sie Ihrer Adminhtml-Bearbeitungsklasse die folgende Funktion hinzu Softprodigy_Demo_Block_Adminhtml_Demo_Edit:

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

Fügen Sie Ihrer Adminhtml Form-Klasse das folgende Inhaltsfeld hinzu 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,
));