wp-admin/js/editor.js

   1 /* global tinymce, tinyMCEPreInit, QTags, setUserSetting */
   2
   3 window.switchEditors = {
   4
   5         switchto: function( el ) {
   6                 var aid = el.id,
   7                         l = aid.length,
   8                         id = aid.substr( 0, l - 5 ),
   9                         mode = aid.substr( l - 4 );
  10
  11                 this.go( id, mode );
  12         },
  13
  14         // mode can be 'html', 'tmce', or 'toggle'; 'html' is used for the 'Text' editor tab.
  15         go: function( id, mode ) {
  16                 var t = this, ed, wrap_id, txtarea_el, iframe, editorHeight, toolbarHeight,
  17                         DOM = tinymce.DOM; //DOMUtils outside the editor iframe
  18
  19                 id = id || 'content';
  20                 mode = mode || 'toggle';
  21
  22                 ed = tinymce.get( id );
  23                 wrap_id = 'wp-' + id + '-wrap';
  24                 txtarea_el = DOM.get( id );
  25
  26                 if ( 'toggle' === mode ) {
  27                         if ( ed && ! ed.isHidden() ) {
  28                                 mode = 'html';
  29                         } else {
  30                                 mode = 'tmce';
  31                         }
  32                 }
  33
  34                 function getToolbarHeight() {
  35                         var node = DOM.select( '.mce-toolbar-grp', ed.getContainer() )[0],
  36                                 height = node && node.clientHeight;
  37
  38                         if ( height && height > 10 && height < 200 ) {
  39                                 return parseInt( height, 10 );
  40                         }
  41
  42                         return 30;
  43                 }
  44
  45                 if ( 'tmce' === mode || 'tinymce' === mode ) {
  46                         if ( ed && ! ed.isHidden() ) {
  47                                 return false;
  48                         }
  49
  50                         if ( typeof( QTags ) !== 'undefined' ) {
  51                                 QTags.closeAllTags( id );
  52                         }
  53
  54                         editorHeight = txtarea_el ? parseInt( txtarea_el.style.height, 10 ) : 0;
  55
  56                         if ( tinyMCEPreInit.mceInit[ id ] && tinyMCEPreInit.mceInit[ id ].wpautop ) {
  57                                 txtarea_el.value = t.wpautop( txtarea_el.value );
  58                         }
  59
  60                         if ( ed ) {
  61                                 ed.show();
  62
  63                                 // No point resizing the iframe in iOS
  64                                 if ( ! tinymce.Env.iOS && editorHeight ) {
  65                                         toolbarHeight = getToolbarHeight();
  66                                         editorHeight = editorHeight - toolbarHeight + 14;
  67
  68                                         // height cannot be under 50 or over 5000
  69                                         if ( editorHeight > 50 && editorHeight < 5000 ) {
  70                                                 ed.theme.resizeTo( null, editorHeight );
  71                                         }
  72                                 }
  73                         } else {
  74                                 tinymce.init( tinyMCEPreInit.mceInit[id] );
  75                         }
  76
  77                         DOM.removeClass( wrap_id, 'html-active' );
  78                         DOM.addClass( wrap_id, 'tmce-active' );
  79                         setUserSetting( 'editor', 'tinymce' );
  80
  81                 } else if ( 'html' === mode ) {
  82
  83                         if ( ed && ed.isHidden() ) {
  84                                 return false;
  85                         }
  86
  87                         if ( ed ) {
  88                                 if ( ! tinymce.Env.iOS ) {
  89                                         iframe = DOM.get( id + '_ifr' );
  90                                         editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;
  91
  92                                         if ( editorHeight ) {
  93                                                 toolbarHeight = getToolbarHeight();
  94                                                 editorHeight = editorHeight + toolbarHeight - 14;
  95
  96                                                 // height cannot be under 50 or over 5000
  97                                                 if ( editorHeight > 50 && editorHeight < 5000 ) {
  98                                                         txtarea_el.style.height = editorHeight + 'px';
  99                                                 }
 100                                         }
 101                                 }
 102
 103                                 ed.hide();
 104                         } else {
 105                                 // The TinyMCE instance doesn't exist, run the content through 'pre_wpautop()' and show the textarea
 106                                 if ( tinyMCEPreInit.mceInit[ id ] && tinyMCEPreInit.mceInit[ id ].wpautop ) {
 107                                         txtarea_el.value = t.pre_wpautop( txtarea_el.value );
 108                                 }
 109
 110                                 DOM.setStyles( txtarea_el, {'display': '', 'visibility': ''} );
 111                         }
 112
 113                         DOM.removeClass( wrap_id, 'tmce-active' );
 114                         DOM.addClass( wrap_id, 'html-active' );
 115                         setUserSetting( 'editor', 'html' );
 116                 }
 117                 return false;
 118         },
 119
 120         _wp_Nop: function( content ) {
 121                 var blocklist1, blocklist2,
 122                         preserve_linebreaks = false,
 123                         preserve_br = false;
 124
 125                 // Protect pre|script tags
 126                 if ( content.indexOf( '<pre' ) !== -1 || content.indexOf( '<script' ) !== -1 ) {
 127                         preserve_linebreaks = true;
 128                         content = content.replace( /<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function( a ) {
 129                                 a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
 130                                 a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
 131                                 return a.replace( /\r?\n/g, '<wp-line-break>' );
 132                         });
 133                 }
 134
 135                 // keep <br> tags inside captions and remove line breaks
 136                 if ( content.indexOf( '[caption' ) !== -1 ) {
 137                         preserve_br = true;
 138                         content = content.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
 139                                 return a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' ).replace( /[\r\n\t]+/, '' );
 140                         });
 141                 }
 142
 143                 // Pretty it up for the source editor
 144                 blocklist1 = 'blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|div|h[1-6]|p|fieldset';
 145                 content = content.replace( new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ), '</$1>\n' );
 146                 content = content.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' );
 147
 148                 // Mark </p> if it has any attributes.
 149                 content = content.replace( /(<p [^>]+>.*?)<\/p>/g, '$1</p#>' );
 150
 151                 // Separate <div> containing <p>
 152                 content = content.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
 153
 154                 // Remove <p> and <br />
 155                 content = content.replace( /\s*<p>/gi, '' );
 156                 content = content.replace( /\s*<\/p>\s*/gi, '\n\n' );
 157                 content = content.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
 158                 content = content.replace( /\s*<br ?\/?>\s*/gi, '\n' );
 159
 160                 // Fix some block element newline issues
 161                 content = content.replace( /\s*<div/g, '\n<div' );
 162                 content = content.replace( /<\/div>\s*/g, '</div>\n' );
 163                 content = content.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
 164                 content = content.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
 165
 166                 blocklist2 = 'blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|h[1-6]|pre|fieldset';
 167                 content = content.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' );
 168                 content = content.replace( new RegExp('\\s*</(' + blocklist2 + ')>\\s*', 'g' ), '</$1>\n' );
 169                 content = content.replace( /<li([^>]*)>/g, '\t<li$1>' );
 170
 171                 if ( content.indexOf( '<option' ) !== -1 ) {
 172                         content = content.replace( /\s*<option/g, '\n<option' );
 173                         content = content.replace( /\s*<\/select>/g, '\n</select>' );
 174                 }
 175
 176                 if ( content.indexOf( '<hr' ) !== -1 ) {
 177                         content = content.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
 178                 }
 179
 180                 if ( content.indexOf( '<object' ) !== -1 ) {
 181                         content = content.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
 182                                 return a.replace( /[\r\n]+/g, '' );
 183                         });
 184                 }
 185
 186                 // Unmark special paragraph closing tags
 187                 content = content.replace( /<\/p#>/g, '</p>\n' );
 188                 content = content.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
 189
 190                 // Trim whitespace
 191                 content = content.replace( /^\s+/, '' );
 192                 content = content.replace( /[\s\u00a0]+$/, '' );
 193
 194                 // put back the line breaks in pre|script
 195                 if ( preserve_linebreaks ) {
 196                         content = content.replace( /<wp-line-break>/g, '\n' );
 197                 }
 198
 199                 // and the <br> tags in captions
 200                 if ( preserve_br ) {
 201                         content = content.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
 202                 }
 203
 204                 return content;
 205         },
 206
 207         _wp_Autop: function(pee) {
 208                 var preserve_linebreaks = false,
 209                         preserve_br = false,
 210                         blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' +
 211                                 '|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' +
 212                                 '|article|aside|hgroup|header|footer|nav|figure|details|menu|summary';
 213
 214                 if ( pee.indexOf( '<object' ) !== -1 ) {
 215                         pee = pee.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
 216                                 return a.replace( /[\r\n]+/g, '' );
 217                         });
 218                 }
 219
 220                 pee = pee.replace( /<[^<>]+>/g, function( a ){
 221                         return a.replace( /[\r\n]+/g, ' ' );
 222                 });
 223
 224                 // Protect pre|script tags
 225                 if ( pee.indexOf( '<pre' ) !== -1 || pee.indexOf( '<script' ) !== -1 ) {
 226                         preserve_linebreaks = true;
 227                         pee = pee.replace( /<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function( a ) {
 228                                 return a.replace( /(\r\n|\n)/g, '<wp-line-break>' );
 229                         });
 230                 }
 231
 232                 // keep <br> tags inside captions and convert line breaks
 233                 if ( pee.indexOf( '[caption' ) !== -1 ) {
 234                         preserve_br = true;
 235                         pee = pee.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
 236                                 // keep existing <br>
 237                                 a = a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' );
 238                                 // no line breaks inside HTML tags
 239                                 a = a.replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( b ) {
 240                                         return b.replace( /[\r\n\t]+/, ' ' );
 241                                 });
 242                                 // convert remaining line breaks to <br>
 243                                 return a.replace( /\s*\n\s*/g, '<wp-temp-br />' );
 244                         });
 245                 }
 246
 247                 pee = pee + '\n\n';
 248                 pee = pee.replace( /<br \/>\s*<br \/>/gi, '\n\n' );
 249                 pee = pee.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n$1' );
 250                 pee = pee.replace( new RegExp( '(</(?:' + blocklist + ')>)', 'gi' ), '$1\n\n' );
 251                 pee = pee.replace( /<hr( [^>]*)?>/gi, '<hr$1>\n\n' ); // hr is self closing block element
 252                 pee = pee.replace( /\s*<option/gi, '<option' ); // No <p> or <br> around <option>
 253                 pee = pee.replace( /<\/option>\s*/gi, '</option>' );
 254                 pee = pee.replace( /\r\n|\r/g, '\n' );
 255                 pee = pee.replace( /\n\s*\n+/g, '\n\n' );
 256                 pee = pee.replace( /([\s\S]+?)\n\n/g, '<p>$1</p>\n' );
 257                 pee = pee.replace( /<p>\s*?<\/p>/gi, '');
 258                 pee = pee.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
 259                 pee = pee.replace( /<p>(<li.+?)<\/p>/gi, '$1');
 260                 pee = pee.replace( /<p>\s*<blockquote([^>]*)>/gi, '<blockquote$1><p>');
 261                 pee = pee.replace( /<\/blockquote>\s*<\/p>/gi, '</p></blockquote>');
 262                 pee = pee.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '$1' );
 263                 pee = pee.replace( new RegExp( '(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
 264                 pee = pee.replace( /\s*\n/gi, '<br />\n');
 265                 pee = pee.replace( new RegExp( '(</?(?:' + blocklist + ')[^>]*>)\\s*<br />', 'gi' ), '$1' );
 266                 pee = pee.replace( /<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' );
 267                 pee = pee.replace( /(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi, '[caption$1[/caption]' );
 268
 269                 pee = pee.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) {
 270                         if ( c.match( /<p( [^>]*)?>/ ) ) {
 271                                 return a;
 272                         }
 273
 274                         return b + '<p>' + c + '</p>';
 275                 });
 276
 277                 // put back the line breaks in pre|script
 278                 if ( preserve_linebreaks ) {
 279                         pee = pee.replace( /<wp-line-break>/g, '\n' );
 280                 }
 281
 282                 if ( preserve_br ) {
 283                         pee = pee.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
 284                 }
 285
 286                 return pee;
 287         },
 288
 289         pre_wpautop: function( content ) {
 290                 var t = this, o = { o: t, data: content, unfiltered: content },
 291                         q = typeof( jQuery ) !== 'undefined';
 292
 293                 if ( q ) {
 294                         jQuery( 'body' ).trigger( 'beforePreWpautop', [ o ] );
 295                 }
 296
 297                 o.data = t._wp_Nop( o.data );
 298
 299                 if ( q ) {
 300                         jQuery('body').trigger('afterPreWpautop', [ o ] );
 301                 }
 302
 303                 return o.data;
 304         },
 305
 306         wpautop: function( pee ) {
 307                 var t = this, o = { o: t, data: pee, unfiltered: pee },
 308                         q = typeof( jQuery ) !== 'undefined';
 309
 310                 if ( q ) {
 311                         jQuery( 'body' ).trigger('beforeWpautop', [ o ] );
 312                 }
 313
 314                 o.data = t._wp_Autop( o.data );
 315
 316                 if ( q ) {
 317                         jQuery( 'body' ).trigger('afterWpautop', [ o ] );
 318                 }
 319
 320                 return o.data;
 321         }
 322 };