QuickTags

描述

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）（选修的）： 用于传递其他属性。目前支持ariaLabel和ariaLabelClose（对于“关闭标签”状态）

返回值

（（混合）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必须是唯一的。添加自己的按钮时，请勿使用以下值：

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

源文件

qt.addbutton（）源位于js/_enqueues/lib/quicktags.js，在构建过程中的输出wp-incudes/js/quicktags.js和wp-includes/js/quicktags.min.js。