Changeset 38039

Timestamp:

07/12/2016 10:08:28 PM (8 years ago)

Author:

azaozz

Message:

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.

Location:

trunk/src

Files:

• wp-admin/js/editor.js (modified) (3 diffs)
• wp-includes/js/tinymce/plugins/wordpress/plugin.js (modified) (4 diffs)

trunk/src/wp-admin/js/editor.js

@@ -123 +123 @@
                 blocklist2 = blocklist + '|pre',
                 preserve_linebreaks = false,
-                preserve_br = false;
+                preserve_br = false,
+                preserve = [];
 
             if ( ! html ) {
@@ -129 +130 @@
             }
 
-            // 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>' );
@@ -204 +213 @@
             if ( preserve_br ) {
                 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();
+                } );
             }
 

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

@@ -91 +91 @@
     });
 
-    // Replace Read More/Next Page tags with images
     editor.on( 'BeforeSetContent', function( event ) {
         var title;
@@ -115 +114 @@
             if ( event.load && event.format !== 'raw' && hasWpautop ) {
                 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;" ' +
+                    '/>';
+                } );
             }
 
@@ -130 +144 @@
     });
 
-    // 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 ) {
@@ -141 +156 @@
                     }
 
-                    image = '<!--more' + moretext + '-->';
+                    string = '<!--more' + moretext + '-->';
                 } else if ( image.indexOf( 'data-wp-more="nextpage"' ) !== -1 ) {
-                    image = '<!--nextpage-->';
-                }
-
-                return image;
+                    string = '<!--nextpage-->';
+                } else if ( image.indexOf( 'data-wp-preserve' ) !== -1 ) {
+                    if ( match = image.match( / data-wp-preserve="([^"]+)"/ ) ) {
+                        string = decodeURIComponent( match[1] );
+                    }
+                }
+
+                return string || image;
             });
         }