From fbfd88cecb12b9260a50a387234f72d5074de608 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Mon, 28 Jul 2014 23:44:28 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@29317 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/class-wp-editor.php | 1 + .../js/tinymce/plugins/wordpress/plugin.js | 50 +++++++++---------- .../js/tinymce/skins/wordpress/wp-content.css | 10 ++-- 3 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 9745623f20..14baef6f2b 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -944,6 +944,7 @@ final class _WP_Editors { 'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ), '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' ), ); diff --git a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js index 1a33dcce19..15f0ccf541 100644 --- a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js @@ -37,7 +37,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { } }); - if ( pixels && ! initial ) { + if ( pixels && ! initial ) { // Resize iframe, not needed in iOS if ( ! tinymce.Env.iOS ) { iframe = editor.getContentAreaContainer().firstChild; @@ -83,18 +83,24 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { // Replace Read More/Next Page tags with images editor.on( 'BeforeSetContent', function( e ) { + var title; + if ( e.content ) { if ( e.content.indexOf( '/g, function( match, moretext ) { - return ''; + return ''; }); } if ( e.content.indexOf( '' ) !== -1 ) { + title = editor.editorManager.i18n.translate( 'Page break' ); + e.content = e.content.replace( //g, - '' ); + '' ); } } }); @@ -105,16 +111,14 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { e.content = e.content.replace(/]+>/g, function( image ) { 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 = ''; - } else if ( image.indexOf('mce-wp-nextpage') !== -1 ) { - image = ''; + if ( image.indexOf( 'data-wp-more="more"' ) !== -1 ) { + if ( match = image.match( /data-wp-more-text="([^"]+)"/ ) ) { + moretext = match[1]; } + + image = ''; + } else if ( image.indexOf( 'data-wp-more="nextpage"' ) !== -1 ) { + image = ''; } return image; @@ -123,16 +127,11 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { }); // Display the tag name instead of img in element path - editor.on( 'ResolveName', function( e ) { - var dom = editor.dom, - target = e.target; + editor.on( 'ResolveName', function( event ) { + var attr; - 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'; - } + if ( event.target.nodeName === 'IMG' && ( attr = editor.dom.getAttrib( event.target, 'data-wp-more' ) ) ) { + event.name = attr; } }); @@ -145,9 +144,10 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { 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 = ''; + 'data-wp-more="' + tag + '" data-mce-resize="false" data-mce-placeholder="1" />'; // Most common case if ( node.nodeName === 'BODY' || ( node.nodeName === 'P' && node.parentNode.nodeName === 'BODY' ) ) { diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index d620ea8958..4b907dfba5 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -122,8 +122,7 @@ img::selection { padding: 0; } -.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; box-shadow: none; @@ -135,16 +134,15 @@ img::selection { cursor: default; } -.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; }