如何向可视化编辑器TinyMCE添加自定义按钮,Version 4?
目前我发现this q&a 对主题有一些提示,但不是解决方案或方法。但我找不到教程、文档和q&;a用于将自定义按钮添加到TinyMCE版本4的主题,自版本3.9-beta1起包含在WordPress中。
目标

如何向可视化编辑器TinyMCE添加自定义按钮,Version 4?
目前我发现this q&a 对主题有一些提示,但不是解决方案或方法。但我找不到教程、文档和q&;a用于将自定义按钮添加到TinyMCE版本4的主题,自版本3.9-beta1起包含在WordPress中。
下面的小插件在WordPress TinyMCE版本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;
}
脚本,JavaScript端-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 );
}
} );
}
} );
} );
} )();
使用GistGist bueltge/9758082 作为参考,或下载。Gist还提供了TinyMCE中不同按钮的更多示例。而且,如果你想有一个实际的图标按钮,那么你可以利用dashicons,或者你自己的图标字体。
创建一个CSS文件,并在管理端排队;
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) ADD THIS CODE INTO FUNCTIONS.PHP, OR IN 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) Create 1_button.php in target folder and insert this code (note, change "wp-load" and "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);
})();
是否有一种方法可以将唯一的正文类ID应用于编辑器,就像将正文类信息添加到发布的页面一样?我正在使用add\\u editor\\u style()函数来呈现编辑器的样式,以反映已发布的页面。然而,有些页面的样式脱离了标准页面规则,我希望能够在编辑器中包含一些特殊的样式规则。