排行榜 统计
  • 建站日期:2021-12-1
  • 文章总数:40 篇
  • 评论总数:345 条
  • 分类总数:21 个
  • 最后更新:2月13日
none

深入剖析WordPress的TinyMCE编辑器

本文阅读 14 分钟
首页 正文
未收录,推送中

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

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

WordPress的TinyMCE编辑器

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

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

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

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

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样式的列表

现在按钮已被激活,我们可以通过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下拉菜单

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

  • 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 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中可用的隐藏按钮列表:

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

图像显示了包含所有可用按钮的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

为了将表格按钮包含到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插件添加到WordPress可视化编辑器。

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

构建TinyMCE插件

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

Selected text

我们甚至可以决定在标签中添加一个 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( '
' + content + '
' ); } }); }); editor.addButton( 'prism', { type: 'menubutton', text: 'Prism', icon: 'code', menu: items }); }); })();

此代码也可在Gist上找到

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

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

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

适用于WordPress的TinyMCE高级插件

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

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

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

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

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

TinyMCE Advanced提供了一个完整的编辑器设置列表

小结

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


微海报
分享

本文来自投稿,不代表本站立场,如若转载,请注明出处:http://bijilu.com/archives/298/
-- 展开阅读全文 --
召唤神龙小游戏源码
« 上一篇 01-02
使用攻略
下一篇 » 02-05

发表评论

成为第一个评论的人

作者信息

作者有点忙,还没写简介
TA的最新作品
    请设置要调用的作者ID

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

最多点赞

1赞, 阅读:17
1赞, 阅读:40
0赞, 阅读:163
0赞, 阅读:96

标签TAG

热评文章