了解更多关于WordPress文本编辑器的信息

当我们在WordPress中创建或编辑文章时，如果禁用Gutenberg editor，我们有两个内容编辑器可供选择:TinyMCE可视化编辑器和WordPress文本编辑器。后者由一个通过按钮增强的文本区域元素组成，它提供了一种将HTML代码注入文章内容的快速方法。

用户可以通过点击右上角的标签轻松地从视觉模式切换到文本模式。WordPress会保留文章的内容，但是TinyMCE会将特殊字符转换成相应的HTML实体。因此，您可能更喜欢

推荐:了解更多关于WordPress新的Gutenberg编辑器(优缺点)

文本编辑器只是解释了文章内容的HTML结构，给了用户对输入的完全控制权，所以这篇文章讲的是WordPress的文本编辑器。首先，我们将从开发者的角度深入探讨该主题:我们将了解Quicktags JS API、quicktags_settings过滤器和wp_editor()函数。

本文的最后一部分是献给非开发人员的。我将向你展示一个允许用户从WordPress管理面板快速配置文本编辑器的插件。

比较可视化和文本编辑器。比较和文本编辑器。

文字编辑器

覆盖快速标记设置

在首页包含WordPress编辑器。

用AddQuicktag插件增强WordPress文本编辑器

WordPress文本编辑器替代品和工具

WordPress文本编辑器

如果您习惯于在文章中添加大量代码，或者您希望预览内容的准确HTML结构，您可能更喜欢准系统文本编辑器，而不是易用的高级可视化编辑器。

然而，文本编辑器不仅仅是一个表单元素。编辑器工具栏提供了一组按钮(称为快速标签)，允许用户将大量标签快速注入到HTML post结构中。

默认情况下，WordPress提供了以下快速标签:

a

强烈的

密码

倒三角形

全身长的

开环（同Open Loop）

保险商实验所

里

img

引用

移民局

全屏

检查

关闭

图片显示了WordPress文本编辑器的默认按钮。

多亏了Quicktags API，您可以覆盖默认设置。JavaScript提供了一种简单的方法来添加定制按钮，并将代码和内容注入编辑器文本区域。QTags.addButton方法添加一个按钮，它的工具栏和定义如下:

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

此方法包含以下参数:

Id (string)(必需)是HTML id的按钮；

Display (string)(必选)是一个HTML值；

Arg1 (string)(必选)是单击按钮时要包含的开始标记或要运行的自定义回调函数；

Arg2 (string)(可选)是结束标记；

Access_key (string)(可选)是按钮的快捷键；

Title (string)(可选)是HTML标题；

Priority (int)(可选)是一个数字，表示按钮在工具栏中的位置；

Instance (string)(可选)将按钮限制为特定的Quicktags实例。

现在让我们假设我们想要添加像Prism这样的语法突出显示所需的标签，并且我们想要提供带有按钮的编辑器工具栏来打印以下标签:

为了完成这项任务，我们需要将以下代码添加到插件的主文件中:

function my_quicktags() {if ( wp_script_is( ‘quicktags’ ) ) {?>QTags.addButton( ‘eg_php’, ‘PHP’, ”, ”, ‘p’, ‘PHP Code’, 100 );QTags.addButton( ‘eg_css’, ‘CSS’, ”, ”, ‘q’, ‘CSS Code’, 100 );QTags.addButton( ‘eg_html’, ‘HTML’, ”, ”, ‘r’, ‘HTML Code’, 100 );QTags.addButton( ‘eg_callback’, ‘CSS div’, css_callback );function css_callback(){var css_class = prompt( ‘Class name:’, ” );if ( css_class && css_class !== ” ) {QTags.insertContent(”);}}