WordPress 3.9+ TinyMCE 4 增强：添加样式、按钮、字体、下拉菜单和弹出式窗口

WordPress 3.9+ TinyMCE 4 增强：添加样式、按钮、字体、下拉菜单和弹出式窗口

TinyMCE是一个流行的富文本编辑器，它被广泛用于WordPress和其他内容管理系统中，在WordPress 3.9+版本中，TinyMCE 4已经集成并提供了更多的功能和选项，本文将介绍如何在WordPress中使用TinyMCE 4来增强您的编辑体验，包括添加样式、按钮、字体、下拉菜单和弹出式窗口。

1、添加样式

要添加样式到TinyMCE编辑器，您需要使用wp_tiny_mce_before_init过滤器，这个过滤器允许您在初始化TinyMCE编辑器之前添加自定义的JavaScript代码，以下是一个示例代码，用于添加一个名为“自定义样式”的新样式：

add_filter('wp_tiny_mce_before_init', 'mytheme_add_custom_styles');
function mytheme_add_custom_styles($init) {
    $styles = '<style type="text/css">
        /* 在这里添加您的自定义样式 */
    </style>';
    $init['content_css'] .= $styles;
    return $init;
}

2、添加按钮

要添加新的按钮到TinyMCE编辑器，您需要使用tinymce_buttons过滤器，这个过滤器允许您在初始化TinyMCE编辑器之后添加自定义的按钮，以下是一个示例代码，用于添加一个名为“自定义按钮”的新按钮：

add_filter('tinymce_buttons', 'mytheme_add_custom_button');
function mytheme_add_custom_button($buttons) {
    array_push($buttons, 'custombutton');
    return $buttons;
}

您需要在您的插件或主题的JavaScript文件中定义这个新按钮的功能：

tinymce.PluginManager.add('custombutton', function(editor, url) {
    editor.addButton('custombutton', {
        text: '自定义按钮',
        icon: false, // 使用CSS类代替图标
        onclick: function() {
            // 在这里添加您的自定义按钮功能
        }
    });
});

3、添加字体

要添加新的字体到TinyMCE编辑器，您需要使用wp_tiny_mce_plugins过滤器，这个过滤器允许您在初始化TinyMCE编辑器之后添加自定义的插件，以下是一个示例代码，用于添加一个新的字体选择器插件：

add_filter('wp_tiny_mce_plugins', 'mytheme_add_fonts');
function mytheme_add_fonts($plugins) {
    $plugins['fontselect'] = 'fontselect'; // 注册字体选择器插件
    return $plugins;
}

您需要在您的插件或主题的JavaScript文件中定义这个新插件的功能：

tinymce.PluginManager.add('fontselect', function(editor, url) {
    editor.ui.registry.addButton('fontselect', {
        text: '字体选择器',
        icon: false, // 使用CSS类代替图标
        onAction: function() {
            // 在这里添加您的字体选择器功能
        }
    });
});

4、添加下拉菜单和弹出式窗口

要添加下拉菜单和弹出式窗口到TinyMCE编辑器，您需要使用wp_tiny_mce_popups过滤器，这个过滤器允许您在初始化TinyMCE编辑器之后添加自定义的弹出式窗口，以下是一个示例代码，用于添加一个新的下拉菜单和弹出式窗口：

add_filter('wp_tiny_mce_popups', 'mytheme_add_dropdowns');
function mytheme_add_dropdowns($popups) {
    $popups['mydropdown'] = array( // 注册新的下拉菜单和弹出式窗口名称
        'title' => '我的下拉菜单', // 弹出式窗口标题
        'items' => array( // 弹出式窗口中的选项列表
            array('text' => '选项1', 'onclick' => 'alert("选项1")'), // 选项1的功能和点击事件处理函数
            array('text' => '选项2', 'onclick' => 'alert("选项2")') // 选项2的功能和点击事件处理函数
        )
    );
    return $popups;
}

您需要在您的插件或主题的JavaScript文件中定义这个新下拉菜单和弹出式窗口的功能：

tinymce.PluginManager.add('mydropdown', function(editor, url) {
    editor.ui.registry.addMenuItem('mydropdown', { // 注册新的下拉菜单项名称和功能对象
        text: '我的下拉菜单', // 下拉菜单项的文本显示名称