wordpress中为经典编辑器添加 “批量替换”功能

✅ 改进目标：经典编辑器的「文本模式」也添加批量替换按钮

• 用「两个输入框」替代 prompt，让用户一次性填写“查找”和“替换”；

• 保持只在 文本模式 下工作；

• 使用 WordPress 自带的样式，界面美观、符合后台风格；

🔧 改进后完整代码：

// ###################在文本编辑器 WordPress 编辑器，添加批量替换功能jisongbin########################
add_action('admin_footer-post.php', 'add_batch_replace_text_mode_only');
add_action('admin_footer-post-new.php', 'add_batch_replace_text_mode_only');

function add_batch_replace_text_mode_only() {
    ?>
    <style>
        #batch-replace-box {
            background: #f1f1f1;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ccc;
            display: none;
        }
        #batch-replace-box input {
            width: 100%;
            margin-bottom: 6px;
        }
    </style>
    <script>
        jQuery(function ($) {
            // 创建替换功能的面板
            const box = $(`
                <div id="batch-replace-box">
                    <input type="text" id="findText" placeholder="查找..." />
                    <input type="text" id="replaceText" placeholder="替换为..." />
                    <button type="button" class="button button-primary" id="doReplace">执行替换</button>
                </div>
            `);

            // 创建触发按钮
            const btn = $('<button type="button" class="button">批量替换</button>');
            btn.on('click', function () {
                box.toggle(); // 显示或隐藏输入面板
            });

            // 替换逻辑，只针对文本模式
            box.find('#doReplace').on('click', function () {
                const find = $('#findText').val();
                const replace = $('#replaceText').val();
                if (!find) {
                    alert('请输入查找内容');
                    return;
                }

                // 正则安全转义
                const escapedFind = find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const regex = new RegExp(escapedFind, 'g');

                const editor = $('#content'); // 仅文本编辑器 textarea
                const val = editor.val();
                const matchCount = (val.match(regex) || []).length;
                if (matchCount === 0) return alert('未找到匹配内容');
                const updated = val.replace(regex, replace);
                editor.val(updated);

                alert(`替换完成，共替换了 ${matchCount} 处内容`);
            });

            // 插入面板和按钮，优先插入文本模式工具栏
            if ($('#ed_toolbar').length) {
                $('#ed_toolbar').append(btn);
                btn.after(box);
            } else {
                $('#wp-content-wrap').after(btn);
                btn.after(box);
            }
        });
    </script>
    <?php
}
// #######################批量替换结束#####################

🎯 效果预览：

• 在 文本模式下方出现一个「批量替换」按钮；

• 点击后展开两个输入框：

  • 查找内容

  • 替换为

• 点击“执行替换”后，立即替换 <textarea> 中的内容（支持多次点击替换）；

📌 限制说明：

• 仅作用于经典编辑器的「文本模式」；

• 不影响可视化编辑器（TinyMCE）；

• 不支持正则修饰符（如忽略大小写），如有需要可以扩展；

如你愿意，也可以进一步封装为可复用插件，或拓展至自定义字段、前端编辑等场景。是否需要我封装成插件版本？