Changeset 38039

Timestamp:

07/12/2016 10:08:28 PM (10 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;
                         });
                 }