ডাব্লুপি 4.6-এ টিনিএমসিএতে স্ব-সমাপনী শর্টকোড বোতাম যুক্ত করুন

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' );

তবে আমি এগুলি টিনিএমসিএতে যুক্ত করা শুরু করতে চাই। আমি বেশ কয়েকটি অনুসন্ধান করেছি তবে সমস্ত অনুসন্ধানের ফলাফল হয় তারিখযুক্ত বা এমন একটি পদ্ধতির ব্যবহার যা সুপারিশ করা হয় না:

• টিনিএমসিএর সম্পাদকটিতে কীভাবে একটি শর্টকোড বোতাম যুক্ত করবেন? : চমত্কার সূচনা পয়েন্ট তবে প্রশ্নটি 2012 সালে তৈরি হয়েছিল।
• ওয়ার্ডপ্রেস শর্টকোডস: একটি সম্পূর্ণ গাইড : ভাল নিবন্ধ তবে ২০১২ এবং এটি ব্যবহার করেছে query_posts()তবে টুইট করা যেতে পারে
• আপনার নিজের ওয়ার্ডপ্রেস সম্পাদক বাটনগুলি তৈরির জন্য গাইড : একটি দুর্দান্ত নিবন্ধ তবে এখনও কিছুক্ষণ আগে, ২০১৩ থেকে, তবে এটি টিনিএমসিই ব্যবহারের জন্য বেসিক বা ভিত্তিটি আবরণ করে না।

আমি জানি বিকাশকারী এটা প্রাথমিক পর্যায়ে কিন্তু সম্পর্কে প্লাগইন হ্যান্ডবুক সংক্ষেপে আলোচনা করেন এখনও TinyMCE উন্নত Shortcodes এবং শর্ট কোড এপিআই এবং add_shortcode()TinyMCE উল্লেখ না।

সুতরাং এটি আমার প্রশ্নের দিকে নিয়ে যায়। টিনিএমসিই সম্পাদকের একটি স্ব-সমাপনী শর্টকোডকে ক্লিকযোগ্য বাটনে রূপান্তর করার প্রাথমিক পদ্ধতিটি কী?

Comments

সুতরাং আপনি বোঝাতে চেয়েছেন যে কীভাবে টিনিএমসিই সম্পাদক এ একটি বোতাম তৈরি করা যায় যা সামগ্রীতে একটি স্ব-সমাপনী শর্টকোডকে সংক্রামিত করে?

— বার্জায়ার

@ বিবিরগায়ার হ্যাঁ আমি টিনিএমসিইতে একটি কাস্টম বোতাম সংহত করার জন্য ভিত্তিটি জানতে চাই যা পোস্ট ভিজুয়ালে শর্টকোড যুক্ত করবে।

— দিন

আপনি কি এখানে দুর্দান্ত উত্তরটি পরীক্ষা করেছেন ?

— বার্জায়ার

@ বীরগিরি না এটি আমার অনুসন্ধান থেকে ফিরে আসেনি তবে এটি একটি ভাল প্রশ্নোত্তর

— D 22Vᴀᴅᴇʀ

Answer 1

আমরা কাস্টম টিনিএমসিই বাটন যুক্ত করে শুরু করি:

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

অবশেষে, আমরা সিদ্ধান্ত নিতে পারি যে কোন বোতামগুলি ( সামগ্রী বোতামে আরও বেশি বোতাম পাওয়া যাবে ) আমরা প্রদর্শন করতে চাই। স্পষ্টতই, আপনার যদি মনে থাকে তবে আপনি তাদের মধ্যে কয়েকটি প্রদর্শন করবেন উদাহরণস্বরূপ:

// 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);

ফলাফল পোস্ট করুন এবং সম্পাদনা সম্পাদন করুন। টিনিএমসিই একটি প্লেগ এবং মাথাব্যথার প্রয়োজন তবে এটি সহযোগীভাবে সমাধান করা যায়।