注册
> 资源中心>博客资讯>软件工具

深入剖析WordPress的TinyMCE编辑器

WBOLT_COM 1 月 05, 2022 2.4k+ 0

深入剖析WordPress的TinyMCE编辑器

虽然现在WordPress主推它的古腾堡编辑器，但我们有必要专门针对WordPress的TinyMCE编辑器写一篇文章。此前我们已经撰写了一篇文章是关于WordPress文本编辑器，而在这篇文章中，我们将剖析WordPress的TinyMCE编辑器，我们将根据自己的意愿进行调整。按照下面的操作，我们将向您展示如何：

WYSIWYG编辑器 TinyMCE是一个基于浏览器的WYSIWYG编辑器，用JavaScript编写，并在LGPL下作为开源软件发布

WordPress的TinyMCE编辑器

默认情况下，WordPress的TinyMCE编辑器提供两行按钮来创建、编辑和格式化文章内容。第一行（主工具栏）包括样式和格式设置功能。附加控件允许添加、编辑和删除锚点，添加<!–more–>标签，激活无干扰模式。对于具有文字处理器基本知识的任何人来说，所有这些按钮都应该非常熟悉。

工具栏切换按钮切换高级编辑器工具栏（第二行按钮），它提供文本元素（段落、标题和预格式化文本）的下拉菜单、更多样式控件和一些附加功能（粘贴为文本、清除格式、特殊字符（撤消和重做）在许多方面都派上用场。

特殊字符表允许用户快速添加HTML实体

特殊字符表允许用户快速添加HTML实体

最后，问号按钮提供了可改善用户书写体验的键盘快捷键列表。

TinyMCE快捷方式面板

TinyMCE快捷方式面板

现在将您的内容添加到可视化编辑器中并为其设置样式，然后切换到文本编辑器。您会找到相应的HTML结构，因为WordPress在从视觉模式切换到文本模式时会保留您的输入。

默认的主工具栏和高级工具栏提供了大量功能，可以使用附加按钮和控件进行扩展。其中许多按钮在TinyMCE中都是开箱即用的，我们只需要激活它们即可使它们生效。此外，我们可以通过安装一个或多个现有插件来添加大量高级功能。

如果所有这些按钮还不够，我们可以通过开发自定义插件，用您最酷的功能来增强编辑器。

话虽如此，让我们从最简单和最常见的API用法开始。

将自定义样式添加到TinyMCE编辑器

假设您需要提供一种简单的方法将自定义样式添加到来自TinyMCE的文章内容中。这是一个两步程序：

  • 首先，我们需要激活一个名为Styleselect的隐藏下拉菜单，
  • 然后我们必须定义我们想要添加到Styleselect菜单的每个样式。

我们可以通过过滤TinyMCE按钮数组来完成第一个任务。默认工具栏显示一两行按钮，但由于以下过滤器，我们最多可以启用四行工具栏：

  • mce_buttons过滤主工具栏按钮（第一行），始终可见；
  • mce_buttons_2过滤高级工具栏按钮（第二行），可以由用户打开/关闭；
  • mce_buttons_3默认不活动；
  • mce_buttons_4默认不活动。

我们可以将回调函数挂接到这些过滤器之一以显示/隐藏现有按钮，例如样式选择下拉菜单。以下功能启用第二行中的菜单：

function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

所述PHP函数array_unshift预先考虑styleselect元件到的前$按钮阵列。

格式下拉菜单将显示所有可用CSS样式的列表

格式下拉菜单将显示所有可用CSS样式的列表

现在按钮已被激活，我们可以通过tiny_mce_before_init过滤器过滤一组TinyMCE配置参数来注册我们的自定义样式。考虑以下函数：

function my_tiny_mce_before_init( $mceInit ) {
$style_formats = array(
array(
'title' => 'PHP',
'block' => 'code',
'classes' => 'language-php'
)	
);
$mceInit['style_formats'] = json_encode( $style_formats );	
return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

所述style_formats元件是元件的JSON编码数组。每个元素设置单个菜单项的配置参数。上面的函数用单个自定义元素替换默认样式，该元素将所选文本包装在code.language-php元素中。

包含单个自定义项的Styleselect下拉菜单

包含单个自定义项的Styleselect下拉菜单

在我们的示例中，我们为单个菜单项设置了三个属性：

  • title : 菜单项的标题；
  • block : 要生成的块元素；
  • classes：要应用于选择的以空格分隔的CSS类列表。

我们将代码元素添加为块，因此它只会应用于完整选择一次。将其添加为内联元素会将代码标记应用于每个选定的行。

我们可以添加更多项目并按类别对它们进行分组，如下例所示：

function my_tiny_mce_before_init( $mceInit ) {
$style_formats = array(
array(
'title' => 'Code language',
'items' => array(
array(
'title' => 'PHP',
'block' => 'code',
'classes' => 'language-php'
),
array(
'title' => 'CSS',
'block' => 'code',
'classes' => 'language-css'
),
array(
'title' => 'HTML',
'block' => 'code',
'classes' => 'language-html'
)
)
)	
);
$mceInit['style_formats'] = json_encode( $style_formats );
return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

所述style_formats元件是的参数的多维数组。在此示例中，我们添加了第一级项（代码语言）和三个子项（PHP、CSS、HTML）。下图显示了生成的菜单。

我们可以对菜单项进行分组并减小屏幕上的菜单大小

我们可以对菜单项进行分组并减小屏幕上的菜单大小

TinyMCE将样式应用于所选元素，但不知道这些样式，因此它们不会应用于编辑器中的内容。如果需要实时预览，我们必须使用add_editor_style()函数注册一个自定义样式表：

/**
* Registers an editor stylesheet for a custom theme.
*/
function my_theme_add_editor_styles() {
add_editor_style( 'css/my-editor-style.css' );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

此函数注册一个样式表，TinyMCE将使用该样式表将内容样式化到编辑器中。例如，假设我们想对PHP、CSS和HTML代码应用不同的颜色。为了完成这个任务，我们将以下声明添加到css/my-editor-style.css样式表中：

.language-php{ color: red; }
.language-css{ color: green; }
.language-html{ color: blue; }

TinyMCE将产生如下图所示的输出。

TinyMCE编辑器内容样式化

注意：我们只查看了几个配置设置，但是TinyMCE API使开发人员可以很好地控制编辑器。有关元素和属性的完整列表以及一些用法示例，请参阅TinyMCE文档。

启用TinyMCE隐藏按钮

我们可以通过多种方式向可视化编辑器添加按钮。在许多情况下，我们不需要构建自定义按钮，因为TinyMCE提供了大量我们可以轻松激活的隐藏按钮。其中一个按钮是Styleselect下拉菜单，但我们有一长串非活动按钮，我们可以通过mce_buttons_{n}过滤器之一过滤按钮数组来激活（有关可用按钮的完整列表，请参阅TinyMCE文档）。

考虑以下示例：

function my_mce_buttons_3( $buttons ) {	
$buttons[] = 'superscript';
$buttons[] = 'subscript';
return $buttons;
}
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );

上面的回调函数将上标和下标元素添加到数组$buttons的末尾。 启用TinyMCE隐藏按钮 图像显示了添加到TinyMCE工具栏第三行的两个额外按钮

以下是TinyMCE中可用的隐藏按钮列表：

  • 剪切
  • 复制
  • 粘贴
  • hr
  • 格式选择
  • 字体选择
  • 字体大小选择
  • 样式选择
  • 下标（以前是sub）
  • 上标（以前是sup）
  • 背景色
  • 新文件

图像显示了包含所有可用按钮的TinyMCE工具栏

图像显示了包含所有可用按钮的TinyMCE工具栏

如果这些按钮都不适合我们的需求，我们可以为编辑器提供更多功能，这要归功于大量的官方插件。

使用TinyMCE插件增强可视化编辑器

假设您的目标是通过WordPress插件将TinyMCE Table按钮包含到可视化编辑器中。

首先，您必须从TinyMCE网站下载开发包。解压zip文件并从/js/tinymce/plugin/table文件夹中获取plugin.min.js文件。

在/wp-content/plugins 中创建以下文件夹：

  • /wp-content/plugins/tinymce-example-plugin/
  • /wp-content/plugins/tinymce-example-plugin/mce/table

完成后，在插件根文件夹中创建一个新的tinymce-example-plugin.php文件，并将plugin.min.js文件上传到table文件夹中（见下图）。

图为插件文件结构

图为插件文件结构

现在将以下行添加到tinymce-example-plugin.php：

<?php
/**
* @package TinyMCE_example_plugin
* @version 1.0
*/
/*
Plugin Name: TinyMCE example plugin
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/

为了将表格按钮包含到TinyMCE编辑器中，我们只需要两个过滤器：mce_buttons向TinyMCE主工具栏添加新按钮（我们可以使用任何mce_buttons_{n}过滤器，具体取决于必须显示按钮的行）mce_external_plugins加载外部TinyMCE插件。

这是插件文件的代码：

function example_plugin_register_buttons( $buttons ) {
$buttons[] = 'table';
return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );
function example_plugin_register_plugin( $plugin_array ) {
$plugin_array['table'] = plugins_url( '/mce/table/plugin.min.js', __FILE__ );
return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

第一个函数向主工具栏添加一个新按钮，而第二个函数从指定的URL加载插件。该plugins_url()函数获取绝对URL到插件目录下的指定文件（阅读更多Codex）。

现在我们可以保存文件并激活插件。下图显示了增强的工具栏。

TinyMCE编辑器增强的工具栏

就这样。按照相同的步骤，我们可以将任何现有的TinyMCE插件添加到WordPress可视化编辑器。

您可以在Gist上查看此示例的PHP代码。

构建TinyMCE插件

最后，我们可以构建我们的TinyMCE自定义插件。假设您要添加一个按钮以允许用户将所选内容包装在以下标签中：

<pre><code>Selected text</code></pre>

我们甚至可以决定在<code>标签中添加一个 CSS 类，以提供对Prism代码荧光笔的支持。我们要：

  • 在WordPress插件中注册自定义TinyMCE按钮和插件；
  • 开发TinyMCE插件；

我们已经知道如何在TinyMCE中注册插件和添加按钮：

function example_plugin_register_buttons( $buttons ) {
$buttons[] = 'prism';
return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );
function example_plugin_register_plugin( $plugin_array ) {
$plugin_array['prism'] = plugins_url( '/mce/prism/plugin.js', __FILE__ );
return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

这与前面的示例代码完全相同，唯一的区别是现在我们正在注册一个名为Prism的自定义插件。现在让我们创建以下plugin.js文件：

(function() {
var languages = ['css', 'php', 'html', 'javascript'];
tinymce.PluginManager.add( 'prism', function( editor ){
var items = [];
tinymce.each( languages, function( languageName ){
items.push({
text: languageName,
onclick: function(){
var content = tinyMCE.activeEditor.selection.getContent();
editor.insertContent( '<pre><code class="language-' + languageName + '">' + content + '</code></pre>' );
}
});
});
editor.addButton( 'prism', {
type: 'menubutton',
text: 'Prism',
icon: 'code',
menu: items
});
});
})();

此代码也可在Gist上找到。

我们的目标不是深入研究TinyMCE API，您可以在TinyMCE开发人员文档中找到您需要了解的所有信息。这个文件应该放在我们插件目录的/mce/prism/子文件夹中。JS函数在languages数组的元素之间进行迭代，并将一个新对象推送到每种语言的items 数组中。addButton方法创建Prism菜单按钮，并为items数组的每个元素添加一个菜单项。

保存、上传和刷新，您华丽的下拉菜单按钮将以其美丽的方式弹出。

TinyMCE编辑器添加菜单项

关于如何开发TinyMCE插件的更多信息可以在开发人员的在线文档中找到。

适用于WordPress的TinyMCE高级插件

如果您不是开发人员，也可以增强可视化编辑器。TinyMCE Advanced是一个免费的WordPress插件，它将十五个TinyMCE插件的功能带到默认的可视化编辑器中。

感谢TinyMCE Advanced，用户可以在编辑器工具栏的四行上添加、删除、重新排列按钮。此外，该插件还提供了一个选项来启用工具栏上方的菜单。

TinyMCE高级插件 从编辑器设置页面，我们可以添加、删除和排列TynyMCE工具栏上的按钮

从插件选项页面，我们可以启用几个高级功能，如表格按钮、字体系列和字体大小菜单、显示块和显示不可见字符按钮。

其他选项允许用户确定将受新设置等影响的编辑器。

深入剖析WordPress的TinyMCE编辑器-15 TinyMCE Advanced提供了一个完整的编辑器设置列表

小结

TinyMCE API提供了很多可以玩的东西。我们可以激活隐藏的功能或注册外部插件。如果没有可用的功能对我们来说足够，我们可以使用 API 并构建自定义扩展。您有任何进一步的想法来增强WordPress TinyMCE编辑器吗？

评论收藏微海报
分享
分享到

相关推荐

评论留言

热门主题

热门插件

  • WordPress的TinyMCE编辑器
  • 将自定义样式添加到TinyMCE编辑器
  • 启用TinyMCE隐藏按钮
  • 使用TinyMCE插件增强可视化编辑器
  • 构建TinyMCE插件
  • 适用于WordPress的TinyMCE高级插件
  • 小结