wp-includes/js/quicktags.dev.js

   1 /*
   2  * Quicktags
   3  *
   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).
   6  *
   7  * Run quicktags(settings) to initialize it, where settings is an object containing up to 3 properties:
   8  * settings = {
   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';
  12  * }
  13  *
  14  * The settings can also be a string quicktags_id.
  15  *
  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.
  18  */
  19
  20 // new edit toolbar used with permission
  21 // by Alex King
  22 // http://www.alexking.org/
  23
  24 var QTags, edButtons = [], edCanvas,
  25
  26 /**
  27  * Back-compat
  28  *
  29  * Define all former global functions so plugins that hack quicktags.js directly don't cause fatal errors.
  30  */
  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(){};
  44
  45 /**
  46  * Initialize new instance of the Quicktags editor
  47  */
  48 function quicktags(settings) {
  49         return new QTags(settings);
  50 }
  51
  52 /**
  53  * Inserts content at the caret in the active editor (textarea)
  54  *
  55  * Added for back compatibility
  56  * @see QTags.insertContent()
  57  */
  58 function edInsertContent(bah, txt) {
  59         return QTags.insertContent(txt);
  60 }
  61
  62 /**
  63  * Adds a button to all instances of the editor
  64  *
  65  * Added for back compatibility, use QTags.addButton() as it gives more flexibility like type of button, button placement, etc.
  66  * @see QTags.addButton()
  67  */
  68 function edButton(id, display, tagStart, tagEnd, access, open) {
  69         return QTags.addButton( id, display, tagStart, tagEnd, access, '', -1 );
  70 }
  71
  72 (function(){
  73         // private stuff is prefixed with an underscore
  74         var _domReady = function(func) {
  75                 var t, i,  DOMContentLoaded;
  76
  77                 if ( typeof jQuery != 'undefined' ) {
  78                         jQuery(document).ready(func);
  79                 } else {
  80                         t = _domReady;
  81                         t.funcs = [];
  82
  83                         t.ready = function() {
  84                                 if ( ! t.isReady ) {
  85                                         t.isReady = true;
  86                                         for ( i = 0; i < t.funcs.length; i++ ) {
  87                                                 t.funcs[i]();
  88                                         }
  89                                 }
  90                         };
  91
  92                         if ( t.isReady ) {
  93                                 func();
  94                         } else {
  95                                 t.funcs.push(func);
  96                         }
  97
  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);
 107
 108                                         (function(){
 109                                                 try {
 110                                                         document.documentElement.doScroll("left");
 111                                                 } catch(e) {
 112                                                         setTimeout(arguments.callee, 50);
 113                                                         return;
 114                                                 }
 115
 116                                                 t.ready();
 117                                         })();
 118                                 }
 119
 120                                 t.eventAttached = true;
 121                         }
 122                 }
 123         },
 124
 125         _datetime = (function() {
 126                 var now = new Date(), zeroise;
 127
 128                 zeroise = function(number) {
 129                         var str = number.toString();
 130
 131                         if ( str.length < 2 )
 132                                 str = "0" + str;
 133
 134                         return str;
 135                 }
 136
 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() ) +
 143                         '+00:00';
 144         })(),
 145         qt;
 146
 147         qt = QTags = function(settings) {
 148                 if ( typeof(settings) == 'string' )
 149                         settings = {id: settings};
 150                 else if ( typeof(settings) != 'object' )
 151                         return false;
 152
 153                 var t = this,
 154                         id = settings.id,
 155                         canvas = document.getElementById(id),
 156                         name = 'qt_' + id,
 157                         tb, onclick, toolbar_id;
 158
 159                 if ( !id || !canvas )
 160                         return false;
 161
 162                 t.name = name;
 163                 t.id = id;
 164                 t.canvas = canvas;
 165                 t.settings = settings;
 166
 167                 if ( id == 'content' && typeof(adminpage) == 'string' && ( adminpage == 'post-new-php' || adminpage == 'post-php' ) ) {
 168                         // back compat hack :-(
 169                         edCanvas = canvas;
 170                         toolbar_id = 'ed_toolbar';
 171                 } else {
 172                         toolbar_id = name + '_toolbar';
 173                 }
 174
 175                 tb = document.createElement('div');
 176                 tb.id = toolbar_id;
 177                 tb.className = 'quicktags-toolbar';
 178
 179                 canvas.parentNode.insertBefore(tb, canvas);
 180                 t.toolbar = tb;
 181
 182                 // listen for click events
 183                 onclick = function(e) {
 184                         e = e || window.event;
 185                         var target = e.target || e.srcElement, i;
 186
 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 + '_', '');
 192
 193                                 if ( t.theButtons[i] )
 194                                         t.theButtons[i].callback.call(t.theButtons[i], target, canvas, t);
 195                         }
 196                 };
 197
 198                 if ( tb.addEventListener ) {
 199                         tb.addEventListener('click', onclick, false);
 200                 } else if ( tb.attachEvent ) {
 201                         tb.attachEvent('onclick', onclick);
 202                 }
 203
 204                 t.getButton = function(id) {
 205                         return t.theButtons[id];
 206                 };
 207
 208                 t.getButtonElement = function(id) {
 209                         return document.getElementById(name + '_' + id);
 210                 };
 211
 212                 qt.instances[id] = t;
 213
 214                 if ( !qt.instances[0] ) {
 215                         qt.instances[0] = qt.instances[id];
 216                         _domReady( function(){ qt._buttonsInit(); } );
 217                 }
 218         };
 219
 220         qt.instances = {};
 221
 222         qt.getInstance = function(id) {
 223                 return qt.instances[id];
 224         };
 225
 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,';
 229
 230                 for ( inst in t.instances ) {
 231                         if ( inst == 0 )
 232                                 continue;
 233
 234                         ed = t.instances[inst];
 235                         canvas = ed.canvas;
 236                         name = ed.name;
 237                         settings = ed.settings;
 238                         html = '';
 239                         theButtons = {};
 240                         use = '';
 241
 242                         // set buttons
 243                         if ( settings.buttons )
 244                                 use = ','+settings.buttons+',';
 245
 246                         for ( i in edButtons ) {
 247                                 if ( !edButtons[i] )
 248                                         continue;
 249
 250                                 id = edButtons[i].id;
 251                                 if ( use && defaults.indexOf(','+id+',') != -1 && use.indexOf(','+id+',') == -1 )
 252                                         continue;
 253
 254                                 if ( !edButtons[i].instance || edButtons[i].instance == inst ) {
 255                                         theButtons[id] = edButtons[i];
 256
 257                                         if ( edButtons[i].html )
 258                                                 html += edButtons[i].html(name + '_');
 259                                 }
 260                         }
 261
 262                         if ( use && use.indexOf(',fullscreen,') != -1 ) {
 263                                 theButtons['fullscreen'] = new qt.FullscreenButton();
 264                                 html += theButtons['fullscreen'].html(name + '_');
 265                         }
 266
 267                         ed.toolbar.innerHTML = html;
 268                         ed.theButtons = theButtons;
 269                 }
 270                 t.buttonsInitDone = true;
 271         };
 272
 273         /**
 274          * Main API function for adding a button to Quicktags
 275          *
 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 )
 280          *
 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!'); }
 284          *
 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 />' );
 288          *
 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.
 298          */
 299         qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {
 300                 var btn;
 301
 302                 if ( !id || !display )
 303                         return;
 304
 305                 priority = priority || 0;
 306                 arg2 = arg2 || '';
 307
 308                 if ( typeof(arg1) === 'function' ) {
 309                         btn = new qt.Button(id, display, access_key, title, instance);
 310                         btn.callback = arg1;
 311                 } else if ( typeof(arg1) === 'string' ) {
 312                         btn = new qt.TagButton(id, display, arg1, arg2, access_key, title, instance);
 313                 } else {
 314                         return;
 315                 }
 316
 317                 if ( priority == -1 ) // back-compat
 318                         return btn;
 319
 320                 if ( priority > 0 ) {
 321                         while ( typeof(edButtons[priority]) != 'undefined' ) {
 322                                 priority++
 323                         }
 324
 325                         edButtons[priority] = btn;
 326                 } else {
 327                         edButtons[edButtons.length] = btn;
 328                 }
 329
 330                 if ( this.buttonsInitDone )
 331                         this._buttonsInit(); // add the button HTML to all instances toolbars if addButton() was called too late
 332         };
 333
 334         qt.insertContent = function(content) {
 335                 var sel, startPos, endPos, scrollTop, text, canvas = document.getElementById(wpActiveEditor);
 336
 337                 if ( !canvas )
 338                         return false;
 339
 340                 if ( document.selection ) { //IE
 341                         canvas.focus();
 342                         sel = document.selection.createRange();
 343                         sel.text = content;
 344                         canvas.focus();
 345                 } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) { // FF, WebKit, Opera
 346                         text = canvas.value;
 347                         startPos = canvas.selectionStart;
 348                         endPos = canvas.selectionEnd;
 349                         scrollTop = canvas.scrollTop;
 350
 351                         canvas.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
 352
 353                         canvas.focus();
 354                         canvas.selectionStart = startPos + content.length;
 355                         canvas.selectionEnd = startPos + content.length;
 356                         canvas.scrollTop = scrollTop;
 357                 } else {
 358                         canvas.value += content;
 359                         canvas.focus();
 360                 }
 361                 return true;
 362         };
 363
 364         // a plain, dumb button
 365         qt.Button = function(id, display, access, title, instance) {
 366                 var t = this;
 367                 t.id = id;
 368                 t.display = display;
 369                 t.access = access;
 370                 t.title = title || '';
 371                 t.instance = instance || '';
 372         };
 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 + '" />';
 376         };
 377         qt.Button.prototype.callback = function(){};
 378
 379         // a button that inserts HTML tag
 380         qt.TagButton = function(id, display, tagStart, tagEnd, access, title, instance) {
 381                 var t = this;
 382                 qt.Button.call(t, id, display, access, title, instance);
 383                 t.tagStart = tagStart;
 384                 t.tagEnd = tagEnd;
 385         };
 386         qt.TagButton.prototype = new qt.Button();
 387         qt.TagButton.prototype.openTag = function(e, ed) {
 388                 var t = this;
 389
 390                 if ( ! ed.openTags ) {
 391                         ed.openTags = [];
 392                 }
 393                 if ( t.tagEnd ) {
 394                         ed.openTags.push(t.id);
 395                         e.value = '/' + e.value;
 396                 }
 397         };
 398         qt.TagButton.prototype.closeTag = function(e, ed) {
 399                 var t = this, i = t.isOpen(ed);
 400
 401                 if ( i !== false ) {
 402                         ed.openTags.splice(i, 1);
 403                 }
 404
 405                 e.value = t.display;
 406         };
 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;
 410                 if ( ed.openTags ) {
 411                         while ( ret === false && i < ed.openTags.length ) {
 412                                 ret = ed.openTags[i] == t.id ? i : false;
 413                                 i ++;
 414                         }
 415                 } else {
 416                         ret = false;
 417                 }
 418                 return ret;
 419         };
 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 : '';
 422
 423                 if ( document.selection ) { // IE
 424                         canvas.focus();
 425                         sel = document.selection.createRange();
 426                         if ( sel.text.length > 0 ) {
 427                                 if ( !t.tagEnd )
 428                                         sel.text = sel.text + t.tagStart;
 429                                 else
 430                                         sel.text = t.tagStart + sel.text + endTag;
 431                         } else {
 432                                 if ( !t.tagEnd ) {
 433                                         sel.text = t.tagStart;
 434                                 } else if ( t.isOpen(ed) === false ) {
 435                                         sel.text = t.tagStart;
 436                                         t.openTag(element, ed);
 437                                 } else {
 438                                         sel.text = endTag;
 439                                         t.closeTag(element, ed);
 440                                 }
 441                         }
 442                         canvas.focus();
 443                 } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) { // FF, WebKit, Opera
 444                         startPos = canvas.selectionStart;
 445                         endPos = canvas.selectionEnd;
 446                         cursorPos = endPos;
 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 ) {
 452                                 if ( !t.tagEnd ) {
 453                                         canvas.value = l + i + t.tagStart + r; // insert self closing tags after the selection
 454                                         cursorPos += t.tagStart.length;
 455                                 } else {
 456                                         canvas.value = l + t.tagStart + i + endTag + r;
 457                                         cursorPos += t.tagStart.length + endTag.length;
 458                                 }
 459                         } else {
 460                                 if ( !t.tagEnd ) {
 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;
 467                                 } else {
 468                                         canvas.value = l + endTag + r;
 469                                         cursorPos = startPos + endTag.length;
 470                                         t.closeTag(element, ed);
 471                                 }
 472                         }
 473
 474                         canvas.focus();
 475                         canvas.selectionStart = cursorPos;
 476                         canvas.selectionEnd = cursorPos;
 477                         canvas.scrollTop = scrollTop;
 478                 } else { // other browsers?
 479                         if ( !endTag ) {
 480                                 canvas.value += t.tagStart;
 481                         } else if ( t.isOpen(ed) !== false ) {
 482                                 canvas.value += t.tagStart;
 483                                 t.openTag(element, ed);
 484                         } else {
 485                                 canvas.value += endTag;
 486                                 t.closeTag(element, ed);
 487                         }
 488                         canvas.focus();
 489                 }
 490         };
 491
 492         // the spell button
 493         qt.SpellButton = function() {
 494                 qt.Button.call(this, 'spell', quicktagsL10n.lookup, '', quicktagsL10n.dictionaryLookup);
 495         };
 496         qt.SpellButton.prototype = new qt.Button();
 497         qt.SpellButton.prototype.callback = function(element, canvas, ed) {
 498                 var word = '', sel, startPos, endPos;
 499
 500                 if ( document.selection ) {
 501                         canvas.focus();
 502                         sel = document.selection.createRange();
 503                         if ( sel.text.length > 0 ) {
 504                                 word = sel.text;
 505                         }
 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);
 511                         }
 512                 }
 513
 514                 if ( word === '' ) {
 515                         word = prompt(quicktagsL10n.wordLookup, '');
 516                 }
 517
 518                 if ( word !== null && /^\w[\w ]*$/.test(word)) {
 519                         window.open('http://www.answers.com/' + encodeURIComponent(word));
 520                 }
 521         };
 522
 523         // the close tags button
 524         qt.CloseButton = function() {
 525                 qt.Button.call(this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags);
 526         };
 527
 528         qt.CloseButton.prototype = new qt.Button();
 529
 530         qt._close = function(e, c, ed) {
 531                 var button, element, tbo = ed.openTags;
 532
 533                 if ( tbo ) {
 534                         while ( tbo.length > 0 ) {
 535                                 button = ed.getButton(tbo[tbo.length - 1]);
 536                                 element = document.getElementById(ed.name + '_' + button.id);
 537
 538                                 if ( e )
 539                                         button.callback.call(button, element, c, ed);
 540                                 else
 541                                         button.closeTag(element, ed);
 542                         }
 543                 }
 544         };
 545
 546         qt.CloseButton.prototype.callback = qt._close;
 547
 548         qt.closeAllTags = function(editor_id) {
 549                 var ed = this.getInstance(editor_id);
 550                 qt._close('', ed.canvas, ed);
 551         };
 552
 553         // the link button
 554         qt.LinkButton = function() {
 555                 qt.TagButton.call(this, 'link', 'link', '', '</a>', 'a');
 556         };
 557         qt.LinkButton.prototype = new qt.TagButton();
 558         qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) {
 559                 var URL, t = this;
 560
 561                 if ( typeof(wpLink) != 'undefined' ) {
 562                         wpLink.open();
 563                         return;
 564                 }
 565
 566                 if ( ! defaultValue )
 567                         defaultValue = 'http://';
 568
 569                 if ( t.isOpen(ed) === false ) {
 570                         URL = prompt(quicktagsL10n.enterURL, defaultValue);
 571                         if ( URL ) {
 572                                 t.tagStart = '<a href="' + URL + '">';
 573                                 qt.TagButton.prototype.callback.call(t, e, c, ed);
 574                         }
 575                 } else {
 576                         qt.TagButton.prototype.callback.call(t, e, c, ed);
 577                 }
 578         };
 579
 580         // the img button
 581         qt.ImgButton = function() {
 582                 qt.TagButton.call(this, 'img', 'img', '', '', 'm');
 583         };
 584         qt.ImgButton.prototype = new qt.TagButton();
 585         qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) {
 586                 if ( ! defaultValue ) {
 587                         defaultValue = 'http://';
 588                 }
 589                 var src = prompt(quicktagsL10n.enterImageURL, defaultValue), alt;
 590                 if ( src ) {
 591                         alt = prompt(quicktagsL10n.enterImageDescription, '');
 592                         this.tagStart = '<img src="' + src + '" alt="' + alt + '" />';
 593                         qt.TagButton.prototype.callback.call(this, e, c, ed);
 594                 }
 595         };
 596
 597         qt.FullscreenButton = function() {
 598                 qt.Button.call(this, 'fullscreen', quicktagsL10n.fullscreen, 'f', quicktagsL10n.toggleFullscreen);
 599         };
 600         qt.FullscreenButton.prototype = new qt.Button();
 601         qt.FullscreenButton.prototype.callback = function(e, c) {
 602                 if ( c.id != 'content' || typeof(fullscreen) == 'undefined' )
 603                         return;
 604
 605                 fullscreen.on();
 606         };
 607
 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()
 623
 624 })();