Magento - कस्टम विजेट

Question

पर WYSIWYG संपादक जोड़ें मैंने अपने कस्टम मॉड्यूल के अंदर एक विजेट बनाया है। सब कुछ काम कर रहा है और विजेट को सीएमएस पृष्ठों पर एम्बेड किया जा सकता है। हालांकि, टेक्स्टरेरा पैरामीटर प्रकार के बजाय मैं एक WYSIWYG संपादक जोड़ना चाहता हूं।

यह मेरा widget.xml में महत्वपूर्ण हिस्सा है:

<parameters>    
    <description translate="label"> 
     <required>0</required> 
     <visible>1</visible> 
     <label>Description</label> 
     <type>textarea</type> 
    </description> 
</parameters> 

मुझे आश्चर्य है कि वहाँ Magento के कार्यक्षमता बढ़ाने के लिए इस के समान एक WYSIWYG संपादक की अनुमति के लिए एक तरीका है:

<parameters>    
    <description translate="label"> 
     <required>0</required> 
     <visible>1</visible> 
     <label>Description</label> 
     <type>WYSIWYG</type> 
    </description> 
</parameters> 

किसी को भी है एक समान समस्या का सामना करना पड़ा? .. या किसी को पता है कि यह कैसे प्राप्त किया जा सकता है? शायद एक कस्टम रेंडरर के माध्यम से, जो WYSIWYG संपादक को कॉल करता है, लेकिन कैसे ..?

अग्रिम में Thanx।

Answer 1

मैं अंततः इसे स्वयं करने में कामयाब रहा।

widget.xml मैं पैरामीटर की स्थापना की है में इस प्रकार है:: उन सभी जो एक ही समस्या है के लिए, यह कैसे मैंने किया है

<parameters>    
    <text translate="label"> 
     <required>1</required> 
     <visible>1</visible> 
     <label>Specify text</label> 
     <description>No double quotes allowed, use single quotes instead!</description> 
     <type>cmswidget/widget_wysiwyg</type> 
    </text> 
</parameters> 

विजेट का पाठ क्षेत्र पर WYSIWYG संपादक को सक्षम करने के मैं अपने कस्टम मॉड्यूल में एक नया ब्लॉक श्रेणी का निर्माण, वर्ग Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element बढ़ाया और प्रस्तुत करना() फ़ंक्शन को अधिलेखित कर दिया: अब

class MyCompany_MyModule_Block_Widget_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element 
{ 
    public function render(Varien_Data_Form_Element_Abstract $element) 
    { 
     $editor = new Varien_Data_Form_Element_Editor($element->getData()); 
     $editor->setId($element->getId()); 
     $editor->setForm($element->getForm()); 
     $editor->setWysiwyg(true); 
     $editor->setForceLoad(true); 
     return parent::render($editor); 
    } 
} 

, मैं विजेट के अंदर संपादक को देखने के लिए खुश था। दुर्भाग्य से अभी भी एक समस्या थी। चूंकि संपादक डबल कोट्स के साथ इनलाइन शैलियों और विशेषताओं को बनाता है और इसे सीएमएस पृष्ठ पर विजेट विशेषता के रूप में रखता है - जो स्वयं भी डबल कोट्स में है, विजेट को सही ढंग से प्रस्तुत नहीं किया जा सकता है। इस समस्या को हल करने के लिए मैं कक्षा Mage_Widget_Model_Widget बढ़ाया और संपादकों एकल उद्धरण के साथ दोहरे उद्धरण चिह्नों की जगह इस प्रकार है:

class MyCompany_MyModule_Model_Widget extends Mage_Widget_Model_Widget 
{ 
    public function getWidgetDeclaration($type, $params = array(), $asIs = true) 
    { 

     if(preg_match('~(^mymodule/myblockclass)~', $type)) 
     { 
      $params['text'] = str_replace('"', "'", $params['text']); 

     } 
     return parent::getWidgetDeclaration($type, $params, $asIs); 
    } 
} 

अंदर getWidgetDeclaration() फ़ंक्शन मैं जाँच करता है, तो विजेट प्रकार एक मैं हैंडल करना चाहते है। विजेट प्रकार यहाँ की तरह प्रत्येक विजेट के लिए widget.xml में निर्दिष्ट किया जाता:

<MyCompany_MyModule_MyWidgetName type="mymodule/myblockclass" translate="name description" module="mymodule"> 
<!-- ... --> 
</MyCompany_MyModule_MyWidgetName> 

और अब मैं काम कर सब कुछ मिल गया जैसे मैं इसे बनना चाहता था। संपादक के जेनरेट किए गए HTML में सिंगल कोट्स द्वारा प्रतिस्थापित किए गए डबल कोट्स होंगे और आउटपुट पूरी तरह से काम करेगा। इससे पहले कि मैं इस तरह के डबल कोट्स से बच निकला - \ "कुछ पाठ \"। ऐसा लगता है कि पहले काम करना प्रतीत होता था, लेकिन आइकन (संपादक दृश्य) पर क्लिक करके विजेट को संपादित करते समय एचटीएमएल काट दिया गया था। Magento की जावास्क्रिप्ट अपने तरीके से तारों से बचने लग रहा था। हालांकि, ऊपर वर्णित विधि काम करेगी क्योंकि विजेट को डालने पर सिंगल कोट्स द्वारा डबल कोट्स को प्रतिस्थापित किया जाता है और सीएमएस संपादक दृश्य में विजेट खोलते समय Magento एकल कोट्स को डबल कोट्स में बदल देता है।

आशा है कि यह किसी के लिए उपयोगी होगा।

<description> 
<![CDATA[ 
<script> 
jQuery("#widget_options textarea").keyup(function(){ 
if(jQuery(this).val().indexOf('"') > -1){ 
    jQuery(this).val(jQuery(this).val().replace('"',"'")); 
    alert('No double quotes allowed, use single quotes instead.') 
} 
}); 
</script> 
]]>     
</description> 

Answer 2

Rouzbeh के आधार पर मैं छोटे jQuery कोड है कि मान्य करता है, तो दोहरे उद्धरण चिह्नों का उपयोग किया जाता गयी। मैंने इस विधि को आजमाया है और सीएमएस ब्लॉक/पेज को सहेजते समय मुझे जावास्क्रिप्ट त्रुटि मिल रही है जहां विजेट जोड़ा गया है

त्रुटि: [अज्ञात ऑब्जेक्ट] में त्रुटि।fireEvent(): घटना नाम: formSubmit त्रुटि संदेश: सेट नहीं कर सकता संपत्ति अशक्त का 'मान'

Answer 3

मुझे नहीं लगता कि यह अब और Magento 1.9 के साथ संगत है:

Answer 4

तो, जाना जाता समाधान नहीं रह 1.9+ पर काम करने लगते हैं, तो मैं एक विकल्प है, जो WYSIWYG कहते हैं उत्पादन किया, लेकिन एक वैकल्पिक संपादक का उपयोग कर।

: कदम 1: अंतिम परिणाम के रूप में देख रहे हैं के साथ

https://alex-d.github.io/Trumbowyg/

:

मैं इस संपादक का उपयोग किया डाउनलोड संपादक फ़ाइलें और गति adminhtml त्वचा क्षेत्र में:

मेरे उदाहरण में मैंने उन्हें skin/adminhtml/default/js/wysiwygमें रखा था 210

कदम 2: अपने मॉड्यूल में आप एक व्यवस्थापक लेआउट अद्यतन परिभाषित करने की जरूरत है, और अपने adminhtml लेआउट फ़ाइल में, निर्देशों पुस्तकालय फ़ाइलें (और jQuery)

लोड करने के लिए मैं के बाद से जोड़ने

<adminhtml_cms_page_edit> 
     <reference name="head"> 
      <action method="addJs"> 
       <script>lib/jquery/jquery-1.12.0.js</script> 
      </action> 
      <action method="addJs"> 
       <script>lib/jquery/noconflict.js</script> 
      </action> 
      <action method="addItem"><type>skin_js</type><name>js/wysiwyg/trumbowyg.min.js</name></action> 
      <action method="addItem"><type>skin_css</type><name>js/wysiwyg/ui/trumbowyg.min.css</name></action> 
     </reference> 
    </adminhtml_cms_page_edit> 

कदम 3:: यह केवल n सीएमएस पृष्ठ संपादन प्रकट करने के लिए चाहते थे, मैं उचित संभाल के माध्यम से जोड़ा

: तत्व प्रस्तुत करना एक नया विजेट कक्षा बनाएंमेरी उदाहरण में, मैं रखा इस ब्लाकों

मूल रूप से के तहत एक मॉड्यूल है, यह विजेट एक्सएमएल परिभाषित तत्व लेता है, और यह एक textarea तत्व के लिए खत्म हो transposes, और फिर जरूरत जावास्क्रिप्ट (jQuery) wysiwyg आरंभ से जुड़ संपादक।

आप thw विकल्पों संपादक को पारित किया जा रहा, $ विकल्पों में परिभाषित देखेंगे

<?php 
class ProxiBlue_Landingpage_Block_Widgets_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element 
{ 
    public function render(Varien_Data_Form_Element_Abstract $element) 
    { 
     $textarea = new Varien_Data_Form_Element_Textarea(); 
     $textarea->setForm($element->getForm()) 
      ->setId($element->getHtmlId()) 
      ->setName($element->getName()) 
      ->setLabel($element->getLabel()) 
      ->setClass('widget-option input-area input-text'); 
     if ($element->getRequired()) { 
      $textarea->addClass('required-entry'); 
     } 
     if ($element->getValue()) { 
      $textarea->setValue($element->getValue()); 
     } 
     $options = "btns: ['viewHTML', 'strong', 'em', 'del', 'undo', 'redo', 'formatting', 'superscript', 'subscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'unorderedList', 'orderedList', 'horizontalRule', 'fullscreen'], 
        semantic: true, 
        removeformatPasted: true, 
        autogrow: false"; 

     $textarea->setData('after_element_html', 
      "<script>jQuery(document).ready(
       function() { 
        jQuery(" . $element->getHtmlId() .").trumbowyg({ " . $options . " }) 
        .on('tbwblur', function(){ 
         var html = jQuery(this).trumbowyg('html'); 
         html = html.replace(/\"/g, '&quot;'); 
         jQuery(this).trumbowyg('html', html); 
        }); 
        });</script>"); 

     $html = parent::render($textarea); 

     return $html; 
    } 

} 

वहाँ में आप भी इस स्निपेट नोट कर सकते हैं:

.on('tbwblur', function(){ 
    var html = jQuery(this).trumbowyg('html'); 
    html = html.replace(/\"/g, '"'); 
    jQuery(this).trumbowyg('html', html); 
}); 

उद्देश्य यहां के लिए है किसी भी डबल बदल &quot की उचित एचटीएमएल इकाई के उद्धरण (") को यह विजेट पैराम में टेक्स्ट डेटा के भंडारण को रोकने के लिए है, जो डबल कोट्स के साथ संलग्न है।

चरण 4:

<text_blurb translate="label"> 
       <sort_order>50</sort_order> 
       <label>Textual Content</label> 
       <visible>1</visible> 
       <required>1</required> 
       <type>landingpage/widgets_wysiwyg</type> 
      </text_blurb> 

हो गया: विजेट तत्व को परिभाषित करें।

आशा है कि यह किसी के लिए उपयोग की जाए।