：为何要为WordPress TinyMCE编辑器添加额外按钮？

WordPress作为全球最流行的内容管理系统，其默认的可视化编辑器TinyMCE满足了大多数用户的基本写作需求。只是因为内容创作需求的提升，默认工具栏中的按钮显得有些单一，无法满足更丰富的排版和格式化要求。

本文将围绕如何通过WordPress钩子为TinyMCE编辑器添加额外按钮展开， 详细讲解代码实现过程，并结合实用案例，帮助开发者和站长们轻松 编辑器功能，从而提升内容编辑效率和体验。

TinyMCE编辑器简介与自定义背景

TinyMCE是一个基于JavaScript的富文本编辑器，被WordPress集成用于文章和页面的内容编辑。它拥有多种预设按钮，如加粗、斜体、链接插入等，但许多高级功能默认被隐藏或者需要手动启用。

利用WordPress提供的过滤钩子， 可以在不修改核心文件的前提下自定义TinyMCE工具栏，向其中添加更多实用按钮，比如分隔线、字体选择、颜色选择、上标下标等。

准备工作：理解WordPress钩子机制及相关API

在深入代码之前， 我们先了解几个关键概念：

• 过滤钩子允许开发者修改特定数据或行为，这里用于改变TinyMCE工具栏数组。
• 动作钩子施行特定操作，一般用于初始化插件或加载资源。
• TinyMCE工具栏按钮数组一个字符串数组， 每个元素代表一个按钮名称，通过修改该数组来增删按钮。

常用过滤钩子名称说明

• mce_buttons: 控制第一行工具栏按钮列表。
• mce_buttons_2, mce_buttons_3, mce_buttons_4: 分别对应第二、 第三、第四行工具栏按钮列表。
• wysiwyg_tinymce_plugins: 用于启用或禁用TinyMCE插件功能， 如“hr”、“fullscreen”等。

第一步：为TinyMCE添加额外基础按钮——代码示例与解析

代码解析：

• $buttons: 接收当前已有的一组按钮名数组，在该函数中向末尾追加所需功能对应的键名。
• 'hr': 插入水平分割线， 是文章排版常用元素之一；其他如'del','sub','sup'分别对应删除线、下标与上标效果，为科学公式等场景提供支持。
• 'fontselect' 和 'fontsizeselect': 字体类型及字号大小选择，使内容样式更加灵活多变。
• 'backcolor': 背景色设置， 可让文字高亮，更加醒目易读。
• 'add_filter': 将自定义函数挂载到指定过滤钩子， 实现动态修改TinyMCE配置，无需触碰核心文件平安且升级无忧。

TinyMCE多行工具栏详解及应用场景建议

建议： 如果想增强基本排版体验，可以将字体和字号类控件放置于第二行；如果需要独立区域，则使用第三行。这样层次清晰且避免界面过度拥挤。

第二步：启用相应插件确保新增按钮生效——示例代码解析及完善方案

TinyMCE某些高级功能依赖额外JavaScript插件支持， 比如“hr”插入分割线就需要开启相应插件，否则即便有图标也无法使用。我们可以利用wysiwyg_tinymce_plugins 钩子来激活这些插件：

"hr" — 用于插入水平分割线; "fullscreen" — 全屏写作模式切换; "lists" — 有序/无序列表支持; "link" — 链接相关操作; "charmap" — 特殊符号表; "paste" — 粘贴处理优化; "textcolor" — 字体颜色调整; "media" — 媒体嵌入支持; "table" — 表格管理; "wordpress" & "wpdialogs", "wpeditimage", "wpview", "wplink", "wpdialogs", "wordpressimage"...这些是专门针对WP集成做了二次封装的组件. 第三步：实现自定义完整案例——给TinyMCE增加“Highlight”文本高亮自定义按钮 为了更好理解上述步骤，我们以添加一个自定义“文本高亮”功能为例，从零开始详细演示所有环节，包括注册JS脚本、自定义命令及添加图标等全过程！

`getInfo` 返回信息便于后续维护识别。 `PluginManager.add` 告诉tinymce加载此自定义插件。 与拓展建议 This教程涵盖了从基础到进阶如何通过钩子给 WordPress 内置 TinyMCE 编辑器增加额外按键的方法， 不论是简单调用隐藏默认控件还是完全自己编写交互式新控件，都能满足绝大部分场景需求。

这是典型且实用性强的小 方案，非常适合有一定PHP/JS基础但初学WP开发的新手学习！ 以下所有代码均基于最新稳定版WordPress测试通过！ 1. 注册并加载自定义JS脚本文件以 TinyMCE命令处理逻辑 2. 添加新的按钮到指定toolbar列 3. 编写JavaScript脚本实现高亮命令逻辑 { tinymce.create("tinymce.plugins.highlight_button", { init : function { ed.addButton("highlight_button_key", { title : "文本高亮", image : url + "/icon-highlight.png", onclick : function { var selected_text=ed.selection.getContent; if{ ed.execCommand; } else{ alert; } } }); }, createControl : function { return null; }, getInfo : function { return { longname : "Text Highlight Button", author : "YourName", version : "1.0" }; } }); tinymce.PluginManager.add; }); 说明： `tinymce.create` 创建了新的tiny plugin对象， 用于注册我们的新控件；`ed.addButton` 实现实际图标注入并绑定点击事件；点击时通过 `execCommand` 替换所选文字包裹黄色背景Span标签达到高亮效果；没有选中文本时弹窗提醒用户操作规范；图标路径引用了当前js所在目录，需要自行准备图标文件 `icon-highlight.png` 。