विज़ुअल एडिटर TinyMCE, संस्करण 4 में कस्टम बटन जोड़ना कैसे संभव है ?
वर्तमान में मैंने इस q & को विषय के लिए थोड़ा सा संकेत के साथ पाया , लेकिन समाधान या कैसे नहीं। लेकिन मैं TinyMCE संस्करण 4 में एक कस्टम बटन जोड़ने के लिए विषय के लिए एक ट्यूटोरियल, प्रलेखन, q & a नहीं पा सकता हूँ, संस्करण 3.9-beta1 के बाद से वर्डप्रेस में शामिल हैं।
जवाबों:
निम्नलिखित छोटा प्लगइन वर्डप्रेस टाइनीएमसीई संस्करण 4 की लाइन 1 के अंदर एक कस्टम बटन बनाता है, जिसका परीक्षण WP संस्करण 3.9-beta2 में किया गया है।
प्लगइन ने 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 );
}
} );
}
} );
} );
} )();
संदर्भ के रूप में Gist bueltge / 9758082 का उपयोग करें , या डाउनलोड करें। टिनीएमसीई में विभिन्न बटन के लिए जिस्ट के और भी उदाहरण हैं।
और, यदि आप एक वास्तविक आइकन बटन लेना चाहते हैं, तो आप इसके लिए डैशिकन, या अपने स्वयं के आइकन फ़ॉन्ट का लाभ उठा सकते हैं।
एक सीएसएस फ़ाइल बनाएँ, और व्यवस्थापक पक्ष पर संलग्न करें;
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;
}मूल रूप से सीधे कोर से लिया गया।
बटन जोड़ने की सरल विधि
1) इस कोड में जमा करें। P.PP, या PLUGIN में
//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 बनाएं और इस कोड को डालें (ध्यान दें, "wp-load" और "ButtonImage.png" urls !!!) !!!
<?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);
})();