Cách thêm nút soạn thảo WYSIWYG ở dạng phtml


7

Tôi muốn thêm nút soạn thảo wysiwyg cho trường 'đặc điểm' ở dạng bên dưới. Tôi đã thêm tập lệnh như trong phần phụ trợ, nhưng không hoạt động ở dạng của tôi. Khi tôi nhấp vào nút đó, nó sẽ thông báo các cửa sổ không được xác định,

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

Câu trả lời:


2

Thêm chức năng sau vào Lớp Chỉnh sửa adminhtml của bạn Softprodigy_Demo_Block_Adminhtml_Demo_Edit:

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

Thêm trường nội dung sau vào lớp Biểu mẫu adminhtml của bạn 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,
));

tôi đã thêm như thế này và tôi đã nhận được, nhưng tôi muốn nút wysiwyg giống như ở dạng phụ trợ. Khi bạn nhấp vào nút wysiwyg, sau đó nó sẽ mở cửa sổ bật lên trình chỉnh sửa wysiwyg.
saravanavelu

Tôi đã cập nhật câu trả lời, kiểm tra ở trên.
SoftProdigy
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.