如何创建一个WordPress的TinyMCE插件

如果您是WordPress开发人员，那么在某些时候您可能会遇到自定义或扩展WordPress可视化编辑器的情况。例如，您可能希望将一个按钮添加到可视化编辑器的工具栏中，以允许您的客户端轻松插入文本框或调用动作按钮，而无需编写任何HTML代码。在本文中，我们将向您展示如何在WordPress中创建一个TinyMCE插件。

要求

本教程面向高级用户。如果您是初学者级别的用户，只需要扩展可视化编辑器，那么请查看TinyMCE Advanced插件，或者查看使用WordPress可视化编辑器的技巧。

对于本教程，您将需要基本的编码技巧，访问WordPress安装，您可以在其中进行测试。

在现场网站上开发插件是一个不好的做法。代码中的一个小错误可能会使您的网站无法访问。但是，如果你必须在一个实况网站上做，那么至少要先备份WordPress。

创建您的第一个TinyMCE插件

我们将开始创建一个WordPress插件来注册我们的定制TinyMCE工具栏按钮。点击后，此按钮将允许用户添加一个自定义CSS类的链接。

本文最后将提供源代码，但在此之前，我们将逐步创建插件。

首先，你需要在中创建一个目录 的wp-content /插件 你的WordPress安装文件夹。命名这个文件夹 TinyMCE的定制链路级 。

从这里开始，我们将开始添加我们的插件代码。

插件标题

在刚刚创建的插件目录中创建一个新文件并命名该文件 TinyMCE的定制链接，class.php 。将此代码添加到文件并保存。

/ **
  *插件名称：TinyMCE自定义链接类
  *插件URI：http://site.com
  *版本：1.0
  *作者：网站
  *作者URI：http://www.site.com
  *描述：一个简单的TinyMCE插件，在Visual Editor中添加一个自定义链接类
  *许可证：GPL2
  * /

这只是一个PHP注释，它告诉WordPress插件的名称，以及作者和描述。

在WordPress管理区域，通过进入Plugins> Installed Plugins，然后点击TinyMCE Custom Link Class插件旁边的激活来激活你的新插件：

设置我们的插件类

如果两个WordPress插件具有相同名称的功能，则会导致错误。我们将通过将我们的函数包装在一个类中来避免这个问题。

类TinyMCE_Custom_Link_Class {

 / **
 *构造函数。 当插件被初始化时调用。
 * /
 函数__construct（）{

 }

 }

 $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

这创建了我们的PHP类，以及一个构造，当我们到达线时被调用 $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; 。

我们在这个类中添加的任何函数都不应该和其他WordPress插件冲突。

开始设置我们的TinyMCE插件

接下来，我们需要告诉TinyMCE，我们可能想将我们的自定义按钮添加到可视化编辑器的工具栏中。要做到这一点，我们可以使用WordPress的行动 – 具体来说， 在里面 行动。

在你的插件里添加下面的代码 __构造（） 功能：

if（is_admin（））{
 add_action（'init'，array（$ this，'setup_tinymce_plugin'））;
 }

这检查我们是否在WordPress管理界面。如果我们是，那么它要求WordPress运行 setup_tinymce_plugin 当WordPress完成其初始加载例程时，我们班内的功能。

接下来，添加 setup_tinymce_plugin 功能：

/ **
 *检查当前用户是否可以编辑帖子或页面，并使用可视化编辑器
 *如果是这样，添加一些过滤器，所以我们可以注册我们的插件
 * /
 函数setup_tinymce_plugin（）{

 //检查登录的WordPress用户是否可以编辑帖子或页面
 //如果不是，请不要注册我们的TinyMCE插件

 if（！current_user_can（'edit_posts'）&&！current_user_can（'edit_pages'））{
 返回;
 }

 //检查登录的WordPress用户是否启用了Visual Editor
 //如果不是，请不要注册我们的TinyMCE插件
 if（get_user_option（'rich_editing'）！=='true'）{
 返回;
 }

 //设置一些过滤器
 add_filter（'mce_external_plugins'，数组（＆$ this，'add_tinymce_plugin'））;
 add_filter（'mce_buttons'，数组（＆$ this，'add_tinymce_toolbar_button'））;

 }

这将检查当前登录的WordPress用户是否可以编辑帖子或页面。如果他们不能，注册我们的TinyMCE插件没有意义，因为他们永远不会看到可视化编辑器。

然后，我们检查用户是否使用可视化编辑器，因为一些WordPress用户通过用户>您的个人资料关闭此功能。同样，如果用户不使用可视化编辑器，我们返回（退出）函数，因为我们不需要做任何事情。

最后，我们添加两个WordPress过滤器 – mce_external_plugins 和 mce_buttons ，调用我们的函数，它将加载TinyMCE所需的Javascript文件，并添加一个按钮到TinyMCE工具栏。

注册Javascript文件和按钮到可视化编辑器

我们继续并添加 add_tinymce_plugin 功能：

/ **
 *添加一个TinyMCE插件兼容JS文件到TinyMCE / Visual Editor实例
 *
 * @param数组$ plugin_array已注册的TinyMCE插件数组
 * @return数组已注册的TinyMCE插件的修改数组
 * /
 函数add_tinymce_plugin（$ plugin_array）{

 $ plugin_array ['custom_link_class'] = plugin_dir_url（__FILE__）。  'TinyMCE的定制链接-class.js';
 返回$ plugin_array;

 }

这个函数告诉TinyMCE它需要加载存储在Javascript中的Javascript文件 $ plugin_array 阵列。这些Javascript文件将告诉TinyMCE要做什么。

我们还需要添加一些代码 add_tinymce_toolbar_button 函数，告诉TinyMCE关于我们想要添加到工具栏的按钮：

/ **
 *添加一个按钮到用户可以点击的TinyMCE / Visual Editor
 *插入一个自定义CSS类的链接。
 *
 * @param array $ buttons注册TinyMCE按钮的数组
 * @return数组已注册的TinyMCE按钮的修改数组
 * /
 函数add_tinymce_toolbar_button（$ buttons）{

 array_push（$ buttons，'|'，'custom_link_class'）;
 返回$按钮;
 }

这将两个项目推到TinyMCE按钮的数组上：分隔符（|）和我们按钮的编程名称（ custom_link_class ）。

保存您的插件，然后编辑页面或张贴以查看可视化编辑器。机会是，工具栏现在不显示：

别担心 – 如果我们使用我们的网页浏览器的检查控制台，我们会看到TinyMCE已经生成了一个404错误和通知，告诉我们它找不到我们的Javascript文件。

这很好 – 这意味着我们已经成功地注册了我们的TinyMCE自定义插件，现在需要创建Javascript文件来告诉TinyMCE该做什么。

创建Javascript插件

在你的文件里创建一个新文件 可湿性粉剂内容/插件/ TinyMCE的定制链路级 文件夹，并命名它 TinyMCE的定制链接，class.js 。把这个代码添加到你的js文件中：

（function（）{
 tinymce.PluginManager.add（'custom_link_class'，function（editor，url）{

 }）;
 }）（）;

这就调用了TinyMCE插件管理器类，我们可以使用它来执行一些TinyMCE插件相关的操作。具体来说，我们使用的是将我们的插件添加到TinyMCE 加 功能。

这接受两个项目; 插件的名称（ custom_link_class ）和一个匿名函数。

如果您熟悉编码中的函数概念，匿名函数只是一个没有名字的函数。例如， 函数foobar（）{...} 是一个函数，我们可以调用我们的代码中的其他地方使用 foobar的（） 。

使用匿名函数，我们不能在代码中的其他地方调用这个函数 – 它只是在被调用的地方 加（） 函数被调用。

保存您的Javascript文件，然后编辑页面或帖子以查看可视化编辑器。如果一切正常，你会看到工具栏：

现在，我们的按钮还没有被添加到该工具栏。那是因为我们只告诉TinyMCE我们是一个自定义的插件。我们现在需要告诉TinyMCE要做什么 – 也就是向工具栏添加一个按钮。

更新您的Javascript文件，用以下代码替换您现有的代码：

（function（）{
 tinymce.PluginManager.add（'custom_link_class'，function（editor，url）{
 //将按钮添加到可视化编辑器工具栏
 editor.addButton（'custom_link_class'，{
 标题：“插入按钮链接”，
 cmd：'custom_link_class'，
 }）;
 }）;
 }）（）;

注意我们的匿名函数有两个参数。首先是 编辑 实例 – 这是TinyMCE可视化编辑器。以同样的方式，我们可以调用各种功能 插件管理 ，我们也可以调用上的各种功能 编辑 。在这种情况下，我们打电话给 Add按钮 函数，将一个按钮添加到工具栏。

保存你的Javascript文件，并返回到你的可视化编辑器。一看，似乎没有任何改变。但是，如果将鼠标光标悬停在最上面一行最右侧图标的右侧，则会看到一个工具提示：

我们已经成功地将一个按钮添加到工具栏，但它需要一个图像。将以下参数添加到 Add按钮 功能，下面 标题： 线：

image：url +'/icon.png'，

网址 是我们插件的URL。如果我们想要在我们的插件文件夹中引用一个图像文件，这是很方便的，因为我们可以将图像文件名添加到URL。在这种情况下，我们需要一个名为的图像 的icon.png 在我们的插件的文件夹中。使用下面的图标：

重新加载我们的可视化编辑器，现在您将看到带有图标的按钮：

定义一个命令来运行

现在，如果你点击按钮，什么都不会发生。让我们添加一个命令给TinyMCE，告诉它当我们的按钮被点击时该怎么做。

在我们的Javascript文件中，在下面添加下面的代码 editor.addButton 部分：

//单击按钮时添加命令
 editor.addCommand（'custom_link_class'，function（）{
 警报（“按钮点击！”）;
 }）;

重新加载我们的可视化编辑器，点击按钮，将出现一个提示，确认我们只是点击按钮：

让我们用提示替换警报，询问用户在Visual Editor中选择的文本周围的链接：

//单击按钮时添加命令
 editor.addCommand（'custom_link_class'，function（）{
 //检查我们选择了一些我们想链接的文字
 var text = editor.selection.getContent（{
 'format'：'html'
 }）;
 if（text.length === 0）{
 提醒（'请选择一些文字链接'）;
 返回;
 }

 //请求用户输入一个URL
 var result = prompt（'输入链接'）;
 if（！result）{
 //用户取消 - 退出
 返回;
 }
 if（result.length === 0）{
 //用户没有输入网址 - 退出
 返回;
 }

 //将选定的文本插入到编辑器中，并将其包装在锚标记中
 editor.execCommand（'mceReplaceContent'，false，''+ text +''）;
 }）;

这段代码执行一些操作。

首先，我们检查用户是否选择了一些在Visual Editor中链接的文本。如果没有，他们会看到一个警告，告诉他们选择一些文本链接。