专注国内外云服务器
分享建站技术教程

深入了解WordPress文本编辑器

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

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

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

推荐阅读:深入了解WordPress新的古腾堡编辑器(优点和缺点)

在文本编辑器正好说明了文章内容的HTML结构,它赋予了用户输入的完全控制权,所以这个文章是关于WordPress的文本编辑器。首先,我们将从开发人员的角度深入探讨该主题:我们将查看Quicktags JS APIquicktags_settings过滤器和wp_editor()函数。

这篇文章的最后一部分专门针对非开发人员。我将向您展示一个插件,允许用户从WordPress管理面板快速配置文本编辑器。

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

WordPress文本编辑器

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

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

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

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

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

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

此方法保留以下参数:

现在让我们假设我们想要添加像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 );

<?php }
}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );

admin_print_footer_scripts是一个动作钩子,用于在管理页面的页脚中打印脚本。回调函数检查quicktags脚本是否在使用中,然后打印JS代码。此脚本向管理面板中的Quicktags的任何实例添加了另外三个按钮,如下图所示。

图像显示了我们新的自定义按钮

向编辑器工具栏添加按钮相对简单,但我们可以使用Quicktags API做更多事情。例如,我们可以向QTags.addButton方法传递一个回调函数,当用户点击相应的按钮时运行。考虑以下代码:

function custom_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>

QTags.addButton( 'eg_callback', 'CSS div', css_callback );
function css_callback(){
var css_class = prompt( 'Class name:', '' );
if ( css_class && css_class !== '' ) {
QTags.insertContent('

文章来源于互联网:深入了解WordPress文本编辑器

相关推荐: 电子商务欺诈预防:7种最严重的诈骗以及如何预防

您的怀疑是正确的:电子商务欺诈正在增加。根据 LexisNexis Risk Solutions的一项年度研究,准确地说是上涨了近30% 。更令人不安的是: 根据Digital Commerce 360​​的数据,这个数字几乎是电子商务销售额增长的两倍。 更糟…

赞(0)
未经允许不得转载:吾上云 » 深入了解WordPress文本编辑器
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们