tinymce 插件
If you are WordPress developer, then at some point you may come across customizing or extending the WordPress Visual Editor. For example, you may want to add a button to the Visual Editor’s toolbar to allow your client to easily insert a text box or a call to action button without writing any HTML code. In this article, we will show you how to create a TinyMCE plugin in WordPress.
如果您是WordPress开发人员，那么有时您可能会遇到自定义或扩展WordPress Visual Editor的问题。 例如，您可能想在Visual Editor的工具栏中添加一个按钮，以使您的客户端无需编写任何HTML代码即可轻松地插入文本框或号召性用语按钮。 在本文中，我们将向您展示如何在WordPress中创建TinyMCE插件。
本教程适用于高级用户。 如果您是只想扩展可视化编辑器的初学者级用户，那么请查看TinyMCE Advanced插件或查看有关使用WordPress可视化编辑器的这些提示。
For this tutorial, you will need basic coding skills, access to a WordPress install where you can test it out.
对于本教程，您将需要基本的编码技能，并可以在WordPress安装中进行测试。
It is a bad practice to develop plugins on a live website. A minor mistake in the code can make your site inaccessible. But if you must do it on a live site, then at least backup WordPress first.
在实时网站上开发插件是一种不良做法。 代码中的一个小错误会使您的网站无法访问。 但是，如果必须在实时站点上进行操作，则至少应首先备份WordPress 。
创建您的第一个TinyMCE插件 (Creating Your First TinyMCE Plugin)
We will begin by creating a WordPress plugin to register our custom TinyMCE toolbar button. When clicked, this button will allow user to add a link with a custom CSS class.
我们将首先创建一个WordPress插件来注册我们的自定义TinyMCE工具栏按钮。 单击时，此按钮将允许用户添加带有自定义CSS类的链接。
The source code will be provided in full at the end of this article, but until then, let’s create the plugin step-by-step.
本文结尾将提供完整的源代码，但在此之前，让我们逐步创建插件。
First, you need to create a directory in folder of your WordPress install. Name this folder .
首先，您需要在WordPress安装的文件夹中创建一个目录。 将此文件夹命名为 。
From here, we’ll begin adding our plugin code.
从这里开始，我们将开始添加插件代码。
插件头 (The Plugin Header)
Create a new file in the plugin directory we just created and name this file . Add this code to the file and save it.
在我们刚刚创建的插件目录中创建一个新文件，并将其命名为 。 将此代码添加到文件并保存。
This is just a PHP comment, which tells WordPress the name of the plugin, as well as the author and a description.
这只是一个PHP注释，它告诉WordPress插件的名称以及作者和描述。
In the WordPress admin area, activate your new plugin by going to Plugins > Installed Plugins, and then clicking Activate beside the TinyMCE Custom Link Class plugin:
在WordPress的admin管理区域中 ，转到插件>已安装的插件，然后单击TinyMCE自定义链接类插件旁边的激活，以激活新插件：
如果两个WordPress插件具有相同名称的功能，则将导致错误。 通过将函数包装在类中，可以避免此问题。
This creates our PHP class, along with a construct, which is called when we reach the line .
这将创建我们PHP类以及一个构造，当我们到达行时，将调用该 。
Any functions we add inside this class shouldn’t conflict with other WordPress plugins.
我们在此类中添加的任何函数都不应与其他WordPress插件冲突。
开始设置我们的TinyMCE插件 (Start Setting Up Our TinyMCE Plugin)
Next, we need to tell TinyMCE that we might want to add our custom button to the Visual Editor‘s toolbar. To do this, we can use WordPress’ actions – specifically, the action.
接下来，我们需要告诉TinyMCE，我们可能想将自定义按钮添加到Visual Editor的工具栏中。 为此，我们可以使用WordPress的操作 -特别是操作。
Add the following code inside your plugin’s function:
在插件的函数内添加以下代码：
This checks if we are in the WordPress Administration interface. If we are, then it asks WordPress to run the function inside our class when WordPress has finished its initial loading routine.
这将检查我们是否在WordPress管理界面中。 如果是这样，那么当WordPress完成其初始加载例程后，它会要求WordPress在我们的类中运行函数。
Next, add the function:
接下来，添加函数：
This checks if the current logged in WordPress user can edit Posts or Pages. If they can’t, there’s no point in registering our TinyMCE Plugin for that User, as they’ll never see the Visual Editor.
这将检查当前登录的WordPress用户是否可以编辑Posts或Pages 。 如果他们不能这样做，则没有必要为该用户注册我们的TinyMCE插件，因为他们将永远不会看到Visual Editor。
We then check if the user is using the Visual Editor, as some WordPress users turn this off via Users > Your Profile. Again, if the user is not using the Visual Editor, we return (exit) the function, as we don’t need to do anything else.
然后，我们检查用户是否正在使用可视编辑器，因为某些WordPress用户通过“用户”>“您的个人资料”将其关闭。 同样，如果用户没有使用Visual Editor，我们将返回(退出)该函数，因为我们无需执行其他任何操作。
Finally, we add two WordPress Filters – and , to call our functions which will load the required Javascript file for TinyMCE, and add a button to the TinyMCE toolbar.
最后，我们添加两个WordPress过滤器– 和 ，以调用我们的函数，这些函数将加载TinyMCE所需的Javascript文件，并在TinyMCE工具栏上添加一个按钮。
将Javascript文件和按钮注册到可视化编辑器 (Registering the Javascript File and Button to the Visual Editor)
Let’s go ahead and add the function:
让我们继续添加函数：
This function tells TinyMCE that it needs to load the Javascript files stored in the array. These Javascript files will tell TinyMCE what to do.
该函数告诉TinyMCE，它需要加载存储在数组中的Javascript文件。 这些Javascript文件将告诉TinyMCE该怎么做。
We also need to add some code to the function, to tell TinyMCE about the button we’d like to add to the toolbar:
我们还需要向函数添加一些代码，以向TinyMCE告知我们要添加至工具栏的按钮：
This pushes two items onto the array of TinyMCE buttons: a separator (|), and our button’s programmatic name ().
这会将两项推送到TinyMCE按钮的数组上：分隔符(|)和按钮的程序名称( )。
Save your plugin, and then edit a Page or Post to view the Visual Editor. Chances are, the toolbar isn’t displaying right now:
保存您的插件，然后编辑页面或帖子以查看可视编辑器。 可能是，该工具栏目前未显示：
不用担心-如果我们使用Web浏览器的检查器控制台，我们将看到TinyMCE生成了404错误和通知，告诉我们找不到Javascript文件。
很好–这意味着我们已经成功注册了TinyMCE自定义插件，现在需要创建Javascript文件来告诉TinyMCE该怎么做。
创建Javascript插件 (Creating the Javascript Plugin)
Create a new file in your folder, and name it . Add this code in your js file:
在文件夹中创建一个新文件，并将其命名为 。 将此代码添加到您的js文件中：
This calls the TinyMCE Plugin Manager class, which we can use to perform a number of TinyMCE plugin related actions. Specifically, we’re adding our plugin to TinyMCE using the function.
这将调用TinyMCE插件管理器类，我们可以使用该类执行许多与TinyMCE插件相关的操作。 具体来说，我们正在使用函数将插件添加到TinyMCE中。
This accepts two items; the name of the plugin () and an anonymous function.
这接受两个项目； 插件的名称( )和一个匿名函数。
If you’re familiar with the concept of functions in coding, an anonymous function is simply a function with no name. For example, is a function that we could call somewhere else in our code by using .
如果您熟悉编码中的函数概念，那么匿名函数就是没有名称的函数。 例如， 是一个函数，我们可以使用在代码中的其他地方调用该函数。
With an anonymous function, we can’t call that function somewhere else in our code – it’s only being called at the point the function is invoked.
使用匿名函数，我们无法在代码中的其他位置调用该函数–仅在调用函数时调用它。
Save your Javascript file, and then edit a Page or Post to view the Visual Editor. If everything worked, you’ll see the toolbar:
保存您的Javascript文件，然后编辑“页面”或“帖子”以查看可视编辑器。 如果一切正常，您将看到工具栏：
目前，我们的按钮尚未添加到该工具栏。 那是因为我们只告诉TinyMCE我们是一个自定义插件。 现在，我们需要告诉TinyMCE该怎么做–也就是说，在工具栏上添加一个按钮。
Update your Javascript file, replacing your existing code with the following:
更新您的Javascript文件，将您的现有代码替换为以下内容：
Notice our anonymous function has two arguments. The first is the instance – this is the TinyMCE Visual Editor. In the same way we can call various functions on the , we can also call various functions on the . In this case, we’re calling the function, to add a button to the toolbar.
注意我们的匿名函数有两个参数。 第一个是实例–这是TinyMCE可视编辑器。 以同样的方式，我们可以在上调用各种函数，也可以在上调用各种函数。 在这种情况下，我们将调用函数，以将按钮添加到工具栏。
Save your Javascript file, and go back to your Visual Editor. At a first look, nothing seems to have changed. However, if you hover your mouse cursor over to the right of the top row’s rightmost icon, you should see a tooltip appear:
保存Javascript文件，然后返回到可视编辑器。 乍一看，似乎没有任何改变。 但是，如果将鼠标光标悬停在第一行最右侧图标的右侧，则应该看到一个工具提示出现：
我们已经成功向工具栏添加了一个按钮，但是它需要一个图像。 在下面的行中，将以下参数添加到函数中：
定义要运行的命令 (Defining a Command to Run)
Right now, if you click the button, nothing will happen. Let’s add a command to TinyMCE telling it what to do when our button is clicked.
现在，如果您单击按钮，则什么也不会发生。 让我们向TinyMCE添加一个命令，告诉它单击按钮时该怎么做。
In our Javascript file, add the following code below the end of the section:
在我们的Javascript文件中，将以下代码添加到部分的末尾：
Reload our Visual Editor, click the button and an alert will appear confirming we just clicked the button:
重新加载我们的Visual Editor，单击按钮，然后将出现一条警告，确认我们刚刚单击了按钮：
让我们用提示替换警报，询问用户要在Visual Editor中环绕所选文本的链接：
This block of code performs a few actions.
此代码块执行一些操作。
First, we check if the user selected some text to be linked in the Visual Editor. If not, they’ll see an alert telling them to select some text to link.
首先，我们检查用户是否在可视编辑器中选择了要链接的文本。 如果不是，他们将看到警报，告诉他们选择一些文本进行链接。
接下来，我们要求他们输入链接，再次检查是否存在。 如果他们取消了，或者什么也没输入，我们就什么也不做。
最后，我们在TinyMCE编辑器上运行函数，特别是运行操作。 这将使用我们选择的文本，用我们HTML代码替换选择的文本，该HTML代码包含一个带有class =“ button”的锚链接。
If everything worked, you’ll see your selected text is now linked in the Visual Editor and Text views, with the class set to :
如果一切正常，您将看到在Visual Editor和Text视图中链接了选定的文本，并将类设置为 ：
我们已经成功创建了一个WordPress插件，该插件在WordPress的TinyMCE可视编辑器中添加了一个按钮。 本教程还介绍了可用于TinyMCE集成的TinyMCE API和WordPress过滤器的一些基础知识。
We added code so that when a user clicks our custom button, they’re prompted to select some text in the Visual Editor, which they can then link to a URL of their choice. Finally, our plugin then replaces the selected text with a linked version that contains a custom CSS class called .
我们添加了代码，以便当用户单击我们的自定义按钮时，系统会提示他们在视觉编辑器中选择一些文本，然后他们可以链接到他们选择的URL。 最后，我们的插件然后用包含一个名为的自定义CSS类的链接版本替换所选文本。
We hope this tutorial helped you learn how to create a WordPress TinyMCE plugin. You may also want to check out our guide on how to create a site-specific WordPress plugin.
我们希望本教程可以帮助您学习如何创建WordPress TinyMCE插件。 您可能还需要查看有关如何创建特定于站点的WordPress插件的指南 。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-create-a-wordpress-tinymce-plugin/