以下のフォームの「特性」フィールドにwysiwygエディターボタンを追加したいと思います。バックエンドのようにスクリプトを追加しましたが、フォームで機能しません。そのボタンをクリックすると、ウィンドウが定義されていないことを警告します
<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>