WordPress富文本编辑器添加Pre自定义按钮

要在WordPress编辑器中添加自定义的<pre>按钮，可以按照以下步骤进行操作：

打开主题的functions.php文件。在文件中添加以下代码：

function star_add_custom_pre_button() {
    if (current_user_can('edit_posts') && current_user_can('edit_pages')) {
        add_filter('mce_buttons', 'register_custom_pre_button');
        add_filter('mce_external_plugins', 'add_custom_pre_plugin');
    }
}

function register_custom_pre_button($buttons) {
    array_push($buttons, 'custom_pre');
    return $buttons;
}

function add_custom_pre_plugin($plugins) {
    $plugins['custom_pre'] = get_template_directory_uri() . '/assets/js/custom-pre-plugin.js';
    return $plugins;
}

add_action('admin_init', 'star_add_custom_pre_button');

在主题目录中创建一个名为js的文件夹。

在js文件夹中创建一个名为custom-pre-plugin.js的文件。

在 custom-pre-plugin.js 文件中，添加以下代码：

(function() {
    tinymce.PluginManager.add('custom_pre', function(editor, url) {
        editor.addButton('custom_pre', {
            text: 'Pre',
            icon: false,
            onclick: function() {
                editor.execCommand('mceInsertContent', false, 'Your code here');
            }
        });
    });
})();

保存文件并将它们上传到主题文件夹中。

现在，当你在编辑器中创建或编辑文章时，应该会看到一个名为”Pre”的按钮。当选中代码并点击该按钮时，它将插<pre>标签并将选中的内容放在标签内。

请确保在编辑器页面上刷新或重新加载页面后，你才能看到新添加的按钮。