টিনিএমসিএর সম্পাদকটিতে কীভাবে একটি শর্টকোড বোতাম যুক্ত করবেন?


34

ওয়ার্ডপ্রেস পোস্টে কোনও প্লাগইন আইকন কীভাবে তৈরি করবেন? আমি যে কোডটি প্লাগইন কোডে সন্নিবেশ করতে চাইছি এবং পোস্ট বারে প্রদর্শিত হবে [wp-admin / post.php]।

এই চিত্রটি পছন্দ:

এখানে চিত্র বর্ণনা লিখুন

আউটপুট: আমি যদি আইকনটি ক্লিক করি তবে এটি [plugin]পোস্টের লিখিত সামগ্রীতে স্বয়ংক্রিয়ভাবে লিখবে :

এখানে চিত্র বর্ণনা লিখুন


আপনি যে ফলাফলটি পেতে চান তার একটি স্ক্রিন শট যুক্ত করুন। আপনি কী চান তা পরিষ্কার নয়।
ফুসিয়া

আমি মনে করি আপনি এমন একটি প্লাগইন তৈরি করতে চান যা সম্পাদককে একটি টিনিএমসিই বাটন যুক্ত করে যে কোনও ওয়ার্ডপ্রেস শর্টকোড সন্নিবেশ করে, তাই না?
ডেভলপডেলি

উত্তর:


65

টিনিএমসিসি সম্পাদকটিতে আমাদের বোতামটি যুক্ত করতে আমাদের বেশ কয়েকটি কাজ করতে হবে:

  1. আমাদের বোতামটি সরঞ্জামদণ্ডে যুক্ত করুন
  2. একটি TinyMCE প্লাগইন নিবন্ধন করুন
  3. সেই টিনিএমসিই প্লাগইনটি তৈরি করুন যা আমাদের বাটনটি ক্লিক করা হয় তখন টিনিএমসিকে কী করতে হবে তা বলে।

পদক্ষেপ # 1 এবং # 2

এই পদক্ষেপগুলিতে আমরা আমাদের টিনিএমসিই প্লাগ-ইনটি নিবন্ধভুক্ত করি যা জাভাস্ক্রিপ্ট ফাইলের অভ্যন্তরে বাস করবে 'path/to/shortcode.js'( wpse72394_register_tinymce_plugin()নীচে দেখুন)

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

ধাপ 3

এখন আমাদের আমাদের TinyMCE প্লাগ-ইন তৈরি করা দরকার। এটি কোনও ফাইলে যাবে 'path/to/shortcode.js'(প্রাথমিক পদক্ষেপে নির্দিষ্ট হিসাবে)।

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});

1
পদক্ষেপ 1 এ, initহুককে হুক পরিবর্তন করা admin_initসামনের প্রান্তে কিছুটা অতিরিক্ত প্রসেসিংও সঞ্চয় করতে পারে।
টিম ম্যালোন

এটি নির্ভর করে, আপনার সামনের প্রান্তেও TinyMCE থাকতে পারে। তবে হ্যাঁ, এটি যদি কেবল অ্যাডমিন-সাইড হয় admin_initতবে পছন্দনীয়।
স্টিফেন হ্যারিস

5

পুরো উত্তরটি এখানে রাখার মতো অনেক কিছুই রয়েছে তাই এই গাইডটি চেকআউট করুন : http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

আপনাকে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করতে হবে যা আপনার ওয়ার্ডপ্রেসের মাধ্যমে নিবন্ধিত বোতাম থেকে পদক্ষেপ নেয় যা সম্পাদনায় টিনিএমসিই বাটন সন্নিবেশ করে।


3
কোয়েরি_পোস্টগুলি ব্যবহার করে তাই লিঙ্ক করার জন্য সম্ভবত সেরা উদাহরণ নয়।
ব্র্যাড ডাল্টন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.