কাস্টম টিনিএমসিএ 4 বাটন যুক্ত করুন, ওয়ার্ডপ্রেস 3.9-বিটা 1 এর পরে ব্যবহারযোগ্য


20

ভিজ্যুয়াল এডিটর টিনিএমসিই, সংস্করণ 4-এ কাস্টম বোতাম যুক্ত করা কীভাবে সম্ভব ?

বর্তমানে আমি এই প্রশ্নোত্তরটি খুঁজে পেয়েছি বিষয়টিতে কিছুটা ইঙ্গিত দিয়েছি , তবে কোনও সমাধান বা কীভাবে তা করা যায় না। তবে আমি টিনিএমসিএল সংস্করণ 4-তে একটি কাস্টম বোতাম যুক্ত করার জন্য বিষয়ের জন্য একটি টিউটোরিয়াল, ডকুমেন্টেশন, প্রশ্নোত্তর সন্ধান করতে পারি না, ওয়ার্ডপ্রেসটিতে সংস্করণ 3.9-বিটা 1 থেকে অন্তর্ভুক্ত করুন।

লক্ষ্য

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

উত্তর:


24

নিম্নলিখিত ছোট প্লাগইনটি ওয়ার্ডপ্রেস টিনিএমসিই সংস্করণ 4 এর 1 লাইনের অভ্যন্তরে একটি কাস্টম বোতাম তৈরি করে, ডাব্লুপি সংস্করণ 3.9-বিটা 2 তে পরীক্ষা করে।

প্লাগইনটি var_dumpমানগুলি অন্তর্ভুক্ত করে। ভিজ্যুয়াল এডিটরের অন্যান্য লাইনে বাটন যুক্ত করা সম্ভব, কেবলমাত্র অন্য একটি হুক, যেমন লাইন 2: এর মতো mce_buttons_2।

ফলাফল

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

প্লাগইন, পিএইচপি পাশ - tinymce4-test.php

<?php
/**
 * Plugin Name: TinyMCE 4 @ WP Test
 * Description: 
 * Plugin URI:  
 * Version:     0.0.1
 * Author:      Frank Bültge
 * Author URI:  http://bueltge.de
 * License:     GPLv2
 * License URI: ./assets/license.txt
 * Text Domain: 
 * Domain Path: /languages
 * Network:     false
 */

add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
    global $typenow;

    // Only on Post Type: post and page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return ;

    add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
    // Add to line 1 form WP TinyMCE
    add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}

// Inlcude the JS for TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {

    $plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
    // Print all plugin JS path
    var_dump( $plugin_array );
    return $plugin_array;
}

// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {

    array_push( $buttons, 'fb_test_button_key' );
    // Print all buttons
    var_dump( $buttons );
    return $buttons;
}

স্ক্রিপ্ট, জাভাস্ক্রিপ্ট পাশ - plugin.js

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

        // Add a button that opens a window
        editor.addButton( 'fb_test_button_key', {

            text: 'FB Test Button',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open( {
                    title: 'Example plugin',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        label: 'Title'
                    }],
                    onsubmit: function( e ) {
                        // Insert content when the window form is submitted
                        editor.insertContent( 'Title: ' + e.data.title );
                    }

                } );
            }

        } );

    } );

} )();

সারকথা

গিস্ট বেল্টেজ / 9758082 রেফারেন্স হিসাবে বা ডাউনলোড হিসাবে ব্যবহার করুন । টিনিএমসিই-তে বিভিন্ন বোতামের জন্য আরও উদাহরণ রয়েছে।

লিংক


2
ডায়লগ কীভাবে তৈরি করবেন সে সম্পর্কে টিনিএমসিই ডকুমেন্টেশন আসলে খুব সহায়ক নয়। তাই আমি এগিয়ে গিয়ে বিভিন্ন উইজেট এবং পাত্রে উপলব্ধ লেআউট তালিকাভুক্ত একটি নিবন্ধ লিখেছি: makina-corpus.com/blog/metier/2016/…
— গাগারো

3

এবং, আপনি যদি সত্যিকারের আইকন বোতামটি রাখতে চান তবে আপনি এটির জন্য ড্যাশিকনগুলি বা আপনার নিজস্ব আইকন ফন্টটি নিতে পারেন।

একটি সিএসএস ফাইল তৈরি করুন, এবং অ্যাডমিনের পাশে সজ্জিত করুন;

i.mce-i-pluginname:before {
    content: "\f164";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font: 400 20px/1 dashicons!important;
    speak: none;
    vertical-align: top;
}

মূলত সরাসরি কোর থেকে নেওয়া।


ডানদিকে, লিঙ্কস-তালিকার উপরে আমার লিঙ্কগুলির ভিতরে ছিল।
— বুলেটজ

একটি সিএসএস ফাইলের মাধ্যমে এটি যুক্ত করার আধা ঘন্টা ব্যয় করার আগে আমি এই উত্তরটি খুঁজে পেয়েছি। এটি এটি করার সর্বোত্তম উপায় বলে মনে হচ্ছে; আমি অনলাইনে যে সমস্ত টিউটোরিয়াল পেয়েছি তা অযথা ভার্চুজের।
— এড্রুউ

0

বোতাম যুক্ত করার সহজ পদ্ধতি

1) এই কোডটি ফাংশন.পিএইচপি বা প্লাগিনে যুক্ত করুন

//add_protect_shortcode_button
add_action('admin_init', 'add_cb_button');function add_cb_button() {
   if (current_user_can('edit_posts')  &&  get_user_option('rich_editing') == 'true') {
        add_filter('mce_buttons_2', 'register_buttonfirst');
        add_filter('mce_external_plugins', 'add_pluginfirst');
   }
}
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] =  plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) টার্গেট ফোল্ডারে 1_button.php তৈরি করুন এবং এই কোডটি সন্নিবেশ করুন (নোট করুন, "ডাব্লুপি-লোড" এবং "বাটনআইমেজ.পিএনজি" ইউআরএল পরিবর্তন করুন !!!)

<?php 
header("Content-type: application/x-javascript");
require('../../../../wp-load.php');
?>
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {  
        init            : function(ed, this_folder_url)
        {
                    // -------------------------
                    ed.addButton('shortcode_button1', {  
                        title : 'Show Level1 count',  
                        image : this_folder_url + '/ButtonImage.png',
                        onclick : function() {  
                            ed.selection.setContent('[statistics_sp]');  
                                //var vidId = prompt("YouTube Video", "");
                                //ed.execCommand('mceInsertContent', false, '[youtube id="'+vidId+'"]');
                        }  
                    });


        }, 

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

আমি মনে করি এটি সেরা উপায় নয়। Wp-load.php এর অন্তর্ভুক্ত স্থিতিশীল নয় not এই ফাইলটি ছেড়ে দেওয়ার গতিটি আলাদা। ওয়ার্ডপ্রেস ইনস্টল থিম এবং প্লাগইন ফোল্ডার সরানোর জন্য ডিফল্ট সম্ভাবনা আছে।
— শে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.