7

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

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,
));
  • i already added like this and i got,but i want wysiwyg button as like as in backend form. when you click wysiwyg button,then it opens wysiwyg editor popup window. – saravanavelu Jun 12 '14 at 10:29
  • I have updated the answer, check above. – SoftProdigy Jun 18 '14 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.