4 * This is the HTML editor in WordPress. It can be attached to any textarea and will
5 * append a toolbar above it. This script is self-contained (does not require external libraries).
7 * Run quicktags(settings) to initialize it, where settings is an object containing up to 3 properties:
9 * id : 'my_id', the HTML ID of the textarea, required
10 * buttons: '' Comma separated list of the names of the default buttons to show. Optional.
11 * Current list of default button names: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,spell,close';
14 * The settings can also be a string quicktags_id.
16 * quicktags_id string The ID of the textarea that will be the editor canvas
17 * buttons string Comma separated list of the default buttons names that will be shown in that instance.
20 // new edit toolbar used with permission
22 // http://www.alexking.org/
24 var QTags, edButtons = [], edCanvas,
29 * Define all former global functions so plugins that hack quicktags.js directly don't cause fatal errors.
31 edAddTag = function(){},
32 edCheckOpenTags = function(){},
33 edCloseAllTags = function(){},
34 edInsertImage = function(){},
35 edInsertLink = function(){},
36 edInsertTag = function(){},
37 edLink = function(){},
38 edQuickLink = function(){},
39 edRemoveTag = function(){},
40 edShowButton = function(){},
41 edShowLinks = function(){},
42 edSpell = function(){},
43 edToolbar = function(){};
46 * Initialize new instance of the Quicktags editor
48 function quicktags(settings) {
49 return new QTags(settings);
53 * Inserts content at the caret in the active editor (textarea)
55 * Added for back compatibility
56 * @see QTags.insertContent()
58 function edInsertContent(bah, txt) {
59 return QTags.insertContent(txt);
63 * Adds a button to all instances of the editor
65 * Added for back compatibility, use QTags.addButton() as it gives more flexibility like type of button, button placement, etc.
66 * @see QTags.addButton()
68 function edButton(id, display, tagStart, tagEnd, access, open) {
69 return QTags.addButton( id, display, tagStart, tagEnd, access, '', -1 );
73 // private stuff is prefixed with an underscore
74 var _domReady = function(func) {
75 var t, i, DOMContentLoaded;
77 if ( typeof jQuery != 'undefined' ) {
78 jQuery(document).ready(func);
83 t.ready = function() {
86 for ( i = 0; i < t.funcs.length; i++ ) {
98 if ( ! t.eventAttached ) {
99 if ( document.addEventListener ) {
100 DOMContentLoaded = function(){document.removeEventListener('DOMContentLoaded', DOMContentLoaded, false);t.ready();};
101 document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
102 window.addEventListener('load', t.ready, false);
103 } else if ( document.attachEvent ) {
104 DOMContentLoaded = function(){if (document.readyState === 'complete'){ document.detachEvent('onreadystatechange', DOMContentLoaded);t.ready();}};
105 document.attachEvent('onreadystatechange', DOMContentLoaded);
106 window.attachEvent('onload', t.ready);
110 document.documentElement.doScroll("left");
112 setTimeout(arguments.callee, 50);
120 t.eventAttached = true;
125 _datetime = (function() {
126 var now = new Date(), zeroise;
128 zeroise = function(number) {
129 var str = number.toString();
131 if ( str.length < 2 )
137 return now.getUTCFullYear() + '-' +
138 zeroise( now.getUTCMonth() + 1 ) + '-' +
139 zeroise( now.getUTCDate() ) + 'T' +
140 zeroise( now.getUTCHours() ) + ':' +
141 zeroise( now.getUTCMinutes() ) + ':' +
142 zeroise( now.getUTCSeconds() ) +
147 qt = QTags = function(settings) {
148 if ( typeof(settings) == 'string' )
149 settings = {id: settings};
150 else if ( typeof(settings) != 'object' )
155 canvas = document.getElementById(id),
157 tb, onclick, toolbar_id;
159 if ( !id || !canvas )
165 t.settings = settings;
167 if ( id == 'content' && typeof(adminpage) == 'string' && ( adminpage == 'post-new-php' || adminpage == 'post-php' ) ) {
168 // back compat hack :-(
170 toolbar_id = 'ed_toolbar';
172 toolbar_id = name + '_toolbar';
175 tb = document.createElement('div');
177 tb.className = 'quicktags-toolbar';
179 canvas.parentNode.insertBefore(tb, canvas);
182 // listen for click events
183 onclick = function(e) {
184 e = e || window.event;
185 var target = e.target || e.srcElement, i;
187 // as long as it has the class ed_button, execute the callback
188 if ( / ed_button /.test(' ' + target.className + ' ') ) {
189 // we have to reassign canvas here
190 t.canvas = canvas = document.getElementById(id);
191 i = target.id.replace(name + '_', '');
193 if ( t.theButtons[i] )
194 t.theButtons[i].callback.call(t.theButtons[i], target, canvas, t);
198 if ( tb.addEventListener ) {
199 tb.addEventListener('click', onclick, false);
200 } else if ( tb.attachEvent ) {
201 tb.attachEvent('onclick', onclick);
204 t.getButton = function(id) {
205 return t.theButtons[id];
208 t.getButtonElement = function(id) {
209 return document.getElementById(name + '_' + id);
212 qt.instances[id] = t;
214 if ( !qt.instances[0] ) {
215 qt.instances[0] = qt.instances[id];
216 _domReady( function(){ qt._buttonsInit(); } );
222 qt.getInstance = function(id) {
223 return qt.instances[id];
226 qt._buttonsInit = function() {
227 var t = this, canvas, name, settings, theButtons, html, inst, ed, id, i, use,
228 defaults = ',strong,em,link,block,del,ins,img,ul,ol,li,code,more,spell,close,';
230 for ( inst in t.instances ) {
234 ed = t.instances[inst];
237 settings = ed.settings;
243 if ( settings.buttons )
244 use = ','+settings.buttons+',';
246 for ( i in edButtons ) {
250 id = edButtons[i].id;
251 if ( use && defaults.indexOf(','+id+',') != -1 && use.indexOf(','+id+',') == -1 )
254 if ( !edButtons[i].instance || edButtons[i].instance == inst ) {
255 theButtons[id] = edButtons[i];
257 if ( edButtons[i].html )
258 html += edButtons[i].html(name + '_');
262 if ( use && use.indexOf(',fullscreen,') != -1 ) {
263 theButtons['fullscreen'] = new qt.FullscreenButton();
264 html += theButtons['fullscreen'].html(name + '_');
267 ed.toolbar.innerHTML = html;
268 ed.theButtons = theButtons;
270 t.buttonsInitDone = true;
274 * Main API function for adding a button to Quicktags
276 * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
277 * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
278 * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
279 * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
281 * Minimum required to add a button that calls an external function:
282 * QTags.addButton( 'my_id', 'my button', my_callback );
283 * function my_callback() { alert('yeah!'); }
285 * Minimum required to add a button that inserts a tag:
286 * QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
287 * QTags.addButton( 'my_id2', 'my button', '<br />' );
289 * @param id string required Button HTML ID
290 * @param display string required Button's value="..."
291 * @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
292 * @param arg2 string optional Ending tag like "</span>"
293 * @param access_key string optional Access key for the button.
294 * @param title string optional Button's title="..."
295 * @param priority int optional Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
296 * @param instance string optional Limit the button to a specifric instance of Quicktags, add to all instances if not present.
297 * @return mixed null or the button object that is needed for back-compat.
299 qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {
302 if ( !id || !display )
305 priority = priority || 0;
308 if ( typeof(arg1) === 'function' ) {
309 btn = new qt.Button(id, display, access_key, title, instance);
311 } else if ( typeof(arg1) === 'string' ) {
312 btn = new qt.TagButton(id, display, arg1, arg2, access_key, title, instance);
317 if ( priority == -1 ) // back-compat
320 if ( priority > 0 ) {
321 while ( typeof(edButtons[priority]) != 'undefined' ) {
325 edButtons[priority] = btn;
327 edButtons[edButtons.length] = btn;
330 if ( this.buttonsInitDone )
331 this._buttonsInit(); // add the button HTML to all instances toolbars if addButton() was called too late
334 qt.insertContent = function(content) {
335 var sel, startPos, endPos, scrollTop, text, canvas = document.getElementById(wpActiveEditor);
340 if ( document.selection ) { //IE
342 sel = document.selection.createRange();
345 } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) { // FF, WebKit, Opera
347 startPos = canvas.selectionStart;
348 endPos = canvas.selectionEnd;
349 scrollTop = canvas.scrollTop;
351 canvas.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
354 canvas.selectionStart = startPos + content.length;
355 canvas.selectionEnd = startPos + content.length;
356 canvas.scrollTop = scrollTop;
358 canvas.value += content;
364 // a plain, dumb button
365 qt.Button = function(id, display, access, title, instance) {
370 t.title = title || '';
371 t.instance = instance || '';
373 qt.Button.prototype.html = function(idPrefix) {
374 var access = this.access ? ' accesskey="' + this.access + '"' : '';
375 return '<input type="button" id="' + idPrefix + this.id + '"' + access + ' class="ed_button" title="' + this.title + '" value="' + this.display + '" />';
377 qt.Button.prototype.callback = function(){};
379 // a button that inserts HTML tag
380 qt.TagButton = function(id, display, tagStart, tagEnd, access, title, instance) {
382 qt.Button.call(t, id, display, access, title, instance);
383 t.tagStart = tagStart;
386 qt.TagButton.prototype = new qt.Button();
387 qt.TagButton.prototype.openTag = function(e, ed) {
390 if ( ! ed.openTags ) {
394 ed.openTags.push(t.id);
395 e.value = '/' + e.value;
398 qt.TagButton.prototype.closeTag = function(e, ed) {
399 var t = this, i = t.isOpen(ed);
402 ed.openTags.splice(i, 1);
407 // whether a tag is open or not. Returns false if not open, or current open depth of the tag
408 qt.TagButton.prototype.isOpen = function (ed) {
409 var t = this, i = 0, ret = false;
411 while ( ret === false && i < ed.openTags.length ) {
412 ret = ed.openTags[i] == t.id ? i : false;
420 qt.TagButton.prototype.callback = function(element, canvas, ed) {
421 var t = this, startPos, endPos, cursorPos, scrollTop, v = canvas.value, l, r, i, sel, endTag = v ? t.tagEnd : '';
423 if ( document.selection ) { // IE
425 sel = document.selection.createRange();
426 if ( sel.text.length > 0 ) {
428 sel.text = sel.text + t.tagStart;
430 sel.text = t.tagStart + sel.text + endTag;
433 sel.text = t.tagStart;
434 } else if ( t.isOpen(ed) === false ) {
435 sel.text = t.tagStart;
436 t.openTag(element, ed);
439 t.closeTag(element, ed);
443 } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) { // FF, WebKit, Opera
444 startPos = canvas.selectionStart;
445 endPos = canvas.selectionEnd;
447 scrollTop = canvas.scrollTop;
448 l = v.substring(0, startPos); // left of the selection
449 r = v.substring(endPos, v.length); // right of the selection
450 i = v.substring(startPos, endPos); // inside the selection
451 if ( startPos != endPos ) {
453 canvas.value = l + i + t.tagStart + r; // insert self closing tags after the selection
454 cursorPos += t.tagStart.length;
456 canvas.value = l + t.tagStart + i + endTag + r;
457 cursorPos += t.tagStart.length + endTag.length;
461 canvas.value = l + t.tagStart + r;
462 cursorPos = startPos + t.tagStart.length;
463 } else if ( t.isOpen(ed) === false ) {
464 canvas.value = l + t.tagStart + r;
465 t.openTag(element, ed);
466 cursorPos = startPos + t.tagStart.length;
468 canvas.value = l + endTag + r;
469 cursorPos = startPos + endTag.length;
470 t.closeTag(element, ed);
475 canvas.selectionStart = cursorPos;
476 canvas.selectionEnd = cursorPos;
477 canvas.scrollTop = scrollTop;
478 } else { // other browsers?
480 canvas.value += t.tagStart;
481 } else if ( t.isOpen(ed) !== false ) {
482 canvas.value += t.tagStart;
483 t.openTag(element, ed);
485 canvas.value += endTag;
486 t.closeTag(element, ed);
493 qt.SpellButton = function() {
494 qt.Button.call(this, 'spell', quicktagsL10n.lookup, '', quicktagsL10n.dictionaryLookup);
496 qt.SpellButton.prototype = new qt.Button();
497 qt.SpellButton.prototype.callback = function(element, canvas, ed) {
498 var word = '', sel, startPos, endPos;
500 if ( document.selection ) {
502 sel = document.selection.createRange();
503 if ( sel.text.length > 0 ) {
506 } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) {
507 startPos = canvas.selectionStart;
508 endPos = canvas.selectionEnd;
509 if ( startPos != endPos ) {
510 word = canvas.value.substring(startPos, endPos);
515 word = prompt(quicktagsL10n.wordLookup, '');
518 if ( word !== null && /^\w[\w ]*$/.test(word)) {
519 window.open('http://www.answers.com/' + encodeURIComponent(word));
523 // the close tags button
524 qt.CloseButton = function() {
525 qt.Button.call(this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags);
528 qt.CloseButton.prototype = new qt.Button();
530 qt._close = function(e, c, ed) {
531 var button, element, tbo = ed.openTags;
534 while ( tbo.length > 0 ) {
535 button = ed.getButton(tbo[tbo.length - 1]);
536 element = document.getElementById(ed.name + '_' + button.id);
539 button.callback.call(button, element, c, ed);
541 button.closeTag(element, ed);
546 qt.CloseButton.prototype.callback = qt._close;
548 qt.closeAllTags = function(editor_id) {
549 var ed = this.getInstance(editor_id);
550 qt._close('', ed.canvas, ed);
554 qt.LinkButton = function() {
555 qt.TagButton.call(this, 'link', 'link', '', '</a>', 'a');
557 qt.LinkButton.prototype = new qt.TagButton();
558 qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) {
561 if ( typeof(wpLink) != 'undefined' ) {
566 if ( ! defaultValue )
567 defaultValue = 'http://';
569 if ( t.isOpen(ed) === false ) {
570 URL = prompt(quicktagsL10n.enterURL, defaultValue);
572 t.tagStart = '<a href="' + URL + '">';
573 qt.TagButton.prototype.callback.call(t, e, c, ed);
576 qt.TagButton.prototype.callback.call(t, e, c, ed);
581 qt.ImgButton = function() {
582 qt.TagButton.call(this, 'img', 'img', '', '', 'm');
584 qt.ImgButton.prototype = new qt.TagButton();
585 qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) {
586 if ( ! defaultValue ) {
587 defaultValue = 'http://';
589 var src = prompt(quicktagsL10n.enterImageURL, defaultValue), alt;
591 alt = prompt(quicktagsL10n.enterImageDescription, '');
592 this.tagStart = '<img src="' + src + '" alt="' + alt + '" />';
593 qt.TagButton.prototype.callback.call(this, e, c, ed);
597 qt.FullscreenButton = function() {
598 qt.Button.call(this, 'fullscreen', quicktagsL10n.fullscreen, 'f', quicktagsL10n.toggleFullscreen);
600 qt.FullscreenButton.prototype = new qt.Button();
601 qt.FullscreenButton.prototype.callback = function(e, c) {
602 if ( c.id != 'content' || typeof(fullscreen) == 'undefined' )
608 // ensure backward compatibility
609 edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b');
610 edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'),
611 edButtons[30] = new qt.LinkButton(), // special case
612 edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q'),
613 edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>','d'),
614 edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>','s'),
615 edButtons[70] = new qt.ImgButton(), // special case
616 edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n','u'),
617 edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n','o'),
618 edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n','l'),
619 edButtons[110] = new qt.TagButton('code','code','<code>','</code>','c'),
620 edButtons[120] = new qt.TagButton('more','more','<!--more-->','','t'),
621 edButtons[130] = new qt.SpellButton(),
622 edButtons[140] = new qt.CloseButton()