1 /* global adminpage, wpActiveEditor, quicktagsL10n, wpLink, prompt */
5 * This is the HTML editor in WordPress. It can be attached to any textarea and will
6 * append a toolbar above it. This script is self-contained (does not require external libraries).
8 * Run quicktags(settings) to initialize it, where settings is an object containing up to 3 properties:
10 * id : 'my_id', the HTML ID of the textarea, required
11 * buttons: '' Comma separated list of the names of the default buttons to show. Optional.
12 * Current list of default button names: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
15 * The settings can also be a string quicktags_id.
17 * quicktags_id string The ID of the textarea that will be the editor canvas
18 * buttons string Comma separated list of the default buttons names that will be shown in that instance.
21 // new edit toolbar used with permission
23 // http://www.alexking.org/
28 /* jshint ignore:start */
33 * Define all former global functions so plugins that hack quicktags.js directly don't cause fatal errors.
35 var edAddTag = function(){},
36 edCheckOpenTags = function(){},
37 edCloseAllTags = function(){},
38 edInsertImage = function(){},
39 edInsertLink = function(){},
40 edInsertTag = function(){},
41 edLink = function(){},
42 edQuickLink = function(){},
43 edRemoveTag = function(){},
44 edShowButton = function(){},
45 edShowLinks = function(){},
46 edSpell = function(){},
47 edToolbar = function(){};
50 * Initialize new instance of the Quicktags editor
52 function quicktags(settings) {
53 return new QTags(settings);
57 * Inserts content at the caret in the active editor (textarea)
59 * Added for back compatibility
60 * @see QTags.insertContent()
62 function edInsertContent(bah, txt) {
63 return QTags.insertContent(txt);
67 * Adds a button to all instances of the editor
69 * Added for back compatibility, use QTags.addButton() as it gives more flexibility like type of button, button placement, etc.
70 * @see QTags.addButton()
72 function edButton(id, display, tagStart, tagEnd, access) {
73 return QTags.addButton( id, display, tagStart, tagEnd, access, '', -1 );
76 /* jshint ignore:end */
79 // private stuff is prefixed with an underscore
80 var _domReady = function(func) {
81 var t, i, DOMContentLoaded, _tryReady;
83 if ( typeof jQuery !== 'undefined' ) {
84 jQuery(document).ready(func);
89 t.ready = function() {
92 for ( i = 0; i < t.funcs.length; i++ ) {
104 if ( ! t.eventAttached ) {
105 if ( document.addEventListener ) {
106 DOMContentLoaded = function(){document.removeEventListener('DOMContentLoaded', DOMContentLoaded, false);t.ready();};
107 document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
108 window.addEventListener('load', t.ready, false);
109 } else if ( document.attachEvent ) {
110 DOMContentLoaded = function(){if (document.readyState === 'complete'){ document.detachEvent('onreadystatechange', DOMContentLoaded);t.ready();}};
111 document.attachEvent('onreadystatechange', DOMContentLoaded);
112 window.attachEvent('onload', t.ready);
114 _tryReady = function() {
116 document.documentElement.doScroll('left');
118 setTimeout(_tryReady, 50);
127 t.eventAttached = true;
132 _datetime = (function() {
133 var now = new Date(), zeroise;
135 zeroise = function(number) {
136 var str = number.toString();
138 if ( str.length < 2 ) {
145 return now.getUTCFullYear() + '-' +
146 zeroise( now.getUTCMonth() + 1 ) + '-' +
147 zeroise( now.getUTCDate() ) + 'T' +
148 zeroise( now.getUTCHours() ) + ':' +
149 zeroise( now.getUTCMinutes() ) + ':' +
150 zeroise( now.getUTCSeconds() ) +
155 qt = QTags = function(settings) {
156 if ( typeof(settings) === 'string' ) {
157 settings = {id: settings};
158 } else if ( typeof(settings) !== 'object' ) {
164 canvas = document.getElementById(id),
166 tb, onclick, toolbar_id, wrap, setActiveEditor;
168 if ( !id || !canvas ) {
175 t.settings = settings;
177 if ( id === 'content' && typeof(adminpage) === 'string' && ( adminpage === 'post-new-php' || adminpage === 'post-php' ) ) {
178 // back compat hack :-(
180 toolbar_id = 'ed_toolbar';
182 toolbar_id = name + '_toolbar';
185 tb = document.getElementById( toolbar_id );
188 tb = document.createElement('div');
190 tb.className = 'quicktags-toolbar';
193 canvas.parentNode.insertBefore(tb, canvas);
196 // listen for click events
197 onclick = function(e) {
198 e = e || window.event;
199 var target = e.target || e.srcElement, visible = target.clientWidth || target.offsetWidth, i;
201 // don't call the callback on pressing the accesskey when the button is not visible
206 // as long as it has the class ed_button, execute the callback
207 if ( / ed_button /.test(' ' + target.className + ' ') ) {
208 // we have to reassign canvas here
209 t.canvas = canvas = document.getElementById(id);
210 i = target.id.replace(name + '_', '');
212 if ( t.theButtons[i] ) {
213 t.theButtons[i].callback.call(t.theButtons[i], target, canvas, t);
218 setActiveEditor = function() {
219 window.wpActiveEditor = id;
222 wrap = document.getElementById( 'wp-' + id + '-wrap' );
224 if ( tb.addEventListener ) {
225 tb.addEventListener( 'click', onclick, false );
228 wrap.addEventListener( 'click', setActiveEditor, false );
230 } else if ( tb.attachEvent ) {
231 tb.attachEvent( 'onclick', onclick );
234 wrap.attachEvent( 'onclick', setActiveEditor );
238 t.getButton = function(id) {
239 return t.theButtons[id];
242 t.getButtonElement = function(id) {
243 return document.getElementById(name + '_' + id);
246 qt.instances[id] = t;
248 if ( ! qt.instances['0'] ) {
249 qt.instances['0'] = qt.instances[id];
250 _domReady( function(){ qt._buttonsInit(); } );
254 function _escape( text ) {
256 text = text.replace( /&([^#])(?![a-z1-4]{1,8};)/gi, '&$1' );
257 return text.replace( /</g, '<' ).replace( />/g, '>' ).replace( /"/g, '"' ).replace( /'/g, ''' );
262 qt.getInstance = function(id) {
263 return qt.instances[id];
266 qt._buttonsInit = function() {
267 var t = this, canvas, name, settings, theButtons, html, inst, ed, id, i, use,
268 defaults = ',strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,';
270 for ( inst in t.instances ) {
271 if ( '0' === inst ) {
275 ed = t.instances[inst];
278 settings = ed.settings;
284 if ( settings.buttons ) {
285 use = ','+settings.buttons+',';
288 for ( i in edButtons ) {
289 if ( !edButtons[i] ) {
293 id = edButtons[i].id;
294 if ( use && defaults.indexOf( ',' + id + ',' ) !== -1 && use.indexOf( ',' + id + ',' ) === -1 ) {
298 if ( !edButtons[i].instance || edButtons[i].instance === inst ) {
299 theButtons[id] = edButtons[i];
301 if ( edButtons[i].html ) {
302 html += edButtons[i].html(name + '_');
307 if ( use && use.indexOf(',dfw,') !== -1 ) {
308 theButtons.dfw = new qt.DFWButton();
309 html += theButtons.dfw.html( name + '_' );
312 if ( 'rtl' === document.getElementsByTagName('html')[0].dir ) {
313 theButtons.textdirection = new qt.TextDirectionButton();
314 html += theButtons.textdirection.html(name + '_');
317 ed.toolbar.innerHTML = html;
318 ed.theButtons = theButtons;
320 if ( typeof jQuery !== 'undefined' ) {
321 jQuery( document ).triggerHandler( 'quicktags-init', [ ed ] );
324 t.buttonsInitDone = true;
328 * Main API function for adding a button to Quicktags
330 * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
331 * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
332 * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
333 * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
335 * Minimum required to add a button that calls an external function:
336 * QTags.addButton( 'my_id', 'my button', my_callback );
337 * function my_callback() { alert('yeah!'); }
339 * Minimum required to add a button that inserts a tag:
340 * QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
341 * QTags.addButton( 'my_id2', 'my button', '<br />' );
343 * @param string id Required. Button HTML ID
344 * @param string display Required. Button's value="..."
345 * @param string|function arg1 Required. Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
346 * @param string arg2 Optional. Ending tag like "</span>"
347 * @param string access_key Deprecated Not used
348 * @param string title Optional. Button's title="..."
349 * @param int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
350 * @param string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present.
351 * @param attr object Optional. Used to pass additional attributes. Currently supports `ariaLabel` and `ariaLabelClose` (for "close tag" state)
352 * @return mixed null or the button object that is needed for back-compat.
354 qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance, attr ) {
357 if ( !id || !display ) {
361 priority = priority || 0;
365 if ( typeof(arg1) === 'function' ) {
366 btn = new qt.Button( id, display, access_key, title, instance, attr );
368 } else if ( typeof(arg1) === 'string' ) {
369 btn = new qt.TagButton( id, display, arg1, arg2, access_key, title, instance, attr );
374 if ( priority === -1 ) { // back-compat
378 if ( priority > 0 ) {
379 while ( typeof(edButtons[priority]) !== 'undefined' ) {
383 edButtons[priority] = btn;
385 edButtons[edButtons.length] = btn;
388 if ( this.buttonsInitDone ) {
389 this._buttonsInit(); // add the button HTML to all instances toolbars if addButton() was called too late
393 qt.insertContent = function(content) {
394 var sel, startPos, endPos, scrollTop, text, canvas = document.getElementById(wpActiveEditor);
400 if ( document.selection ) { //IE
402 sel = document.selection.createRange();
405 } else if ( canvas.selectionStart || canvas.selectionStart === 0 ) { // FF, WebKit, Opera
407 startPos = canvas.selectionStart;
408 endPos = canvas.selectionEnd;
409 scrollTop = canvas.scrollTop;
411 canvas.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
413 canvas.selectionStart = startPos + content.length;
414 canvas.selectionEnd = startPos + content.length;
415 canvas.scrollTop = scrollTop;
418 canvas.value += content;
424 // a plain, dumb button
425 qt.Button = function( id, display, access, title, instance, attr ) {
427 this.display = display;
429 this.title = title || '';
430 this.instance = instance || '';
431 this.attr = attr || {};
433 qt.Button.prototype.html = function(idPrefix) {
435 title = this.title ? ' title="' + _escape( this.title ) + '"' : '',
436 ariaLabel = this.attr && this.attr.ariaLabel ? ' aria-label="' + _escape( this.attr.ariaLabel ) + '"' : '',
437 val = this.display ? ' value="' + _escape( this.display ) + '"' : '',
438 id = this.id ? ' id="' + _escape( idPrefix + this.id ) + '"' : '',
439 dfw = ( wp = window.wp ) && wp.editor && wp.editor.dfw;
441 if ( this.id === 'fullscreen' ) {
442 return '<button type="button"' + id + ' class="ed_button qt-dfw qt-fullscreen"' + title + ariaLabel + '></button>';
443 } else if ( this.id === 'dfw' ) {
444 active = dfw && dfw.isActive() ? '' : ' disabled="disabled"';
445 on = dfw && dfw.isOn() ? ' active' : '';
447 return '<button type="button"' + id + ' class="ed_button qt-dfw' + on + '"' + title + ariaLabel + active + '></button>';
450 return '<input type="button"' + id + ' class="ed_button button button-small"' + title + ariaLabel + val + ' />';
452 qt.Button.prototype.callback = function(){};
454 // a button that inserts HTML tag
455 qt.TagButton = function( id, display, tagStart, tagEnd, access, title, instance, attr ) {
457 qt.Button.call( t, id, display, access, title, instance, attr );
458 t.tagStart = tagStart;
461 qt.TagButton.prototype = new qt.Button();
462 qt.TagButton.prototype.openTag = function( element, ed ) {
463 if ( ! ed.openTags ) {
468 ed.openTags.push( this.id );
469 element.value = '/' + element.value;
471 if ( this.attr.ariaLabelClose ) {
472 element.setAttribute( 'aria-label', this.attr.ariaLabelClose );
476 qt.TagButton.prototype.closeTag = function( element, ed ) {
477 var i = this.isOpen(ed);
480 ed.openTags.splice( i, 1 );
483 element.value = this.display;
485 if ( this.attr.ariaLabel ) {
486 element.setAttribute( 'aria-label', this.attr.ariaLabel );
489 // whether a tag is open or not. Returns false if not open, or current open depth of the tag
490 qt.TagButton.prototype.isOpen = function (ed) {
491 var t = this, i = 0, ret = false;
493 while ( ret === false && i < ed.openTags.length ) {
494 ret = ed.openTags[i] === t.id ? i : false;
502 qt.TagButton.prototype.callback = function(element, canvas, ed) {
503 var t = this, startPos, endPos, cursorPos, scrollTop, v = canvas.value, l, r, i, sel, endTag = v ? t.tagEnd : '';
505 if ( document.selection ) { // IE
507 sel = document.selection.createRange();
508 if ( sel.text.length > 0 ) {
510 sel.text = sel.text + t.tagStart;
512 sel.text = t.tagStart + sel.text + endTag;
516 sel.text = t.tagStart;
517 } else if ( t.isOpen(ed) === false ) {
518 sel.text = t.tagStart;
519 t.openTag(element, ed);
522 t.closeTag(element, ed);
526 } else if ( canvas.selectionStart || canvas.selectionStart === 0 ) { // FF, WebKit, Opera
527 startPos = canvas.selectionStart;
528 endPos = canvas.selectionEnd;
530 scrollTop = canvas.scrollTop;
531 l = v.substring(0, startPos); // left of the selection
532 r = v.substring(endPos, v.length); // right of the selection
533 i = v.substring(startPos, endPos); // inside the selection
534 if ( startPos !== endPos ) {
536 canvas.value = l + i + t.tagStart + r; // insert self closing tags after the selection
537 cursorPos += t.tagStart.length;
539 canvas.value = l + t.tagStart + i + endTag + r;
540 cursorPos += t.tagStart.length + endTag.length;
544 canvas.value = l + t.tagStart + r;
545 cursorPos = startPos + t.tagStart.length;
546 } else if ( t.isOpen(ed) === false ) {
547 canvas.value = l + t.tagStart + r;
548 t.openTag(element, ed);
549 cursorPos = startPos + t.tagStart.length;
551 canvas.value = l + endTag + r;
552 cursorPos = startPos + endTag.length;
553 t.closeTag(element, ed);
557 canvas.selectionStart = cursorPos;
558 canvas.selectionEnd = cursorPos;
559 canvas.scrollTop = scrollTop;
561 } else { // other browsers?
563 canvas.value += t.tagStart;
564 } else if ( t.isOpen(ed) !== false ) {
565 canvas.value += t.tagStart;
566 t.openTag(element, ed);
568 canvas.value += endTag;
569 t.closeTag(element, ed);
576 qt.SpellButton = function() {};
578 // the close tags button
579 qt.CloseButton = function() {
580 qt.Button.call( this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags );
583 qt.CloseButton.prototype = new qt.Button();
585 qt._close = function(e, c, ed) {
586 var button, element, tbo = ed.openTags;
589 while ( tbo.length > 0 ) {
590 button = ed.getButton(tbo[tbo.length - 1]);
591 element = document.getElementById(ed.name + '_' + button.id);
594 button.callback.call(button, element, c, ed);
596 button.closeTag(element, ed);
602 qt.CloseButton.prototype.callback = qt._close;
604 qt.closeAllTags = function(editor_id) {
605 var ed = this.getInstance(editor_id);
606 qt._close('', ed.canvas, ed);
610 qt.LinkButton = function() {
612 ariaLabel: quicktagsL10n.link
615 qt.TagButton.call( this, 'link', 'link', '', '</a>', '', '', '', attr );
617 qt.LinkButton.prototype = new qt.TagButton();
618 qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) {
621 if ( typeof wpLink !== 'undefined' ) {
622 wpLink.open( ed.id );
626 if ( ! defaultValue ) {
627 defaultValue = 'http://';
630 if ( t.isOpen(ed) === false ) {
631 URL = prompt( quicktagsL10n.enterURL, defaultValue );
633 t.tagStart = '<a href="' + URL + '">';
634 qt.TagButton.prototype.callback.call(t, e, c, ed);
637 qt.TagButton.prototype.callback.call(t, e, c, ed);
642 qt.ImgButton = function() {
644 ariaLabel: quicktagsL10n.image
647 qt.TagButton.call( this, 'img', 'img', '', '', '', '', '', attr );
649 qt.ImgButton.prototype = new qt.TagButton();
650 qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) {
651 if ( ! defaultValue ) {
652 defaultValue = 'http://';
654 var src = prompt(quicktagsL10n.enterImageURL, defaultValue), alt;
656 alt = prompt(quicktagsL10n.enterImageDescription, '');
657 this.tagStart = '<img src="' + src + '" alt="' + alt + '" />';
658 qt.TagButton.prototype.callback.call(this, e, c, ed);
662 qt.DFWButton = function() {
663 qt.Button.call( this, 'dfw', '', 'f', quicktagsL10n.dfw );
665 qt.DFWButton.prototype = new qt.Button();
666 qt.DFWButton.prototype.callback = function() {
669 if ( ! ( wp = window.wp ) || ! wp.editor || ! wp.editor.dfw ) {
673 window.wp.editor.dfw.toggle();
676 qt.TextDirectionButton = function() {
677 qt.Button.call( this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection );
679 qt.TextDirectionButton.prototype = new qt.Button();
680 qt.TextDirectionButton.prototype.callback = function(e, c) {
681 var isRTL = ( 'rtl' === document.getElementsByTagName('html')[0].dir ),
682 currentDirection = c.style.direction;
684 if ( ! currentDirection ) {
685 currentDirection = ( isRTL ) ? 'rtl' : 'ltr';
688 c.style.direction = ( 'rtl' === currentDirection ) ? 'ltr' : 'rtl';
692 // ensure backward compatibility
693 edButtons[10] = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
694 edButtons[20] = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
695 edButtons[30] = new qt.LinkButton(); // special case
696 edButtons[40] = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } );
697 edButtons[50] = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
698 edButtons[60] = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } );
699 edButtons[70] = new qt.ImgButton(); // special case
700 edButtons[80] = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } );
701 edButtons[90] = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
702 edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } );
703 edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
704 edButtons[120] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );
705 edButtons[140] = new qt.CloseButton();