描述

QuickTags API允许您在WordPress经典编辑器的文本(HTML)模式中包含其他按钮。

历史

此API引入了 WordPress 3.3

用法

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

参数

  • id((细绳)(必需的): 该按钮的HTML ID。默认:没有任何
  • display((细绳)(必需的): 按钮的HTML值。默认:没有任何
  • arg1((细绳)(必需的): 要么像“ <span>”这样的启动标签,要么单击按钮时执行的回调。默认:没有任何
  • arg2((细绳)(选修的): 结束标签,例如“ </span>”。如果不需要关闭标签(即“ <hr />”),请留空。默认:没有任何
  • access_key((细绳)(选修的):弃用且未使用。 快捷方式访问按钮。默认:没有任何
  • title((细绳)(选修的): 按钮的HTML标题值。默认:没有任何
  • priority((int)(选修的): 一个代表工具栏中按钮所需位置的数字。1 – 9 =第一,11 – 19 =第二,21 – 29 =第三等。默认值:没有任何
  • instance((细绳)(选修的): 将按钮限制为QuickTags的特定实例,如果不存在,将按钮添加到所有实例中。默认:没有任何
  • object((attr)(选修的): 用于传递其他属性。目前支持ariaLabelariaLabelClose(对于“关闭标签”状态)

返回值

((混合)null或背面式组件所需的按钮对象。

例子

下面的示例将在文本编辑器中的默认QuickTag中添加HTML按钮。

现代例子

此示例使用Inline JS API添加JavaScript时,当QuickTag被启用时。

/**
 * Add a paragraph tag button to the quicktags toolbar
 *
 * @return void
 */
function wporg_add_quicktag_paragraph() {
	wp_add_inline_script(
		'quicktags',
		"QTags.addButton( 'eg_paragraph_v2', 'p_v2', '<p>', '</p>', '', 'Paragraph tag v2', 2, '', { ariaLabel: 'Paragraph', ariaLabelClose: 'Close Paragraph tag' });"
	);
}
add_action( 'admin_enqueue_scripts', 'wporg_add_quicktag_paragraph' );

另一个现代例子

在此示例中

  1. 使用适当的WordPress函数辅助脚本 wp_enqueue_script
  2. 在QuickTag呼叫后单击“ QuickTag”时,请致电任何要发射的JavaScript。

加入脚本

将下面的代码放入Active主题functions.php

function enqueue_quicktag_script(){
	wp_enqueue_script( 'your-handle', get_template_directory_uri() . '/editor-script.js', array( 'jquery', 'quicktags' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'enqueue_quicktag_script' );

JavaScript本身

创建新文件editor-script并在活动主题目录下保存。

QTags.addButton( 'eg_paragraph_v3', 'p_v3', my_callback, '', '', 'Prompted Paragraph tag', 3, '', { ariaLabel: 'Prompted Paragraph' } ); 

function my_callback(){
  var my_stuff = prompt( 'Enter Some Stuff:', '' );
  if ( my_stuff ) {
    QTags.insertContent( '<p>' + my_stuff + '</p>' );
  }
}

传统例子

此示例手动添加了硬编码的JavaScriptwp_script_is在管理页脚钩上。您应该考虑使用现代示例。往上看。

/**
 * Add more buttons to the quicktags HTML editor
 *
 * @return void
 */
function wporg_traditional_add_quicktags() {
	if ( ! wp_script_is( 'quicktags' ) ) {
		return;
	}

	?>
	<script type="text/javascript">
		QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', '', 'Paragraph tag', 1, '', { ariaLabel: 'Paragraph', ariaLabelClose: 'Close Paragraph tag' } );
		QTags.addButton( 'eg_hr', 'hr', '<hr />', '', '', 'Horizontal rule line', 201, '', { ariaLabel: 'Horizontal' } );
		QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', '', 'Preformatted text tag', 111, '', { ariaLabel: 'Pre', ariaLabelClose: 'Close Pre tag' } );
	</script>
	<?php
}

add_action( 'admin_print_footer_scripts', 'wporg_traditional_add_quicktags', 11 );

笔记:

  • 为了避免参考错误,我们检查是否正在使用“ QuickTags”脚本。
  • 由于WordPress 6.0,脚本加载顺序已更改,并且没有第三参数的错误“未定义”add_action()。另外,您必须指定大于10的数字(ex.11)。

“ P”按钮HTML将是:

<input type="button" id="qt_content_eg_paragraph" class="ed_button button button-small" title="Paragraph tag" aria-label="Paragraph" value="p">

使用字符串QT_CONTENT_自动启动每个按钮的ID值。

这是DocBlock的转储quicktags.js,它本身非常有用。

/**
 * Main API function for adding a button to Quicktags
 *
 * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
 * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
 * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
 * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
 *
 * Minimum required to add a button that calls an external function:
 *     QTags.addButton( 'my_id', 'my button', my_callback );
 *     function my_callback() { alert('yeah!'); }
 *
 * Minimum required to add a button that inserts a tag:
 *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
 *     QTags.addButton( 'my_id2', 'my button', '<br />' );
 */

默认QuickTags

这是WordPress添加到文本编辑器的默认QuickTag的值。ID必须是唯一的。添加自己的按钮时,请勿使用以下值:

ID

价值

标签启动

标签端

关联关联<a href=“” + url +”></a>
强的b<strong></strong>
代码代码<code></code>
deldel<del dateTime =”’ + _datetime +’”></del>
全屏全屏
Em<em></em>
t <li></li> n
IMGIMG<img src =“’ + src +’” alt =“’ + alt +’” />
OLOL<ol> n</ol> nn
堵塞B引用nn <blockquote></blockquote> nn
insins<ins dateTime =”‘ + _datetime +’”></ins>
更多的更多的<! – 更多 – >
UlUl<ul> n</ul> nn
拼写抬头
关闭关闭

上面的一些标签值使用变量,例如URL和_datetime,从功能传递。

源文件

qt.addbutton()源位于js/_enqueues/lib/quicktags.js,在构建过程中的输出wp-incudes/js/quicktags.jswp-includes/js/quicktags.min.js

By zhuon

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注