也想出现在这里?联系我们

WordPress TinyMCE编辑模式下增加特色图像上传尺寸提示的代码

2023.10.07 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress的TinyMCE编辑器模式下为特色图像上传添加尺寸提示,你可以使用以下代码示例。这将向TinyMCE编辑器添加一个自定义按钮,当用户单击它时,会弹出一个对话框,要求他们输入所需的图像尺寸。

// 添加自定义按钮到TinyMCE编辑器
function custom_image_size_button() {
    // 只在文章编辑页面显示按钮
    if (is_admin() && get_current_screen()>post_type == 'post') {
        add_filter('mce_external_plugins', 'custom_image_size_plugin');
        add_filter('mce_buttons', 'register_custom_image_size_button');
    }
}

// 注册TinyMCE插件
function custom_image_size_plugin($plugin_array) {
    $plugin_array['custom_image_size'] = get_template_directory_uri() . '/customimagesize.js'; // 你需要提供一个JavaScript文件
    return $plugin_array;
}

// 注册按钮
function register_custom_image_size_button($buttons) {
    array_push($buttons, 'custom_image_size_button');
    return $buttons;
}

add_action('admin_head', 'custom_image_size_button');

上述代码中,我们首先添加了一个自定义按钮到TinyMCE编辑器。然后,我们将一个JavaScript文件(customimagesize.js)添加为TinyMCE插件,该文件将处理按钮点击事件和弹出的对话框。请确保创建并上传customimagesize.js文件到你的主题目录。

接下来,你需要创建customimagesize.js文件,并在其中添加以下JavaScript代码,以创建对话框和处理用户输入的图像尺寸:

(function() {
    tinymce.PluginManager.add('custom_image_size', function(editor, url) {
        editor.addButton('custom_image_size_button', {
            text: '插入特色图像',
            icon: false,
            onclick: function() {
                editor.windowManager.open({
                    title: '插入特色图像',
                    body: [
                        {
                            type: 'textbox',
                            name: 'width',
                            label: '宽度(px)'
                        },
                        {
                            type: 'textbox',
                            name: 'height',
                            label: '高度(px)'
                        }
                    ],
                    onsubmit: function(e) {
                        var width = e.data.width;
                        var height = e.data.height;
                        // 在编辑器中插入特色图像标记
                        editor.insertContent('[featured_image width="'  width  '" height="'  height  '"]');
                    }
                });
            }
        });
    });
})();

上述JavaScript代码创建了一个对话框,要求用户输入所需的图像宽度和高度。然后,它将用户的输入插入到编辑器中,你可以根据你的需求修改插入的内容。

请确保在主题文件中正确加载这两个代码段。完成后,在TinyMCE编辑器中,你应该会看到一个名为“插入特色图像”的按钮,单击它将弹出一个对话框,让用户输入所需的图像尺寸。

有用0
  • 2023.10.07初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧