无法将“code”按钮添加到TinyMCE工具栏

时间：2014-05-18 作者：Stephen

这快把我逼疯了。使用WP codex中的代码，我可以向TinyMCE栏添加一些按钮，但不能添加其他按钮。例如，此代码：

function my_mce_buttons_2($buttons) {   
    /**
     * Add in a core button that\'s disabled by default
     */
    $buttons[] = \'sup\';
    $buttons[] = \'code\';     
    $buttons[] = \'hr\';
    $buttons[] = \'fullscreen\';

    return $buttons;
}
add_filter(\'mce_buttons_2\', \'my_mce_buttons_2\');
将向编辑器添加hr和全屏按钮，但不会向编辑器添加代码或上标按钮。有什么用？！

有什么想法吗？我正在使用WP 3.9.1

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

这是一个很好的问题。我刚刚在本地测试了您的代码，看到了相同的结果。稍微挖掘一下就会发现twp零件存在问题。

wp-includes/class-wp-editor.php 是TinyMCE定制的好读物

WordPress 3.9已更新至TinyMCE 4.0和TinyMCE docs 暗示上标按钮现在称为；上标“；而不仅仅是；sup"；。“相同”；下标“；与“相对”；sub"；。

仅此更改就可以使上标按钮正常工作。

function my_mce_buttons_2($buttons) {   
    /**
     * Add in a core button that\'s disabled by default
     */
    $buttons[] = \'superscript\';
    $buttons[] = \'code\';     
    $buttons[] = \'hr\';
    $buttons[] = \'fullscreen\';

    return $buttons;
}
add_filter(\'mce_buttons_2\', \'my_mce_buttons_2\');
然而；“代码”；按钮需要TinyMCE“；“代码”<默认情况下WordPress不附带的插件。因此，您必须下载它并告诉TinyMCE在哪里可以找到它。奇怪的是，你不能下载特定的插件，所以我不得不下载整个TinyMCE library 并在提取的文件中查找/plugins/code/plugin.min.js 文件

TinyMCE外部插件要激活代码按钮，我们需要告诉TinyMCE在哪里可以找到此文件。我将把它放在我的主题的根文件夹中，因为这是我回答你的问题最容易测试的，但我不认为这是主题功能，可能应该移动到插件或特定于站点的mu插件。

由于WordPress核心中没有包含该代码插件，因此从技术上讲，该代码插件是一个外部插件。这个mce_external_plugins 筛选器接受数组。在class-wp-editor.php 文件：

/**
 * Filter the list of TinyMCE external plugins.
 *
 * The filter takes an associative array of external plugins for
 * TinyMCE in the form \'plugin_name\' => \'url\'.
 *
 * The url should be absolute, and should include the js filename
 * to be loaded. For example:
 * \'myplugin\' => \'http://mysite.com/wp-content/plugins/myfolder/mce_plugin.js\'.
 *
 * If the external plugin adds a button, it should be added with
 * one of the \'mce_buttons\' filters.
 *
 * @since 2.5.0
 *
 * @param array $external_plugins An array of external TinyMCE plugins.
 */
现在我们知道了要针对哪个过滤器以及要发送什么信息，我们可以向TinyMCE发送关于我们下载的插件文件的信息。

/*
 * The TinyMCE "Code" button is not included with WP by default
 */
function my_mce_external_plugins($plugins) {   

    $plugins[\'code\'] = get_stylesheet_directory_uri() . \'/code/plugin.min.js\';
    return $plugins;
}
add_filter(\'mce_external_plugins\', \'my_mce_external_plugins\');
运行这两个函数后，我知道可以在TinyMCE可视化编辑器中看到所有4个按钮。

SO网友:squarecandy

需要注意的重要事项：

我以为code TinyMCE中的按钮键将启用添加HTML<code></code> 选定文本块周围的标记。它不是这样做的。它允许您编辑TinyMCE在所见即所得字段中显示的内容的完整HTML代码。（我想知道为什么它需要一个完整的插件……现在我知道了。）

这在WordPress的上下文中根本没有用处，因为您已经可以在WordPress的代码视图中查看“文本”选项卡，该视图遵循WordPress的所有怪癖，例如双新行表示段落中断等。

如果要内联<code></code> 我最终做了以下工作：

// Callback function to filter the MCE settings
function squarecandy_tinymce_mce_before_init($init_array) {
    // Define the style_formats array
    $style_formats = array(
        array(
            \'title\' => \'code\',
            \'inline\' => \'code\',
            \'classes\' => \'tinymce-code\',
            \'wrapper\' => false,
            \'styles\' => \'background-color: #eee\',
        ),
        // add more styles here if you want to...
        // https://codex.wordpress.org/TinyMCE_Custom_Styles

    );
    // Insert the array, JSON ENCODED, into \'style_formats\'
    $init_array[\'style_formats\'] = json_encode($style_formats);
    return $init_array;
}
add_filter(\'tiny_mce_before_init\',\'squarecandy_tinymce_mce_before_init\');
最好有一个按钮，但这会起作用。。。

结束
标签： tinymce   小码农  

相关推荐

如何在WP3.9中自定义TinyMCE4-旧的样式和格式方法不再起作用

在WP 3.9之前，我在函数中应用了以下两个过滤器。php：function my_mce_buttons_2( $buttons ) { array_unshift( $buttons, \'styleselect\' ); return $buttons; } add_filter(\'mce_buttons_2\', \'my_mce_buttons_2\'); function mce_mod( $init ) {