wp-admin/js/editor.js

   1
   2 ( function( $ ) {
   3         function SwitchEditors() {
   4                 var tinymce, $$,
   5                         exports = {};
   6
   7                 function init() {
   8                         if ( ! tinymce && window.tinymce ) {
   9                                 tinymce = window.tinymce;
  10                                 $$ = tinymce.$;
  11
  12                                 $$( document ).on( 'click', function( event ) {
  13                                         var id, mode,
  14                                                 target = $$( event.target );
  15
  16                                         if ( target.hasClass( 'wp-switch-editor' ) ) {
  17                                                 id = target.attr( 'data-wp-editor-id' );
  18                                                 mode = target.hasClass( 'switch-tmce' ) ? 'tmce' : 'html';
  19                                                 switchEditor( id, mode );
  20                                         }
  21                                 });
  22                         }
  23                 }
  24
  25                 function getToolbarHeight( editor ) {
  26                         var node = $$( '.mce-toolbar-grp', editor.getContainer() )[0],
  27                                 height = node && node.clientHeight;
  28
  29                         if ( height && height > 10 && height < 200 ) {
  30                                 return parseInt( height, 10 );
  31                         }
  32
  33                         return 30;
  34                 }
  35
  36                 function switchEditor( id, mode ) {
  37                         id = id || 'content';
  38                         mode = mode || 'toggle';
  39
  40                         var editorHeight, toolbarHeight, iframe,
  41                                 editor = tinymce.get( id ),
  42                                 wrap = $$( '#wp-' + id + '-wrap' ),
  43                                 $textarea = $$( '#' + id ),
  44                                 textarea = $textarea[0];
  45
  46                         if ( 'toggle' === mode ) {
  47                                 if ( editor && ! editor.isHidden() ) {
  48                                         mode = 'html';
  49                                 } else {
  50                                         mode = 'tmce';
  51                                 }
  52                         }
  53
  54                         if ( 'tmce' === mode || 'tinymce' === mode ) {
  55                                 if ( editor && ! editor.isHidden() ) {
  56                                         return false;
  57                                 }
  58
  59                                 if ( typeof( window.QTags ) !== 'undefined' ) {
  60                                         window.QTags.closeAllTags( id );
  61                                 }
  62
  63                                 editorHeight = parseInt( textarea.style.height, 10 ) || 0;
  64
  65                                 if ( editor ) {
  66                                         editor.show();
  67
  68                                         // No point resizing the iframe in iOS
  69                                         if ( ! tinymce.Env.iOS && editorHeight ) {
  70                                                 toolbarHeight = getToolbarHeight( editor );
  71                                                 editorHeight = editorHeight - toolbarHeight + 14;
  72
  73                                                 // height cannot be under 50 or over 5000
  74                                                 if ( editorHeight > 50 && editorHeight < 5000 ) {
  75                                                         editor.theme.resizeTo( null, editorHeight );
  76                                                 }
  77                                         }
  78                                 } else {
  79                                         tinymce.init( window.tinyMCEPreInit.mceInit[id] );
  80                                 }
  81
  82                                 wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
  83                                 $textarea.attr( 'aria-hidden', true );
  84                                 window.setUserSetting( 'editor', 'tinymce' );
  85
  86                         } else if ( 'html' === mode ) {
  87                                 if ( editor && editor.isHidden() ) {
  88                                         return false;
  89                                 }
  90
  91                                 if ( editor ) {
  92                                         if ( ! tinymce.Env.iOS ) {
  93                                                 iframe = editor.iframeElement;
  94                                                 editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;
  95
  96                                                 if ( editorHeight ) {
  97                                                         toolbarHeight = getToolbarHeight( editor );
  98                                                         editorHeight = editorHeight + toolbarHeight - 14;
  99
 100                                                         // height cannot be under 50 or over 5000
 101                                                         if ( editorHeight > 50 && editorHeight < 5000 ) {
 102                                                                 textarea.style.height = editorHeight + 'px';
 103                                                         }
 104                                                 }
 105                                         }
 106
 107                                         editor.hide();
 108                                 } else {
 109                                         // The TinyMCE instance doesn't exist, show the textarea
 110                                         $textarea.css({ 'display': '', 'visibility': '' });
 111                                 }
 112
 113                                 wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
 114                                 $textarea.attr( 'aria-hidden', false );
 115                                 window.setUserSetting( 'editor', 'html' );
 116                         }
 117                 }
 118
 119                 // Replace paragraphs with double line breaks
 120                 function removep( html ) {
 121                         var blocklist = 'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset',
 122                                 blocklist1 = blocklist + '|div|p',
 123                                 blocklist2 = blocklist + '|pre',
 124                                 preserve_linebreaks = false,
 125                                 preserve_br = false,
 126                                 preserve = [];
 127
 128                         if ( ! html ) {
 129                                 return '';
 130                         }
 131
 132                         // Preserve script and style tags.
 133                         if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
 134                                 html = html.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match ) {
 135                                         preserve.push( match );
 136                                         return '<wp-preserve>';
 137                                 } );
 138                         }
 139
 140                         // Protect pre tags.
 141                         if ( html.indexOf( '<pre' ) !== -1 ) {
 142                                 preserve_linebreaks = true;
 143                                 html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, function( a ) {
 144                                         a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
 145                                         a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
 146                                         return a.replace( /\r?\n/g, '<wp-line-break>' );
 147                                 });
 148                         }
 149
 150                         // keep <br> tags inside captions and remove line breaks
 151                         if ( html.indexOf( '[caption' ) !== -1 ) {
 152                                 preserve_br = true;
 153                                 html = html.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
 154                                         return a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' ).replace( /[\r\n\t]+/, '' );
 155                                 });
 156                         }
 157
 158                         // Pretty it up for the source editor
 159                         html = html.replace( new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ), '</$1>\n' );
 160                         html = html.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' );
 161
 162                         // Mark </p> if it has any attributes.
 163                         html = html.replace( /(<p [^>]+>.*?)<\/p>/g, '$1</p#>' );
 164
 165                         // Separate <div> containing <p>
 166                         html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
 167
 168                         // Remove <p> and <br />
 169                         html = html.replace( /\s*<p>/gi, '' );
 170                         html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );
 171                         html = html.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
 172                         html = html.replace( /\s*<br ?\/?>\s*/gi, '\n' );
 173
 174                         // Fix some block element newline issues
 175                         html = html.replace( /\s*<div/g, '\n<div' );
 176                         html = html.replace( /<\/div>\s*/g, '</div>\n' );
 177                         html = html.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
 178                         html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
 179
 180                         html = html.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' );
 181                         html = html.replace( new RegExp('\\s*</(' + blocklist2 + ')>\\s*', 'g' ), '</$1>\n' );
 182                         html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
 183
 184                         if ( html.indexOf( '<option' ) !== -1 ) {
 185                                 html = html.replace( /\s*<option/g, '\n<option' );
 186                                 html = html.replace( /\s*<\/select>/g, '\n</select>' );
 187                         }
 188
 189                         if ( html.indexOf( '<hr' ) !== -1 ) {
 190                                 html = html.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
 191                         }
 192
 193                         if ( html.indexOf( '<object' ) !== -1 ) {
 194                                 html = html.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
 195                                         return a.replace( /[\r\n]+/g, '' );
 196                                 });
 197                         }
 198
 199                         // Unmark special paragraph closing tags
 200                         html = html.replace( /<\/p#>/g, '</p>\n' );
 201                         html = html.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
 202
 203                         // Trim whitespace
 204                         html = html.replace( /^\s+/, '' );
 205                         html = html.replace( /[\s\u00a0]+$/, '' );
 206
 207                         // put back the line breaks in pre|script
 208                         if ( preserve_linebreaks ) {
 209                                 html = html.replace( /<wp-line-break>/g, '\n' );
 210                         }
 211
 212                         // and the <br> tags in captions
 213                         if ( preserve_br ) {
 214                                 html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
 215                         }
 216
 217                         // Put back preserved tags.
 218                         if ( preserve.length ) {
 219                                 html = html.replace( /<wp-preserve>/g, function() {
 220                                         return preserve.shift();
 221                                 } );
 222                         }
 223
 224                         return html;
 225                 }
 226
 227                 // Similar to `wpautop()` in formatting.php
 228                 function autop( text ) {
 229                         var preserve_linebreaks = false,
 230                                 preserve_br = false,
 231                                 blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' +
 232                                         '|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' +
 233                                         '|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary';
 234
 235                         // Normalize line breaks
 236                         text = text.replace( /\r\n|\r/g, '\n' );
 237
 238                         if ( text.indexOf( '\n' ) === -1 ) {
 239                                 return text;
 240                         }
 241
 242                         if ( text.indexOf( '<object' ) !== -1 ) {
 243                                 text = text.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
 244                                         return a.replace( /\n+/g, '' );
 245                                 });
 246                         }
 247
 248                         text = text.replace( /<[^<>]+>/g, function( a ) {
 249                                 return a.replace( /[\n\t ]+/g, ' ' );
 250                         });
 251
 252                         // Protect pre|script tags
 253                         if ( text.indexOf( '<pre' ) !== -1 || text.indexOf( '<script' ) !== -1 ) {
 254                                 preserve_linebreaks = true;
 255                                 text = text.replace( /<(pre|script)[^>]*>[\s\S]*?<\/\1>/g, function( a ) {
 256                                         return a.replace( /\n/g, '<wp-line-break>' );
 257                                 });
 258                         }
 259
 260                         // keep <br> tags inside captions and convert line breaks
 261                         if ( text.indexOf( '[caption' ) !== -1 ) {
 262                                 preserve_br = true;
 263                                 text = text.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
 264                                         // keep existing <br>
 265                                         a = a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' );
 266                                         // no line breaks inside HTML tags
 267                                         a = a.replace( /<[^<>]+>/g, function( b ) {
 268                                                 return b.replace( /[\n\t ]+/, ' ' );
 269                                         });
 270                                         // convert remaining line breaks to <br>
 271                                         return a.replace( /\s*\n\s*/g, '<wp-temp-br />' );
 272                                 });
 273                         }
 274
 275                         text = text + '\n\n';
 276                         text = text.replace( /<br \/>\s*<br \/>/gi, '\n\n' );
 277                         text = text.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n$1' );
 278                         text = text.replace( new RegExp( '(</(?:' + blocklist + ')>)', 'gi' ), '$1\n\n' );
 279                         text = text.replace( /<hr( [^>]*)?>/gi, '<hr$1>\n\n' ); // hr is self closing block element
 280                         text = text.replace( /\s*<option/gi, '<option' ); // No <p> or <br> around <option>
 281                         text = text.replace( /<\/option>\s*/gi, '</option>' );
 282                         text = text.replace( /\n\s*\n+/g, '\n\n' );
 283                         text = text.replace( /([\s\S]+?)\n\n/g, '<p>$1</p>\n' );
 284                         text = text.replace( /<p>\s*?<\/p>/gi, '');
 285                         text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
 286                         text = text.replace( /<p>(<li.+?)<\/p>/gi, '$1');
 287                         text = text.replace( /<p>\s*<blockquote([^>]*)>/gi, '<blockquote$1><p>');
 288                         text = text.replace( /<\/blockquote>\s*<\/p>/gi, '</p></blockquote>');
 289                         text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '$1' );
 290                         text = text.replace( new RegExp( '(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
 291
 292                         // Remove redundant spaces and line breaks after existing <br /> tags
 293                         text = text.replace( /(<br[^>]*>)\s*\n/gi, '$1' );
 294
 295                         // Create <br /> from the remaining line breaks
 296                         text = text.replace( /\s*\n/g, '<br />\n');
 297
 298                         text = text.replace( new RegExp( '(</?(?:' + blocklist + ')[^>]*>)\\s*<br />', 'gi' ), '$1' );
 299                         text = text.replace( /<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' );
 300                         text = text.replace( /(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi, '[caption$1[/caption]' );
 301
 302                         text = text.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) {
 303                                 if ( c.match( /<p( [^>]*)?>/ ) ) {
 304                                         return a;
 305                                 }
 306
 307                                 return b + '<p>' + c + '</p>';
 308                         });
 309
 310                         // put back the line breaks in pre|script
 311                         if ( preserve_linebreaks ) {
 312                                 text = text.replace( /<wp-line-break>/g, '\n' );
 313                         }
 314
 315                         if ( preserve_br ) {
 316                                 text = text.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
 317                         }
 318
 319                         return text;
 320                 }
 321
 322                 // Add old events
 323                 function pre_wpautop( html ) {
 324                         var obj = { o: exports, data: html, unfiltered: html };
 325
 326                         if ( $ ) {
 327                                 $( 'body' ).trigger( 'beforePreWpautop', [ obj ] );
 328                         }
 329
 330                         obj.data = removep( obj.data );
 331
 332                         if ( $ ) {
 333                                 $( 'body' ).trigger( 'afterPreWpautop', [ obj ] );
 334                         }
 335
 336                         return obj.data;
 337                 }
 338
 339                 function wpautop( text ) {
 340                         var obj = { o: exports, data: text, unfiltered: text };
 341
 342                         if ( $ ) {
 343                                 $( 'body' ).trigger( 'beforeWpautop', [ obj ] );
 344                         }
 345
 346                         obj.data = autop( obj.data );
 347
 348                         if ( $ ) {
 349                                 $( 'body' ).trigger( 'afterWpautop', [ obj ] );
 350                         }
 351
 352                         return obj.data;
 353                 }
 354
 355                 if ( $ ) {
 356                         $( document ).ready( init );
 357                 } else if ( document.addEventListener ) {
 358                         document.addEventListener( 'DOMContentLoaded', init, false );
 359                         window.addEventListener( 'load', init, false );
 360                 } else if ( window.attachEvent ) {
 361                         window.attachEvent( 'onload', init );
 362                         document.attachEvent( 'onreadystatechange', function() {
 363                                 if ( 'complete' === document.readyState ) {
 364                                         init();
 365                                 }
 366                         } );
 367                 }
 368
 369                 window.wp = window.wp || {};
 370                 window.wp.editor = window.wp.editor || {};
 371                 window.wp.editor.autop = wpautop;
 372                 window.wp.editor.removep = pre_wpautop;
 373
 374                 exports = {
 375                         go: switchEditor,
 376                         wpautop: wpautop,
 377                         pre_wpautop: pre_wpautop,
 378                         _wp_Autop: autop,
 379                         _wp_Nop: removep
 380                 };
 381
 382                 return exports;
 383         }
 384
 385         window.switchEditors = new SwitchEditors();
 386 }( window.jQuery ));