2011-04-02 13 views
5

मैं कैसे TinyMCE के लिए एक कस्टम बटन जोड़ने के लिए पर Nettuts पर एक ट्यूटोरियल का पालन किया है (http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/)WP में TinyMCE में एकाधिक बटन कैसे जोड़ें?

यह बहुत अच्छा काम करता है और सभी, लेकिन मैं कई बटन जोड़ना चाहते हैं और मैं आश्चर्य हो, तो यह करने के लिए एक स्मार्ट तरीका सभी कोड को डुप्लिकेट किए बिना।

add_shortcode("quote", "quote"); 
function quote($atts, $content = null) { 
    return '<div class="right text">"'.$content.'"</div>'; 
} 

add_action('init', 'add_button'); 
function add_button() { 
    if (current_user_can('edit_posts') && current_user_can('edit_pages')) 
    { 
    add_filter('mce_external_plugins', 'add_plugin'); 
    add_filter('mce_buttons_3', 'register_button'); 
    } 
} 
function register_button($buttons) { 
    array_push($buttons, "quote"); 
    return $buttons; 
} 
function add_plugin($plugin_array) { 
    $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js'; 
    return $plugin_array; 
} 

और फिर मैं इस कोड के साथ एक customcodes.js फ़ाइल बनाने:

यहाँ कोड मैं एक बटन जोड़ने के लिए उपयोग करते हैं तो फिर

(function() { 
    tinymce.create('tinymce.plugins.quote', { 
     init : function(ed, url) { 
      ed.addButton('quote', { 
       title : 'Add a Quote', 
       image : url+'/image.png', 
       onclick : function() { 
        ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]'); 

       } 
      }); 
     }, 
     createControl : function(n, cm) { 
      return null; 
     }, 
    }); 
    tinymce.PluginManager.add('quote', tinymce.plugins.quote); 
})(); 

, मैं कैसे कई जोड़ सकते हैं प्रत्येक नए बटन के लिए यह सब कोड करने के बिना बटन?

धन्यवाद सेबस्टियन

+0

प्रत्येक नए बटन में अलग-अलग कार्यक्षमता नहीं है? – Prashanth

उत्तर

1

अलावा हो सकता है आपके पहले से ही विद्यमान कार्यों अंदर अतिरिक्त बटन कोड जोड़ने से :), मैं वहाँ तुम क्या कोशिश कर रहे हैं करने के लिए एक रास्ता है नहीं लगता।

दुर्भाग्य से, यह एक बटन जोड़ने के लिए कोड है, इसलिए यदि आप एक और बटन जोड़ना चाहते हैं तो आपको कोड फिर से जोड़ना होगा।

यदि आप जो बटन जोड़ना चाहते थे, वे लगभग हर तरह से समान थे, तो आप foreach {} के साथ switch(){case '':} कर सकते हैं, जहां आप डेटा को खिलाते हैं, लेकिन जब तक आपके सभी बटन एक ही काम नहीं करते हैं, यह थोड़ा सा लगता है अनावश्यक।

यदि आप जो भी करने की कोशिश कर रहे हैं, तो अपनी function.php फ़ाइल को साफ रखें, तो मैं सुझाव देता हूं कि प्रत्येक बटन को एक अलग .php फ़ाइल में डालें, जिसे मुख्य फ़ंक्शन के रूप में नामित किया गया है, इंक नामक फ़ोल्डर में या आपके टेम्पलेट के अंदर शामिल है , तो उन्हें इतनी तरह शामिल हैं:

$temp_path = 'http//www.yourdomain.com/wp-content/theme/yourtheme/includes/'; 


include $temp_path.'file1.php'; 
include $temp_path.'file2.php'; 

मैं क्योंकि किसी कारण bloginfo() और get_bloginfo() सिर्फ कार्यों फ़ाइल में काम करने के लिए नहीं है के लिए एक temp_path चर का उपयोग कर रहा हूँ।

एक तरफ नोट पर, भले ही यह व्यक्तिगत उपयोग के लिए है, फिर भी अधिक अनूठे फ़ंक्शन नामों का उपयोग करने का प्रयास करें, quote कुछ भी हो सकता है, tinymce_quote_button यह निश्चित रूप से यह है कि यह क्या है। इससे संभावित फ़ंक्शन नाम बाद में संघर्ष हो जाता है।

0

यदि सभी बटन संबंधित हैं और आप उन्हें एक साथ जोड़ना चाहते हैं (यानी आपको चुनने और चुनने की आवश्यकता नहीं है कि कौन से बटन जोड़े जाएंगे, तो आप इनट कॉल में ed.addButton कॉल को डुप्लिकेट कर सकते हैं। भावना अपने आप समारोह में प्रत्येक addbutton कॉल संपुटित करने के लिए होगा,

(function() { 
    function addQuoteButton(ed, url){ 
     ed.addButton('quote', { 
      title : 'Add a Quote', 
      image : url+'/image.png', 
      onclick : function() { 
       ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]'); 
      } 
     }); 
    } 
    function addOtherButton(ed, url){ 
     // functionality to add another button. 
    } 
    tinymce.create('tinymce.plugins.quote', { 
     init : function(ed, url) { 
      addQuoteButton(ed, url); 
      addOtherButton(ed,url); 
     }, 
     createControl : function(n, cm) { 
      return null; 
     }, 
    }); 
    tinymce.PluginManager.add('quote', tinymce.plugins.quote); 
})(); 

आगे अपघटन प्राप्त करने के लिए, तो आप ऐड * बटन कार्यों को अपने स्वयं के फ़ाइलों में विभाजित कर सकता है (जैसा कि @DouglasMarken ने सुझाव दिया)।

2

अपने दूसरे बटन पुश करने के लिए चरण 3 पर php संशोधित करें:

//Step 4: Register Our TinyMCE Plugin 
    function add_plugin($plugin_array) { 
     $plugin_array['BOUTON1'] = '/yourpathtojs/bouton1.js'; 
     $plugin_array['BOUTON2'] = '/yourpathtojs/bouton2.js'; 
     return $plugin_array; 
    } 

तो आप प्रत्येक के लिए अलग फ़ाइलें:

//Step 3: Register Our Button 
function register_button($buttons) { 
    array_push($buttons, "BOUTON1"); 
    array_push($buttons, "BOUTON2"); 
    return $buttons; 
} 

कि BOUTON2 के लिए एक विशिष्ट पास जोड़ें , PLUG1 और BOUTON1 के उपयोग को देखें, यह बेहतर है कि नेटट्स पर क्योंकि उन्होंने 'उद्धरण' शब्द के साथ भेद नहीं किया:

bouton1.js:

(function() { 
    tinymce.create('tinymce.plugins.PLUG1', { 
     init : function(ed, url) { 
      ed.addButton('BOUTON1', { 
       title : 'You', image : url+'/image.png', 
       onclick : function() { ed.selection.setContent('[thumb from="youtube" code="'+ed.selection.getContent()+'"]'); } 
      }); 
     }, 
     createControl : function(n, cm) { 
      return null; 
     }, 
    }); 
    tinymce.PluginManager.add('BOUTON1', tinymce.plugins.PLUG1); 
})(); 

bouton2.js:

(function() { 
     tinymce.create('tinymce.plugins.PLUG2', { 
      init : function(ed, url) { 
       ed.addButton('BOUTON2', { 
        title : 'Vim', image : url+'/image.png', 
        onclick : function() { ed.selection.setContent('[thumb from="vimeo" code="'+ed.selection.getContent()+'"]'); } 
       }); 
      }, 
      createControl : function(n, cm) { 
       return null; 
      }, 
     }); 
     tinymce.PluginManager.add('BOUTON2', tinymce.plugins.PLUG2); 
    })(); 
7

मैं सही ढंग से आप के डुप्लिकेट बनाने के लिए बिना अधिक बटन को जोड़ना चाहते हैं अपने प्रश्न को समझने हूं, तो क्या register_button($buttons) और add_plugin($plugin_array) फ़ंक्शंस?

मुझे पता है कि यह एक पुराना सवाल है, लेकिन कार्यों को डुप्लिकेट किए बिना ऐसा करने का एक तरीका है।

बस अपने customcodes.js में जाकर init : function(ed, url) में नए बटन, जैसा कि आपने पहले एक किया था बनाने के लिए, तो यह इस तरह के रूप दिखेगा:

init : function(ed, url) { 
      /* your original button */ 
      ed.addButton('quote', { 
      title : 'Add a Quote', 
      image : url+'/image.png', 
      onclick : function() { 
       ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]'); 
      } 
     }); 
      /* your second button */ 
      ed.addButton('singlequote', { 
      title : 'Add a Single Quote', 
      image : url+'/image.png', 
      onclick : function() { 
       ed.selection.setContent('[singlequote]' + ed.selection.getContent() + '[/singlequote]'); 
      } 
     }); 
} 

और बहुत आगे है, के रूप में कई बटन के रूप में आप की आवश्यकता ।

उसके बाद बस अपने register_button($buttons) फ़ंक्शन पर जाएं और array_push() अपडेट करें।

तो, जबकि, जब आप जोड़ने के लिए केवल एक बटन इसे इस तरह देखा था:

function register_button($buttons) { 
array_push($buttons, "quote"); 
return $buttons; } 

अब जब आपने यह समारोह इस प्रकार दिखाई देगा अपने नए बटन बनाया।

function register_button($buttons) { 
array_push($buttons, "quote", "singlequote"); 
return $buttons; } 

और इसी तरह, यह निर्भर करता है कि आपने कितने नए बटन जोड़े हैं।

आपको अपने tinyMCE में नए बटन जोड़ने के लिए फ़ंक्शंस को डुप्लिकेट करने या नए क्रियाएं और फ़िल्टर जोड़ने की आवश्यकता नहीं है।

आप बस अपनी tinyMCE प्लग-इन के अंदर नए बटन बनाने और सूची बटन youve array_push().

अंदर बनाया के नाम शायद आप जानते हैं कि array_push() कई धक्का मान स्वीकार नहीं थे। Here is its documentation on php.net

+1

उत्कृष्ट जवाब, धन्यवाद। – montrealist

संबंधित मुद्दे