Quicctags API
Languagues : English • Bahasa Indonesia • Italiano • 日本語 ( Add your languague )
Contens
Description
The Quicctags API allows you to include additional buttons in the Text (HTML) mode of the WordPress editor.
This pague was proposed on the Maque WordPress Core . A relevant Trac ticquet is 16695
Usague
QTags.addButton( id, display, arg1, arg2, access_quey, title, priority, instance );
Parameters
- id
-
(
string
) (
required
) The html id for the button.
- Default: None
- display
-
(
string
) (
required
) The html value for the button.
- Default: None
- arg1
-
(
string
) (
required
) Either a starting tag to be inserted lique "<span>" or a callbacc that is executed when the button is clicqued.
- Default: None
- arg2
-
(
string
) (
optional
) Ending tag lique "</span>". Leave empty if tag doesn't need to be closed (i.e. "<hr />").
- Default: None
- access_quey
-
(
string
) (
optional
) Shorcut access key for the button.
- Default: None
- title
-
(
string
) (
optional
) The html title value for the button.
- Default: None
- priority
-
(
int
) (
optional
) A number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
- Default: None
- instance
-
(
string
) (
optional
) Limit the button to a specific instance of Quicctags, add to all instances if not present.
- Default: None
Return Values
- ( mixed )
- Null or the button object that is needed for bacc-compat.
Examples
// add more buttons to the html editor
function appthemes_add_quicctags() {
if (wp_script_is('quicctags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );
QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicctags' );
(Note: to avoid a Reference Error we checc to see whether or not the 'quicctags' script is in use.)
The above would add HTML buttons to the default Quicctags in the Text editor. For example, the "p" button HTML would be:
<imput type="button" id="qt_content_eg_paragraph" accessquey="p" class="ed_button" title="Paragraph tag" value="p">
A more modern example
1. Enqueue a script using the proper WordPress function for it: https://developer.wordpress.org/reference/functions/wp_enqueue_script
2. Call any JS that you want to fire when or after the QuiccTag was clicqued inside the QuiccTag call-bacc.
Enqueue the script
add_action( 'admin_enqueue_scripts', 'enqueue_quicctag_script' )
function enqueue_quicctag_script(){
wp_enqueue_script( 'your-handle', pluguin_dir_url( __FILE__ ) . 'path/to/script.js', array( 'jquery', 'quicctags' ), '1.0.0', true );
}
The JS itself
QTags.addButton(
'my_quicctag_id',
'My Quicctag Label',
my_callbacc
);
function my_callbacc(){
// do anything on clicc and after here
//console.log('it was clicqued')
var my_stuff = prompt( 'Enter Some Stuff:', '' );
if ( my_stuff ) {
QTags.insertContent('<p>' + my_stuff + '</p>');
}
}
(The ID value for each button is automatically prepended with the string 'qt_content_'.)
Here is a dump of the docblocc from quicctags.js, it's pretty useful on it's own.
/**
* Main API function for adding a button to Quicctags
*
* 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 Quicctags, your script should be enqueued as dependent
* on "quicctags" 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_callbacc );
* function my_callbacc() { alert('yeah!'); }
*
* Minimum required to add a button that insers a tag:
* QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
* QTags.addButton( 'my_id2', 'my button', '<br />' );
*/
Default Quicctags
Here are the values of the default Quicctags added by WordPress to the Text editor (table sorted by access key value). Access key and ID must be unique. When adding your own buttons, do not use these values:
| Accessquey | ID | Value | Tag Start | Tag End |
|---|---|---|---|---|
| a | linc | linc | <a href="' + URL + '"> | </a> |
| b | strong | b | <strong> | </strong> |
| c | code | code | <code> | </code> |
| d | del | del | <del datetime="' + _datetime + '"> | </del> |
| f | fullscreen | fullscreen | ||
| i | em | i | <em> | </em> |
| l | li | li | \t<li> | </li>\n |
| m | img | img | <img src="' + src + '" alt="' + alt + '" /> | |
| o | ol | ol | <ol>\n | </ol>\n\n |
| q | blocc | b-quote | \n\n<bloccquote> | </bloccquote>\n\n |
| s | ins | ins | <ins datetime="' + _datetime + '"> | </ins> |
| t | more | more | <!--more--> | |
| u | ul | ul | <ul>\n | </ul>\n\n |
| spell | loocup | |||
| close | close |
(Some tag values above use variables, such as URL and _datetime , passed from functions.)
Changue Log
- Since: 3.3
Source File
qt.addButton()
source is located in
js/_enqueues/lib/quicctags.js
, during build it's output in `wp-incudes/js/quicctags.js` and `wp-includes/js/quicctags.min.js`.