WP 4.6 में TinyMCE में स्व-समापन शोर्ट बटन जोड़ें

Question

मैं स्व-समापन शॉर्टकोड बनाने से परिचित हूं जैसे:

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

लेकिन मैं TinyMCE में इन्हें जोड़ना शुरू करना चाहूंगा। मैंने कई खोजें की हैं लेकिन सभी खोज परिणाम या तो दिनांकित हैं या एक दृष्टिकोण का उपयोग करते हैं जो अब अनुशंसित नहीं है:

• TinyMCE संपादक में शोर्ट बटन कैसे जोड़ें? : उत्कृष्ट प्रारंभिक बिंदु लेकिन सवाल 2012 में बनाया गया था।
• वर्डप्रेस शॉर्टकोड: एक पूर्ण गाइड : अच्छा लेख लेकिन 2012 से और इसका उपयोग करता है query_posts()लेकिन इसे ट्विक किया जा सकता है
• अपना खुद का वर्डप्रेस एडिटर बटन बनाने के लिए गाइड : एक अच्छा लेख है, लेकिन अभी भी थोड़ी देर पहले, 2013 से, लेकिन यह टिनीएमसीई का उपयोग करने के लिए मूल बातें या नींव को कवर नहीं करता है।

मुझे पता है कि डेवलपर अभी भी शुरुआती दौर में है, लेकिन प्लगइन हैंडबुक केवल टिनीएमसीई एन्हांस्ड शॉर्टकोड और शोर्टकोड एपीआई के बारे में संक्षेप में बात करता है और add_shortcode()टिनीएमसीई का उल्लेख नहीं करता है।

इसलिए यह मुझे मेरे प्रश्न की ओर ले जाता है। TinyMCE संपादक में एक क्लिक करने योग्य बटन में स्व-समापन शोर्ट को चालू करने के लिए बुनियादी प्रक्रिया क्या है?

Comments

तो आपका मतलब है कि TinyMCE संपादक में एक बटन कैसे बनाया जाए जो सामग्री में स्व-समापन शॉर्टकोड को इंजेक्ट करता है?

— बीरगायर

@birgire हाँ, मैं TinyMCE में एक कस्टम बटन को एकीकृत करने की नींव जानना चाहूंगा जो पोस्ट दृश्य में शोर्ट को जोड़ देगा।

— D --Vᴀʀᴛʜ

क्या आपने @bueltge द्वारा यहाँ शानदार उत्तर की जाँच की ?

— बिरगीरे

@birgire नहीं यह मेरी खोज से वापस नहीं आया लेकिन यह एक अच्छा प्रश्नोत्तर है

— DᴀʀᴛʜVire

Answer 1

हम कस्टम TinyMCE बटन जोड़कर शुरू करते हैं:

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

फिर हम नए बटन की घोषणा और पंजीकरण करते हैं:

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

अंत में, हम यह तय करते हैं कि कौन से बटन ( सामग्री स्वरूपण पर अधिक बटन मिल सकते हैं ) हम प्रदर्शित करना चाहते हैं। जाहिर है, अगर आपके दिमाग में UX है, तो आप उनमें से कुछ को ही प्रदर्शित करेंगे, उदाहरण:

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

जैसा कि आप में देख सकते हैं add_tinymce_plugin_custom_em फ़ंक्शन , हम अंदर एक जावास्क्रिप्ट फ़ाइल घोषित कर रहे हैंget_template_directory_uri() .'/plug/custom-em/custom-em.js'

तो बनाएँ custom-em.js फ़ाइल , और फिर आपके पास इस बारे में जाने के दो तरीके हैं।

या तो आप निम्नलिखित शोर्ट फॉर्मेट के साथ जा सकते हैं [shortcode foo="" bar=""] या [shortcode][/shortcode]।

आइए [shortcode foo="" bar=""]प्रारूप के साथ शुरू करें :

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})(); 

जैसा कि आप देख सकते हैं, हम बटन आइकन के रूप में एक छवि का उपयोग करते हैं। आप नीचे दिए गए उदाहरण में दिए गए पाठ को बदल सकते हैं।

निम्नलिखित हम अपने स्वयं के मंच पर उपयोग करते हैं, यह चयन में लपेटता है: <em class="whatever">hello world</em> :

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

कृपया परिणाम पोस्ट करें और संपादन करें। TinyMCE एक प्लेग है और सिरदर्द की आवश्यकता होती है, लेकिन एक सहयोगी तरीके से हल किया जा सकता है।