如果你是WordPress开发者，那么在某个时候你可能会需要自定义或扩展WordPress的可视化编辑器。例如，你可能想在可视化编辑器的工具栏中添加一个按钮，让你的客户能够轻松插入文本框或呼叫动作按钮，而无需编写任何HTML代码。在本文中，我们将向你展示如何在WordPress中创建一个TinyMCE插件。
需求
本教程适用于高级用户。如果你是初级用户，只是想扩展可视化编辑器，那么请查看TinyMCE Advanced插件或者看看使用WordPress可视化编辑器的一些技巧。
本教程中，你需要具备基本的编码技能，并有一个可以测试的WordPress安装。
在使用实况网站进行插件开发是不好的做法。代码中的小错误可能会使你的网站无法访问。但如果你必须在实况网站上进行开发，那么至少先备份WordPress。
创建你的第一个TinyMCE插件
我们将从创建一个WordPress插件以注册我们自定义的TinyMCE工具栏按钮开始。当点击此按钮时，用户可以添加一个带有自定义CSS类的链接。
完整的源代码将在本文末尾提供，但在此之前，让我们一步步创建这个插件。
插件头部
首先，你需要在你的WordPress安装的wp-content/plugins文件夹中创建一个目录。将该文件夹命名为tinymce-custom-link-class。从这里开始，我们将添加我们的插件代码。
在我们刚才创建的插件目录中创建一个新文件，并将该文件命名为tinymce-custom-link-class.php。将以下代码添加到文件中并保存。
/**
* Plugin Name: TinyMCE Custom Link Class
* Plugin URI: http://wpressizeme.com
* Version: 1.0
* Author: WPressize Me
* Author URI: https://wpressizeme.com
* Description: 一个简单的TinyMCE插件，在可视化编辑器中添加自定义链接类
* License: GPL2
*/
这只是一个PHP注释，它告知WordPress插件的名称、作者及描述。
在WordPress后台管理区域，激活你的新插件，路径为“插件”>“已安装插件”，然后在TinyMCE Custom Link Class插件旁边点击“激活”。
设置我们的插件类
如果有两个WordPress插件的函数同名，将会导致错误。我们通过将我们的函数封闭在一个类中来避免这个问题。
class TinyMCE_Custom_Link_Class {
/**
* 构造函数。插件初始化时调用。
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
这创建了我们的PHP类，加上一个构造函数，当我们到达$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;这一行时会调用。任何我们添加到这个类中的函数都不会与其他WordPress插件冲突。
开始设置我们的TinyMCE插件
接下来，我们需要告知TinyMCE我们可能想在可视化编辑器的工具栏中添加我们的自定义按钮。为此，我们可以使用WordPress的动作，特别是init动作。
将以下代码添加到你的插件的__construct()函数中。
if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
这将检查我们是否在WordPress管理界面中。如果是，它将请求WordPress在完成其初始化加载程序时运行我们类中的setup_tinymce_plugin函数。
接下来，添加setup_tinymce_plugin函数。
/**
* 检查当前用户是否可以编辑文章或页面，并且使用可视化编辑器
* 如果是，则添加一些过滤器以便我们能注册我们的插件
*/
function setup_tinymce_plugin() {
&emsp// 检查登录的WordPress用户是否能编辑文章或页面
&emsp// 如果不能，则不注册我们的TinyMCE插件
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}
这块代码将检查当前登录的WordPress用户是否能够编辑文章或页面。如果不能，我们就没有必要为该用户注册我们的TinyMCE插件，因为他们永远不会看到可视化编辑器。
我们接着检查用户是否在使用可视化编辑器，因为有些WordPress用户通过“用户”>“您的个人资料”禁用了它。同样，如果用户不使用可视化编辑器，我们将返回（退出）该函数，因为我们不需要再做其他事情。
最后，我们添加两个WordPress过滤器——mce_external_plugins和mce_buttons，来调用我们的函数，这些函数将加载TinyMCE所需的Javascript文件，并在TinyMCE工具栏中添加一个按钮。
注册Javascript文件和工具按钮
添加以下函数add_tinymce_plugin：
/**
* 向TinyMCE / 可视化编辑器实例添加一个TinyMCE插件兼容的JS文件
*
* @param array $plugin_array 已注册的TinyMCE插件数组
* @return array 修改过的TinyMCE插件数组
*/
function add_tinymce_plugin( $plugin_array ) {
$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;
}
此函数告知TinyMCE它需要加载存储在$plugin_array数组中的Javascript文件。这些Javascript文件将告知TinyMCE该做什么。
我们还需要在add_tinymce_toolbar_button函数中添加一些代码，以告知TinyMCE有关我们想在工具栏中添加按钮的情况：
/**
* 向TinyMCE / 可视化编辑器添加按钮，用户可以单击
* 插入带有自定义CSS类的链接。
*
* @param array $buttons 已注册的TinyMCE按钮数组
* @return array 修改过的TinyMCE按钮数组
*/
function add_tinymce_toolbar_button( $buttons ) {
array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}
这将两个项目推入TinyMCE按钮的数组：一个分隔符（|）和我们按钮的程序名（custom_link_class）。
保存你的插件，然后编辑一个页面或文章以查看可视化编辑器。此时工具栏可能不会显示。
别担心，如果我们使用浏览器的检查控制台，我们会看到一个404错误和通知，提示TinyMCE找不到我们的Javascript文件。
这很好——这意味着我们已经成功注册了我们的TinyMCE自定义插件，现在需要创建Javascript文件来告诉TinyMCE该做什么。
创建Javascript插件
在你的`wp-content/plugins/tinymce-custom-link-class`文件夹中新建一个文件，并将其命名为`tinymce-custom-link-class.js`。在你的js文件中添加以下代码：
(function() {
tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
}
})();
这段代码调用了TinyMCE插件管理器类，我们可以使用它执行许多与TinyMCE插件相关的操作。具体来说，我们正在使用add函数将我们的插件添加到TinyMCE中。
这段代码接受两个参数；插件的名称（custom_link_class）和一个匿名函数。
如果你熟悉编码中的函数概念，匿名函数只是一个没有名称的函数。例如，function foobar() { … } 是一个我们可以在代码的其他地方调用的函数，通过使用foobar()。
使用匿名函数，我们不能在代码的其他地方调用该函数——它只在调用add()函数时被调用。
保存你的Javascript文件，然后编辑一个页面或文章以查看可视化编辑器。如果一切正常，你会看到工具栏：
现在，我们的按钮还没有被添加到工具栏中。这是因为我们只是告诉TinyMCE我们是一个自定义插件。我们现在需要告诉TinyMCE该做什么——也就是在工具栏中添加一个按钮。
更新你的JavaScript文件，替换你的现有代码为以下代码：
(function() {
tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
// 向可视化编辑器工具栏添加按钮
editor.addButton('custom_link_class', {
title: '插入按钮链接',
cmd: 'custom_link_class',
});
});
})();
注意我们的匿名函数有两个参数。第一个是编辑器实例——这是TinyMCE可视化编辑器。就像我们可以在PluginManager上调用各种函数一样，我们也可以在编辑器上调用各种函数。在这个例子中，我们调用addButton函数，在工具栏中添加一个按钮。
保存你的JavaScript文件，然后返回到可视化编辑器。乍一看，似乎什么都没有改变。但是，如果你将鼠标光标悬停在最右侧图标的右侧，你应该会看到一个工具提示显示。
我们已经成功地向工具栏添加了一个按钮，但它需要一个图标。添加以下参数到addButton函数，在title行的下面：
image: url + '/icon.png',
url是我们插件的URL。如果我们想在插件文件夹中引用一个图像文件，这非常方便，因为我们可以将图像文件名附加到URL。在这个例子中，我们需要在插件的文件夹中有一个名为icon.png的图片。
重新加载我们的可视化编辑器，你现在会看到有图标的按钮。
定义一个命令以运行
目前，如果你点击按钮，没有任何反应。让我们向TinyMCE添加一个命令，告诉它在我们的按钮被点击时该做什么。
在我们的JavaScript文件中，在editor.addButton部分的末尾添加以下代码：
editor.addCommand('custom_link_class', function() {
alert('按钮被点击了！');
});
重新加载我们的可视化编辑器，点击按钮，会弹出一个警示框，确认我们刚刚点击了按钮。
让我们用提示替换警示框，询问用户他们想在可视化编辑器中选择的文本周围插入的链接。
editor.addCommand('custom_link_class', function() {
// 检查是否选择了一些我们想链接的文本
var text = editor.selection.getContent({
'format': 'html'
});
if ( text.length === 0 ) {
alert( '请选择一些文本以进行链接。' );
return;
}
这段代码执行几个操作。
首先，我们检查用户是否选择了一些文本要在可视化编辑器中链接。如果没有，他们会看到一个提示，告诉他们选择一些文本进行链接。
接下来，我们询问他们要输入的链接，再次检查他们是否输入了。如果他们取消或没输入任何内容，我们不会做其他事情。
最后，我们在TinyMCE编辑器上运行execCommand函数，具体运行mceReplaceContent动作。这将选择的文本替换为我们的HTML代码，包括一个带有class=“button”链接，使用用户选择的文本。
如果一切正常，你会看到你的选择文本现在在可视化编辑器和文本视图中被链接了，并且设置了button类。
总结
我们成功创建了一个WordPress插件，它在WordPress的TinyMCE可视化编辑器中添加了一个按钮。本教程还介绍了TinyMCE API的基础知识以及WordPress提供的用于TinyMCE集成的过滤器。
我们添加了代码，当用户点击我们自定义按钮时，它们会提示在可视化编辑器中选择一些文本，并链接到他们选择的URL。最后，我们的插件将所选文本替换为包含自定义CSS类button的链接版本。
我们希望本教程帮助你学习如何创建一个WordPress TinyMCE插件。你可能还想查看我们关于如何创建一个网站特定WordPress插件的指南。
