wp-includes/js/tinymce/plugins/wordpress/plugin.js

   1 /* global tinymce, getUserSetting, setUserSetting */
   2
   3 // Set the minimum value for the modals z-index higher than #wpadminbar (100000)
   4 tinymce.ui.FloatPanel.zIndex = 100100;
   5
   6 tinymce.PluginManager.add( 'wordpress', function( editor ) {
   7         var DOM = tinymce.DOM, wpAdvButton, modKey, style,
   8                 last = 0;
   9
  10         function toggleToolbars( state ) {
  11                 var iframe, initial, toolbars,
  12                         pixels = 0;
  13
  14                 initial = ( state === 'hide' );
  15
  16                 if ( editor.theme.panel ) {
  17                         toolbars = editor.theme.panel.find('.toolbar:not(.menubar)');
  18                 }
  19
  20                 if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) {
  21                         return;
  22                 }
  23
  24                 if ( ! state && toolbars[1].visible() ) {
  25                         state = 'hide';
  26                 }
  27
  28                 tinymce.each( toolbars, function( toolbar, i ) {
  29                         if ( i > 0 ) {
  30                                 if ( state === 'hide' ) {
  31                                         toolbar.hide();
  32                                         pixels += 30;
  33                                 } else {
  34                                         toolbar.show();
  35                                         pixels -= 30;
  36                                 }
  37                         }
  38                 });
  39
  40                 if ( pixels && ! initial ) {
  41                         iframe = editor.getContentAreaContainer().firstChild;
  42                         DOM.setStyle( iframe, 'height', iframe.clientHeight + pixels ); // Resize iframe
  43
  44                         if ( state === 'hide' ) {
  45                                 setUserSetting('hidetb', '0');
  46                                 wpAdvButton && wpAdvButton.active( false );
  47                         } else {
  48                                 setUserSetting('hidetb', '1');
  49                                 wpAdvButton && wpAdvButton.active( true );
  50                         }
  51                 }
  52         }
  53
  54         // Add the kitchen sink button :)
  55         editor.addButton( 'wp_adv', {
  56                 tooltip: 'Toolbar Toggle',
  57                 cmd: 'WP_Adv',
  58                 onPostRender: function() {
  59                         wpAdvButton = this;
  60                         wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false );
  61                 }
  62         });
  63
  64         // Hide the toolbars after loading
  65         editor.on( 'PostRender', function() {
  66                 if ( editor.getParam( 'wordpress_adv_hidden', true ) && getUserSetting( 'hidetb', '0' ) === '0' ) {
  67                         toggleToolbars( 'hide' );
  68                 }
  69         });
  70
  71         editor.addCommand( 'WP_Adv', function() {
  72                 toggleToolbars();
  73         });
  74
  75         editor.on( 'focus', function() {
  76         window.wpActiveEditor = editor.id;
  77     });
  78
  79         // Replace Read More/Next Page tags with images
  80         editor.on( 'BeforeSetContent', function( e ) {
  81                 if ( e.content ) {
  82                         if ( e.content.indexOf( '<!--more' ) !== -1 ) {
  83                                 e.content = e.content.replace( /<!--more(.*?)-->/g, function( match, moretext ) {
  84                                         return '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="' + moretext + '" ' +
  85                                                 'class="wp-more-tag mce-wp-more" title="Read More..." data-mce-resize="false" data-mce-placeholder="1" />';
  86                                 });
  87                         }
  88
  89                         if ( e.content.indexOf( '<!--nextpage-->' ) !== -1 ) {
  90                                 e.content = e.content.replace( /<!--nextpage-->/g,
  91                                         '<img src="' + tinymce.Env.transparentSrc + '" class="wp-more-tag mce-wp-nextpage" ' +
  92                                                 'title="Page break" data-mce-resize="false" data-mce-placeholder="1" />' );
  93                         }
  94                 }
  95         });
  96
  97         // Replace images with tags
  98         editor.on( 'PostProcess', function( e ) {
  99                 if ( e.get ) {
 100                         e.content = e.content.replace(/<img[^>]+>/g, function( image ) {
 101                                 var match, moretext = '';
 102
 103                                 if ( image.indexOf('wp-more-tag') !== -1 ) {
 104                                         if ( image.indexOf('mce-wp-more') !== -1 ) {
 105                                                 if ( match = image.match( /data-wp-more="([^"]+)"/ ) ) {
 106                                                         moretext = match[1];
 107                                                 }
 108
 109                                                 image = '<!--more' + moretext + '-->';
 110                                         } else if ( image.indexOf('mce-wp-nextpage') !== -1 ) {
 111                                                 image = '<!--nextpage-->';
 112                                         }
 113                                 }
 114
 115                                 return image;
 116                         });
 117                 }
 118         });
 119
 120         // Display the tag name instead of img in element path
 121         editor.on( 'ResolveName', function( e ) {
 122                 var dom = editor.dom,
 123                         target = e.target;
 124
 125                 if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-more-tag' ) ) {
 126                         if ( dom.hasClass( target, 'mce-wp-more' ) ) {
 127                                 e.name = 'more';
 128                         } else if ( dom.hasClass( target, 'mce-wp-nextpage' ) ) {
 129                                 e.name = 'nextpage';
 130                         }
 131                 }
 132         });
 133
 134         // Register commands
 135         editor.addCommand( 'WP_More', function( tag ) {
 136                 var parent, html, title,
 137                         classname = 'wp-more-tag',
 138                         dom = editor.dom,
 139                         node = editor.selection.getNode();
 140
 141                 tag = tag || 'more';
 142                 classname += ' mce-wp-' + tag;
 143                 title = tag === 'more' ? 'More...' : 'Next Page';
 144                 html = '<img src="' + tinymce.Env.transparentSrc + '" title="' + title + '" class="' + classname + '" ' +
 145                         'data-mce-resize="false" data-mce-placeholder="1" />';
 146
 147                 // Most common case
 148                 if ( node.nodeName === 'BODY' || ( node.nodeName === 'P' && node.parentNode.nodeName === 'BODY' ) ) {
 149                         editor.insertContent( html );
 150                         return;
 151                 }
 152
 153                 // Get the top level parent node
 154                 parent = dom.getParent( node, function( found ) {
 155                         if ( found.parentNode && found.parentNode.nodeName === 'BODY' ) {
 156                                 return true;
 157                         }
 158
 159                         return false;
 160                 }, editor.getBody() );
 161
 162                 if ( parent ) {
 163                         if ( parent.nodeName === 'P' ) {
 164                                 parent.appendChild( dom.create( 'p', null, html ).firstChild );
 165                         } else {
 166                                 dom.insertAfter( dom.create( 'p', null, html ), parent );
 167                         }
 168
 169                         editor.nodeChanged();
 170                 }
 171         });
 172
 173         editor.addCommand( 'WP_Code', function() {
 174                 editor.formatter.toggle('code');
 175         });
 176
 177         editor.addCommand( 'WP_Page', function() {
 178                 editor.execCommand( 'WP_More', 'nextpage' );
 179         });
 180
 181         editor.addCommand( 'WP_Help', function() {
 182                 editor.windowManager.open({
 183                         url: tinymce.baseURL + '/wp-mce-help.php',
 184                         title: 'Keyboard Shortcuts',
 185                         width: 450,
 186                         height: 420,
 187                         inline: 1,
 188                         classes: 'wp-help'
 189                 });
 190         });
 191
 192         editor.addCommand( 'WP_Medialib', function() {
 193                 if ( typeof wp !== 'undefined' && wp.media && wp.media.editor ) {
 194                         wp.media.editor.open( editor.id );
 195                 }
 196         });
 197
 198         // Register buttons
 199         editor.addButton( 'wp_more', {
 200                 tooltip: 'Insert Read More tag',
 201                 onclick: function() {
 202                         editor.execCommand( 'WP_More', 'more' );
 203                 }
 204         });
 205
 206         editor.addButton( 'wp_page', {
 207                 tooltip: 'Page break',
 208                 onclick: function() {
 209                         editor.execCommand( 'WP_More', 'nextpage' );
 210                 }
 211         });
 212
 213         editor.addButton( 'wp_help', {
 214                 tooltip: 'Keyboard Shortcuts',
 215                 cmd: 'WP_Help'
 216         });
 217
 218         editor.addButton( 'wp_code', {
 219                 tooltip: 'Code',
 220                 cmd: 'WP_Code',
 221                 stateSelector: 'code'
 222         });
 223
 224         // Menubar
 225         // Insert->Add Media
 226         if ( typeof wp !== 'undefined' && wp.media && wp.media.editor ) {
 227                 editor.addMenuItem( 'add_media', {
 228                         text: 'Add Media',
 229                         icon: 'wp-media-library',
 230                         context: 'insert',
 231                         cmd: 'WP_Medialib'
 232                 });
 233         }
 234
 235         // Insert "Read More..."
 236         editor.addMenuItem( 'wp_more', {
 237                 text: 'Insert Read More tag',
 238                 icon: 'wp_more',
 239                 context: 'insert',
 240                 onclick: function() {
 241                         editor.execCommand( 'WP_More', 'more' );
 242                 }
 243         });
 244
 245         // Insert "Next Page"
 246         editor.addMenuItem( 'wp_page', {
 247                 text: 'Page break',
 248                 icon: 'wp_page',
 249                 context: 'insert',
 250                 onclick: function() {
 251                         editor.execCommand( 'WP_More', 'nextpage' );
 252                 }
 253         });
 254
 255         editor.on( 'BeforeExecCommand', function(e) {
 256                 if ( tinymce.Env.webkit && ( e.command === 'InsertUnorderedList' || e.command === 'InsertOrderedList' ) ) {
 257                         if ( ! style ) {
 258                                 style = editor.dom.create( 'style', {'type': 'text/css'},
 259                                         '#tinymce,#tinymce span,#tinymce li,#tinymce li>span,#tinymce p,#tinymce p>span{font:medium sans-serif;color:#000;line-height:normal;}');
 260                         }
 261
 262                         editor.getDoc().head.appendChild( style );
 263                 }
 264         });
 265
 266         editor.on( 'ExecCommand', function( e ) {
 267                 if ( tinymce.Env.webkit && style &&
 268                         ( 'InsertUnorderedList' === e.command || 'InsertOrderedList' === e.command ) ) {
 269
 270                         editor.dom.remove( style );
 271                 }
 272         });
 273
 274         editor.on( 'init', function() {
 275                 var env = tinymce.Env,
 276                         bodyClass = ['mceContentBody'], // back-compat for themes that use this in editor-style.css...
 277                         doc = editor.getDoc(),
 278                         dom = editor.dom;
 279
 280                 if ( editor.getParam( 'directionality' ) === 'rtl' ) {
 281                         bodyClass.push('rtl');
 282                         dom.setAttrib( doc.documentElement, 'dir', 'rtl' );
 283                 }
 284
 285                 if ( env.ie ) {
 286                         if ( parseInt( env.ie, 10 ) === 9 ) {
 287                                 bodyClass.push('ie9');
 288                         } else if ( parseInt( env.ie, 10 ) === 8 ) {
 289                                 bodyClass.push('ie8');
 290                         } else if ( env.ie < 8 ) {
 291                                 bodyClass.push('ie7');
 292                         }
 293                 }
 294
 295                 bodyClass.push('wp-editor');
 296
 297                 tinymce.each( bodyClass, function( cls ) {
 298                         if ( cls ) {
 299                                 dom.addClass( doc.body, cls );
 300                         }
 301                 });
 302
 303                 // Remove invalid parent paragraphs when inserting HTML
 304                 // TODO: still needed?
 305                 editor.on( 'BeforeSetContent', function( e ) {
 306                         if ( e.content ) {
 307                                 e.content = e.content.replace(/<p>\s*<(p|div|ul|ol|dl|table|blockquote|h[1-6]|fieldset|pre|address)( [^>]*)?>/gi, '<$1$2>');
 308                                 e.content = e.content.replace(/<\/(p|div|ul|ol|dl|table|blockquote|h[1-6]|fieldset|pre|address)>\s*<\/p>/gi, '</$1>');
 309                         }
 310                 });
 311
 312                 if ( typeof window.jQuery !== 'undefined' ) {
 313                         window.jQuery( document ).triggerHandler( 'tinymce-editor-init', [editor] );
 314                 }
 315
 316                 if ( window.tinyMCEPreInit && window.tinyMCEPreInit.dragDropUpload ) {
 317                         dom.bind( doc, 'dragstart dragend dragover drop', function( event ) {
 318                                 if ( typeof window.jQuery !== 'undefined' ) {
 319                                         // Trigger the jQuery handlers.
 320                                         window.jQuery( document ).trigger( new window.jQuery.Event( event ) );
 321                                 }
 322                         });
 323                 }
 324         });
 325
 326         // Word count
 327         if ( typeof window.jQuery !== 'undefined' ) {
 328                 editor.on( 'keyup', function( e ) {
 329                         var key = e.keyCode || e.charCode;
 330
 331                         if ( key === last ) {
 332                                 return;
 333                         }
 334
 335                         if ( 13 === key || 8 === last || 46 === last ) {
 336                                 window.jQuery( document ).triggerHandler( 'wpcountwords', [ editor.getContent({ format : 'raw' }) ] );
 337                         }
 338
 339                         last = key;
 340                 });
 341         }
 342
 343         editor.on( 'SaveContent', function( e ) {
 344                 // If editor is hidden, we just want the textarea's value to be saved
 345                 if ( editor.isHidden() ) {
 346                         e.content = e.element.value;
 347                         return;
 348                 }
 349
 350                 // Keep empty paragraphs :(
 351                 e.content = e.content.replace( /<p>(<br ?\/?>|\u00a0|\uFEFF)?<\/p>/g, '<p>&nbsp;</p>' );
 352
 353                 if ( editor.getParam( 'wpautop', true ) && typeof window.switchEditors !== 'undefined' ) {
 354                         e.content = window.switchEditors.pre_wpautop( e.content );
 355                 }
 356         });
 357
 358         editor.on( 'preInit', function() {
 359                 // Don't replace <i> with <em> and <b> with <strong> and don't remove them when empty
 360                 editor.schema.addValidElements( '@[id|accesskey|class|dir|lang|style|tabindex|title|contenteditable|draggable|dropzone|hidden|spellcheck|translate],i,b' );
 361         });
 362
 363         // Add custom shortcuts
 364         modKey = 'alt+shift';
 365
 366         editor.addShortcut( modKey + '+c', '', 'JustifyCenter' );
 367         editor.addShortcut( modKey + '+r', '', 'JustifyRight' );
 368         editor.addShortcut( modKey + '+l', '', 'JustifyLeft' );
 369         editor.addShortcut( modKey + '+j', '', 'JustifyFull' );
 370         editor.addShortcut( modKey + '+q', '', 'mceBlockQuote' );
 371         editor.addShortcut( modKey + '+u', '', 'InsertUnorderedList' );
 372         editor.addShortcut( modKey + '+o', '', 'InsertOrderedList' );
 373         editor.addShortcut( modKey + '+n', '', 'mceSpellCheck' );
 374         editor.addShortcut( modKey + '+s', '', 'unlink' );
 375         editor.addShortcut( modKey + '+m', '', 'WP_Medialib' );
 376         editor.addShortcut( modKey + '+z', '', 'WP_Adv' );
 377         editor.addShortcut( modKey + '+t', '', 'WP_More' );
 378         editor.addShortcut( modKey + '+d', '', 'Strikethrough' );
 379         editor.addShortcut( modKey + '+h', '', 'WP_Help' );
 380         editor.addShortcut( modKey + '+p', '', 'WP_Page' );
 381         editor.addShortcut( modKey + '+x', '', 'WP_Code' );
 382         editor.addShortcut( 'ctrl+s', '', function() {
 383                 if ( typeof wp !== 'undefined' && wp.autosave ) {
 384                         wp.autosave.server.triggerSave();
 385                 }
 386         });
 387
 388         // popup buttons for the gallery, etc.
 389         editor.on( 'init', function() {
 390                 editor.dom.bind( editor.getWin(), 'scroll', function() {
 391                         _hideButtons();
 392                 });
 393
 394                 editor.dom.bind( editor.getBody(), 'dragstart', function() {
 395                         _hideButtons();
 396                 });
 397         });
 398
 399         editor.on( 'BeforeExecCommand', function() {
 400                 _hideButtons();
 401         });
 402
 403         editor.on( 'SaveContent', function() {
 404                 _hideButtons();
 405         });
 406
 407         editor.on( 'MouseDown', function( e ) {
 408                 if ( e.target.nodeName !== 'IMG' ) {
 409                         _hideButtons();
 410                 }
 411         });
 412
 413         editor.on( 'keydown', function( e ) {
 414                 if ( e.which === tinymce.util.VK.DELETE || e.which === tinymce.util.VK.BACKSPACE ) {
 415                         _hideButtons();
 416                 }
 417         });
 418
 419         // Internal functions
 420         function _setEmbed( c ) {
 421                 return c.replace( /\[embed\]([\s\S]+?)\[\/embed\][\s\u00a0]*/g, function( a, b ) {
 422                         return '<img width="300" height="200" src="' + tinymce.Env.transparentSrc + '" class="wp-oembed" ' +
 423                                 'alt="'+ b +'" title="'+ b +'" data-mce-resize="false" data-mce-placeholder="1" />';
 424                 });
 425         }
 426
 427         function _getEmbed( c ) {
 428                 return c.replace( /<img[^>]+>/g, function( a ) {
 429                         if ( a.indexOf('class="wp-oembed') !== -1 ) {
 430                                 var u = a.match( /alt="([^\"]+)"/ );
 431
 432                                 if ( u[1] ) {
 433                                         a = '[embed]' + u[1] + '[/embed]';
 434                                 }
 435                         }
 436
 437                         return a;
 438                 });
 439         }
 440
 441         function _showButtons( n, id ) {
 442                 var p1, p2, vp, X, Y;
 443
 444                 vp = editor.dom.getViewPort( editor.getWin() );
 445                 p1 = DOM.getPos( editor.getContentAreaContainer() );
 446                 p2 = editor.dom.getPos( n );
 447
 448                 X = Math.max( p2.x - vp.x, 0 ) + p1.x;
 449                 Y = Math.max( p2.y - vp.y, 0 ) + p1.y;
 450
 451                 DOM.setStyles( id, {
 452                         'top' : Y + 5 + 'px',
 453                         'left' : X + 5 + 'px',
 454                         'display': 'block'
 455                 });
 456         }
 457
 458         function _hideButtons() {
 459                 DOM.hide( DOM.select( '#wp_editbtns, #wp_gallerybtns' ) );
 460         }
 461
 462         // Expose some functions (back-compat)
 463         return {
 464                 _showButtons: _showButtons,
 465                 _hideButtons: _hideButtons,
 466                 _setEmbed: _setEmbed,
 467                 _getEmbed: _getEmbed
 468         };
 469 });