TinyMCE: preserve `<script>` and `<style>` tags inside the editor.

Uses image placeholders for the tags and makes then visible. That way the tags can also be deleted from inside the editor.

Props iseulde, azaozz.
Fixes #32923.
Built from https://develop.svn.wordpress.org/trunk@38039


git-svn-id: http://core.svn.wordpress.org/trunk@37980 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/editor.js

@@ -122,16 +122,25 @@
 				blocklist1 = blocklist + '|div|p',
 				blocklist2 = blocklist + '|pre',
 				preserve_linebreaks = false,
-				preserve_br = false;
+				preserve_br = false,
+				preserve = [];
 
 			if ( ! html ) {
 				return '';
 			}
 
-			// Protect pre|script tags
-			if ( html.indexOf( '<pre' ) !== -1 || html.indexOf( '<script' ) !== -1 ) {
+			// Preserve script and style tags.
+			if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
+				html = html.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match ) {
+					preserve.push( match );
+					return '<wp-preserve>';
+				} );
+			}
+
+			// Protect pre tags.
+			if ( html.indexOf( '<pre' ) !== -1 ) {
 				preserve_linebreaks = true;
-				html = html.replace( /<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function( a ) {
+				html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, function( a ) {
 					a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
 					a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
 					return a.replace( /\r?\n/g, '<wp-line-break>' );
@@ -205,6 +214,13 @@
 				html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
 			}
 
+			// Put back preserved tags.
+			if ( preserve.length ) {
+				html = html.replace( /<wp-preserve>/g, function() {
+					return preserve.shift();
+				} );
+			}
+
 			return html;
 		}
 

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

@@ -90,7 +90,6 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
         window.wpActiveEditor = editor.id;
     });
 
-	// Replace Read More/Next Page tags with images
 	editor.on( 'BeforeSetContent', function( event ) {
 		var title;
 
@@ -116,6 +115,21 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 				event.content = wp.editor.autop( event.content );
 			}
 
+			if ( event.content.indexOf( '<script' ) !== -1 || event.content.indexOf( '<style' ) !== -1 ) {
+				event.content = event.content.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match, tag ) {
+					return '<img ' +
+						'src="' + tinymce.Env.transparentSrc + '" ' +
+						'data-wp-preserve="' + encodeURIComponent( match ) + '" ' +
+						'data-mce-resize="false" ' +
+						'data-mce-placeholder="1" '+
+						'class="mce-object" ' +
+						'width="20" height="20" '+
+						'alt="&lt;' + tag + '&gt;" ' +
+						'title="&lt;' + tag + '&gt;" ' +
+					'/>';
+				} );
+			}
+
 			// Remove spaces from empty paragraphs.
 			// Avoid backtracking, can freeze the editor. See #35890.
 			// (This is also quite faster than using only one regex.)
@@ -129,23 +143,28 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 		}
 	});
 
-	// Replace images with tags
-	editor.on( 'PostProcess', function( e ) {
-		if ( e.get ) {
-			e.content = e.content.replace(/<img[^>]+>/g, function( image ) {
-				var match, moretext = '';
+	editor.on( 'PostProcess', function( event ) {
+		if ( event.get ) {
+			event.content = event.content.replace(/<img[^>]+>/g, function( image ) {
+				var match,
+					string,
+					moretext = '';
 
 				if ( image.indexOf( 'data-wp-more="more"' ) !== -1 ) {
 					if ( match = image.match( /data-wp-more-text="([^"]+)"/ ) ) {
 						moretext = match[1];
 					}
 
-					image = '<!--more' + moretext + '-->';
+					string = '<!--more' + moretext + '-->';
 				} else if ( image.indexOf( 'data-wp-more="nextpage"' ) !== -1 ) {
-					image = '<!--nextpage-->';
+					string = '<!--nextpage-->';
+				} else if ( image.indexOf( 'data-wp-preserve' ) !== -1 ) {
+					if ( match = image.match( / data-wp-preserve="([^"]+)"/ ) ) {
+						string = decodeURIComponent( match[1] );
+					}
 				}
 
-				return image;
+				return string || image;
 			});
 		}
 	});

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.6-beta2-38038';
+$wp_version = '4.6-beta2-38039';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.