将自定义功能添加到WordPress Visual Editor

钥匙要点

可以自定义由Tinymce编辑器控件提供动力的WordPress Visual Editor，以添加唯一功能，例如创建和注册自定义Tinymce插件，该插件将选定的文本包装在CSS类中。
• >要添加自定义功能，您需要在WordPress网站中创建一个Tinymce插件，注册Tinymce操作和过滤器，然后使用Tinymce过滤器（MCE_EXTERNETHREL_PLUGINS和MCE_BUTTONS）加载外部Tinymce插件，并将/删除/添加/删除/删除tinymce工具基键工具键工具键工具barar 。
还可以通过创建一个JavaScript插件来添加
• 自定义功能，该插件告诉Tinymce如何输出按钮以及单击时该操作。这涉及使用Tinymce插件管理器类将插件添加到Tinymce，使用AddButton函数注册按钮，并使用AddCommand函数注册命令。
>可以在不使用插件编码的情况下自定义WordPress Visual Editor。为此目的的一些流行插件包括Tinymce Advanced，WP编辑和Ultimate Tinymce。
内容编辑器是WordPress的关键部分。它允许用户在A
• visual
wysiwyg中创建和管理他们的内容，画廊和视频（您看到的是您得到的）。

>

>它还带有atext>视图，该视图允许用户在其内容中插入或修改HTML。

WordPress Visual Editor由Tinymce编辑器控件提供动力，该编辑器提供了Wysiwyg视图以及您看到的格式按钮：>

感谢Tinymce API和WordPress的滤镜挂钩，我们可以将自己的功能添加到WordPress Visual Editor中。具体来说，我们将研究如何创建和注册一个自定义Tinymce插件，该插件将选定的文本包装在CSS类中。

创建Tinymce插件

在您的WordPress网站上，创建WP-CONTENT/插件/Tinymce-Custom-Class文件夹。

>我们将在这里存储插件的文件，因此下一个使用以下代码创建一个名为tinymce-custom-class.php的文件：>

>这为WordPress提供了一些有关我们的插件的信息，并设置了我们的构造，我们将在其中注册我们的Tinymce操作和过滤器。

WordPress Tinymce滤波器

Tinymce提供了两个关键过滤器，用于在Visual Editor工具栏上注册元素：

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

>

mce_external_plugins：用于加载外部Tinymce插件（https://codex.wordpress.org/plugin_api/filter/filter_reference/mce_external_plugins）> MCE_BUTTONS：用于将/删除按钮添加到Tinymce工具栏（https://codex.wordpress.org/plugin_api/plugin_api/filter/filter/filter/mce_butference/mce_buttons，mce_buttons_2

>在调用这些过滤器之前，我们希望检查我们在WordPress管理屏幕中。将以下代码添加到__ -construct：>

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

接下来，添加setup_tinymce_plugin函数以执行一些进一步的检查：

<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

这检查了WordPress用户是否可以编辑帖子或页面。如果他们不能的话，为该用户注册我们的Tinymce插件是没有意义的，因为他们永远不会看到视觉编辑器。 然后，我们检查用户是否正在使用Visual Editor，因为某些WordPress用户通过

>用户>您的个人资料

关闭了此功能。同样，如果用户不使用视觉编辑器，我们将返回（退出）函数，因为我们不需要做任何其他操作。> 如果上述检查通过，则注册了两个Tinymce WordPress滤波器-MCE_EXTERNEN_PLUGINS和MCE_BUTTONS。

>第一个过滤器 - MCE_EXTERNAL_PLUGINS - 允许我们注册将与Visual Editor进行交互的Tinymce JavaScript插件文件。让我们在同类中添加此过滤器的函数调用：

在这里，我们在$ plugin_array中注册一个JavaScript文件，其中包含所有Tinymce JavaScript插件。

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>

第二个过滤器 - MCE_BUTTONS - 告诉Tinymce我们想在Visual Editor中注册一个按钮。同样，让我们​​在我们的课内添加此过滤器的函数调用：

此注册我们的tinymce按钮的编程名称（custom_class）。

<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
    <span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span>    <span>return $plugin_array;
</span>
<span>}</span>

创建JavaScript插件

>我们调用MCE_EXTERNAL_PLUGINS时，我们引用了JavaScript文件。现在，我们需要创建该文件，并在其中添加一些JavaScript代码。这将告诉Tinymce如何输出按钮，以及单击时该怎么办。

>

>在插件文件夹中创建一个新文件，称为tinymce-custom-class.js，插入以下代码：

>

此JavaScript函数执行了一些操作：

<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
    <span>array_push( $buttons, 'custom_class' );
</span>    <span>return $buttons;
</span>
<span>}</span>

>它调用Tinymce插件管理器类，我们可以用来执行许多与Tinymce插件相关的操作。具体来说，我们使用添加功能将插件添加到Tinymce。 在添加例程中，我们可以通过编辑器实例访问视觉编辑器。我们使用AddButton函数注册我们的按钮，该函数由标题，命令和图标映像。

>
• >最后，我们使用AddCommand函数注册一个命令，该函数显示了一个警报，告诉我们何时单击我们的按钮。
• >我们还需要在我们的插件文件夹中包含iCON.png映像 - 这是将用于按钮的图标图像：
>
保存代码，并在WordPress管理>插件中激活您的插件。

>

接下来，创建或编辑页面或帖子，您希望使用图标看到您的按钮：

单击按钮，您将看到

>按钮单击！

警报：

定义运行

的命令

>让我们用提示替换警报，向用户询问他们想在视觉编辑器中包裹所选文本的CSS类名称：

>

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

此命令执行一些理智检查，以确保用户选择了一些文本，输入了CSS类名称并且没有取消该过程。>

如果这些检查通过，我们然后运行编辑器的execcommand函数，以替换所选文本，其中包含在跨度标签中的选定文本，其中包括输入的CSS类。

如果一切正常，请切换到“文本”视图，您会看到所选的文本现在包裹在跨度标签中：

结论

>我们创建了一个WordPress插件，以在Tinymce Visual Editor中添加一个按钮。在此过程中，我们探索了WordPress与Tinymce集成的过滤器，以及在单击时添加按钮并执行操作所需的JavaScript代码。

>。

>要下载完整的源代码，请访问github存储库或直接zip文件下载链接。

在下一篇文章中，我们将介绍一些更高级的步骤，以进一步自定义Tinymce插件。

>在WordPress Visual Editor中添加自定义功能的常见问题（常见问题解答）

>如何在WordPress Visual Editor中添加自定义按钮？此API允许您在工具栏中添加新按钮并定义其功能。您可以在WordPress安装插件目录中创建一个新的插件文件，并使用“ MCE_BUTTONS”过滤器添加按钮。然后，您可以使用'MCE_EXTERNAL_PLUGINS'过滤器加载插件的JavaScript文件，该文件将定义按钮的功能。

>我可以在不编码的情况下自定义WordPress Visual Editor吗？自定义WordPress Visual Editor而无需使用插件编码。有几个插件可让您在工具栏上添加，删除或重新排列按钮，更改编辑器的外观，并添加自定义样式和格式。为此目的的一些流行插件包括Tinymce Advanced，WP编辑和Ultimate Tinymce。

>如何将自定义样式添加到WordPress Visual Editor？

您可以在WordPress Visual中添加自定义样式编辑器使用“ tiny_mce_before_init”过滤器。该过滤器允许您修改Tinymce设置数组，其中包含“ style_formats”选项。您可以将自定义样式添加到此选项中，作为数组数组，每个数组都定义样式。每种样式都应包括“标题”，“块”，“类”和“包装器”属性。

什么是Tinymce，它与WordPress Visual Editor有何关系？

Tinymce是一种基于平台独立于Web的JavaScript HTML Wysiwyg编辑器控制。这是为WordPress Visual编辑器提供动力的基础软件。通过理解和使用Tinymce API，您可以在WordPress Visual Editor中添加自定义功能。

>如何在WordPress Visual Editor中添加自定义字体？

您可以添加自定义字体通过使用“ MCE_CSS”过滤器来到WordPress Visual Editor。该过滤器允许您将其他CSS文件添加到编辑器。您可以创建一个CSS文件，该文件导入您的自定义字体并定义使用它的类，然后使用“ MCE_CSS”过滤器将此文件添加到编辑器中。

>我可以在移动设备上使用WordPress Visual Editor是的，是的，WordPress Visual Editor完全响应，可以在移动设备上使用。但是，由于屏幕尺寸较小，某些工具栏按钮可能隐藏在“厨房接收器”下拉菜单中。

>我如何在WordPress Visual Editor中添加自定义格式？通过使用“ tiny_mce_before_init”过滤器和'style_formats'选项，将其定制为WordPress Visual Editor。您可以将自定义格式定义为数组数组，每个数组定义格式。每种格式都应包括一个“标题”，“内联”，“类”和“包装器”属性。

>我如何禁用WordPress Visual Editor？

>您可以禁用WordPress Visual通过转到用户>在WordPress管理区域中的个人资料并检查“编写“视觉编辑器”选项时禁用视觉编辑器。

我可以在WordPress Visual Editor中使用短代码？您可以在WordPress Visual Editor中使用短代码。只需在编辑器中输入短代码即可在显示帖子时对其进行处理。

>

>如何将表添加到WordPress Visual Editor？

您可以将表添加到WordPress通过使用工具栏上的“表”按钮可视化编辑器。如果此按钮不可见，则可能需要安装诸如Tinymce Advanced之类的插件才能添加它。>

以上是将自定义功能添加到WordPress Visual Editor的详细内容。更多信息请关注PHP中文网其他相关文章！