添加自定义TinyMCE 4按钮，从WordPress 3.9-Beta1开始可用

时间：2014-03-25 作者：bueltge

如何向可视化编辑器TinyMCE添加自定义按钮，Version 4?

目前我发现this q&a 对主题有一些提示，但不是解决方案或方法。但我找不到教程、文档和q&；a用于将自定义按钮添加到TinyMCE版本4的主题，自版本3.9-beta1起包含在WordPress中。

目标

enter image description here

3 个回复
最合适的回答,由SO网友:bueltge 整理而成

下面的小插件在WordPress TinyMCE版本4的第1行中创建了一个自定义按钮，该版本在WP版本3.9-beta2中进行了测试。

插件具有var_dump 包括以了解值。也可以将按钮添加到可视化编辑器的其他行中，仅添加其他挂钩，如第2行：mce_buttons_2.

结果

enter image description here

插件，PHP端-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中不同按钮的更多示例。

链接TinyMCE API 4
  • Migration guide from 3.x
  • WP Trac Ticket
  • TinyMCE Default Font for Icons-Fonts
  • Alternative Icon via Dashicon or Genericons
  • TinyMCE Default Plugins
  • Compat Plugin - 这个插件包含一些旧版本3的兼容性文件。x分支。这使您能够运行最旧的3。x插件，无需任何修改

    • SO网友:Dale Sattler

    而且，如果你想有一个实际的图标按钮，那么你可以利用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;
}
    基本上是直接从岩芯取下的。

    SO网友:T.Todua

    添加按钮的简单方法

    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);  
})();

    结束
    标签： plugin-development   tinymce   visual-editor   小码农  

    相关推荐

    向tinyMCE添加唯一的类或ID信息

    是否有一种方法可以将唯一的正文类ID应用于编辑器，就像将正文类信息添加到发布的页面一样？我正在使用add\\u editor\\u style（）函数来呈现编辑器的样式，以反映已发布的页面。然而，有些页面的样式脱离了标准页面规则，我希望能够在编辑器中包含一些特殊的样式规则。