Changeset 29317

Timestamp:

07/28/2014 11:44:28 PM (10 years ago)

Author:

azaozz

Message:

TinyMCE:

• Use data-wp-* for processing and styling of the more and nextpage placeholders, keep the class names for back-compat. Makes them "immune" to "Clear formatting".
• Translate the titles of the placeholders.

Fixes #28772.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (1 diff)
• js/tinymce/plugins/wordpress/plugin.js (modified) (5 diffs)
• js/tinymce/skins/wordpress/wp-content.css (modified) (2 diffs)

trunk/src/wp-includes/class-wp-editor.php

@@ -945 +945 @@
             'Toolbar Toggle' => __( 'Toolbar Toggle' ),
             'Insert Read More tag' => __( 'Insert Read More tag' ),
+            'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
             'Distraction Free Writing' => __( 'Distraction Free Writing' ),
         );

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

@@ -38 +38 @@
         });
 
-        if (  pixels && ! initial ) {
+        if ( pixels && ! initial ) {
             // Resize iframe, not needed in iOS
             if ( ! tinymce.Env.iOS ) {
@@ -84 +84 @@
     // Replace Read More/Next Page tags with images
     editor.on( 'BeforeSetContent', function( e ) {
+        var title;
+
         if ( e.content ) {
             if ( e.content.indexOf( '<!--more' ) !== -1 ) {
+                title = editor.editorManager.i18n.translate( 'Read more...' );
+
                 e.content = e.content.replace( /<!--more(.*?)-->/g, function( match, moretext ) {
-                    return '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="' + moretext + '" ' +
-                        'class="wp-more-tag mce-wp-more" title="Read More..." data-mce-resize="false" data-mce-placeholder="1" />';
+                    return '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="more" data-wp-more-text="' + moretext + '" ' +
+                        'class="wp-more-tag mce-wp-more" title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />';
                 });
             }
 
             if ( e.content.indexOf( '<!--nextpage-->' ) !== -1 ) {
+                title = editor.editorManager.i18n.translate( 'Page break' );
+
                 e.content = e.content.replace( /<!--nextpage-->/g,
-                    '<img src="' + tinymce.Env.transparentSrc + '" class="wp-more-tag mce-wp-nextpage" ' +
-                        'title="Page break" data-mce-resize="false" data-mce-placeholder="1" />' );
+                    '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="nextpage" class="wp-more-tag mce-wp-nextpage" ' +
+                        'title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />' );
             }
         }
@@ -106 +112 @@
                 var match, moretext = '';
 
-                if ( image.indexOf('wp-more-tag') !== -1 ) {
-                    if ( image.indexOf('mce-wp-more') !== -1 ) {
-                        if ( match = image.match( /data-wp-more="([^"]+)"/ ) ) {
-                            moretext = match[1];
-                        }
-
-                        image = '<!--more' + moretext + '-->';
-                    } else if ( image.indexOf('mce-wp-nextpage') !== -1 ) {
-                        image = '<!--nextpage-->';
+                if ( image.indexOf( 'data-wp-more="more"' ) !== -1 ) {
+                    if ( match = image.match( /data-wp-more-text="([^"]+)"/ ) ) {
+                        moretext = match[1];
                     }
+
+                    image = '<!--more' + moretext + '-->';
+                } else if ( image.indexOf( 'data-wp-more="nextpage"' ) !== -1 ) {
+                    image = '<!--nextpage-->';
                 }
 
@@ -124 +128 @@
 
     // Display the tag name instead of img in element path
-    editor.on( 'ResolveName', function( e ) {
-        var dom = editor.dom,
-            target = e.target;
-
-        if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-more-tag' ) ) {
-            if ( dom.hasClass( target, 'mce-wp-more' ) ) {
-                e.name = 'more';
-            } else if ( dom.hasClass( target, 'mce-wp-nextpage' ) ) {
-                e.name = 'nextpage';
-            }
+    editor.on( 'ResolveName', function( event ) {
+        var attr;
+
+        if ( event.target.nodeName === 'IMG' && ( attr = editor.dom.getAttrib( event.target, 'data-wp-more' ) ) ) {
+            event.name = attr;
         }
     });
@@ -146 +145 @@
         tag = tag || 'more';
         classname += ' mce-wp-' + tag;
-        title = tag === 'more' ? 'More...' : 'Next Page';
+        title = tag === 'more' ? 'Read more...' : 'Next page';
+        title = editor.editorManager.i18n.translate( title );
         html = '<img src="' + tinymce.Env.transparentSrc + '" title="' + title + '" class="' + classname + '" ' +
-            'data-mce-resize="false" data-mce-placeholder="1" />';
+            'data-wp-more="' + tag + '" data-mce-resize="false" data-mce-placeholder="1" />';
 
         // Most common case

trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -123 +123 @@
 }
 
-.mce-content-body img.mce-wp-nextpage,
-.mce-content-body img.mce-wp-more {
+.mce-content-body img[data-wp-more] {
     border: 0;
     -webkit-box-shadow: none;
@@ -136 +135 @@
 }
 
-.mce-content-body img.mce-wp-nextpage[data-mce-selected],
-.mce-content-body img.mce-wp-more[data-mce-selected] {
+.mce-content-body img[data-wp-more][data-mce-selected] {
     outline: 1px dotted #888;
 }
 
-.mce-content-body img.mce-wp-more {
+.mce-content-body img[data-wp-more="more"] {
     background: transparent url( images/more.png ) repeat-y scroll center center;
 }
 
-.mce-content-body img.mce-wp-nextpage {
+.mce-content-body img[data-wp-more="nextpage"] {
     background: transparent url( images/pagebreak.png ) repeat-y scroll center center;
 }