কাস্টম টিনিএমসিএ 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.