<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27159] trunk/src/wp-includes: Edit image in TinyMCE:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27159">27159</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2014-02-10 23:47:34 +0000 (Mon, 10 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Edit image in TinyMCE:
- Add a "toolbar" at the top of the image with two buttons: Edit and Delete.
- Don't open the edit modal on second click on the image. Makes the "edit" button somewhat pointless and can sometimes trigger after resizing the image.
- When the image has caption: attempt to prevent IE11 from making the caption element resizable and wrapping it in thick border.
- When the caret is inside a caption next to the image, pressing Enter will create a new <p> tag above the caption.
- Hide the image toolbar on drag, cut, align.
Props gcorne, see <a href="http://core.trac.wordpress.org/ticket/24409">#24409</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpeditorphp">trunk/src/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpeditimagepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymceskinswordpresswpcontentcss">trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/class-wp-editor.php (27158 => 27159)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/class-wp-editor.php 2014-02-10 22:59:40 UTC (rev 27158)
+++ trunk/src/wp-includes/class-wp-editor.php 2014-02-10 23:47:34 UTC (rev 27159)
</span><span class="lines">@@ -207,7 +207,7 @@
</span><span class="cx"> $ext_plugins = '';
</span><span class="cx">
</span><span class="cx"> if ( $set['teeny'] ) {
</span><del>- self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array( 'fullscreen', 'link', 'image', 'wordpress', 'wplink' ), $editor_id );
</del><ins>+ self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array( 'fullscreen', 'link', 'image', 'wordpress', 'wpeditimage', 'wplink' ), $editor_id );
</ins><span class="cx"> } else {
</span><span class="cx"> /**
</span><span class="cx"> * TinyMCE external plugins filter
</span><span class="lines">@@ -335,9 +335,13 @@
</span><span class="cx"> self::$first_init['external_plugins'] = json_encode( $mce_external_plugins );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // WordPress default stylesheet
- $mce_css = array( self::$baseurl . '/skins/wordpress/wp-content.css' );
</del><ins>+ $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
+ $version = 'ver=' . $GLOBALS['wp_version'];
+ $dashicons = includes_url( "css/dashicons$suffix.css?$version" );
</ins><span class="cx">
</span><ins>+ // WordPress default stylesheet and dashicons
+ $mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
+
</ins><span class="cx"> // load editor_style.css if the current theme supports it
</span><span class="cx"> if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {
</span><span class="cx"> $editor_styles = $GLOBALS['editor_styles'];
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpeditimagepluginjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (27158 => 27159)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-02-10 22:59:40 UTC (rev 27158)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-02-10 23:47:34 UTC (rev 27159)
</span><span class="lines">@@ -42,7 +42,7 @@
</span><span class="cx">
</span><span class="cx"> width = parseInt( w, 10 ) + 10;
</span><span class="cx">
</span><del>- return '<div class="mceTemp" draggable="true"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
</del><ins>+ return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
</ins><span class="cx"> '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
</span><span class="cx"> });
</span><span class="cx"> }
</span><span class="lines">@@ -102,7 +102,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function extractImageData( imageNode ) {
</span><del>- var classes, metadata, captionBlock, caption;
</del><ins>+ var classes, metadata, captionBlock, caption,
+ dom = editor.dom;
</ins><span class="cx">
</span><span class="cx"> // default attributes
</span><span class="cx"> metadata = {
</span><span class="lines">@@ -118,12 +119,13 @@
</span><span class="cx"> linkUrl: ''
</span><span class="cx"> };
</span><span class="cx">
</span><del>- metadata.url = editor.dom.getAttrib( imageNode, 'src' );
- metadata.alt = editor.dom.getAttrib( imageNode, 'alt' );
- metadata.width = parseInt( editor.dom.getAttrib( imageNode, 'width' ), 10 );
- metadata.height = parseInt( editor.dom.getAttrib( imageNode, 'height' ), 10 );
</del><ins>+ metadata.url = dom.getAttrib( imageNode, 'src' );
+ metadata.alt = dom.getAttrib( imageNode, 'alt' );
+ metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
+ metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
</ins><span class="cx">
</span><del>- //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored when the image and/or caption are updated
</del><ins>+ //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored
+ // when the image and/or caption are updated
</ins><span class="cx"> // maybe use getAttribs()
</span><span class="cx">
</span><span class="cx"> // extract meta data from classes (candidate for turning into a method)
</span><span class="lines">@@ -144,7 +146,7 @@
</span><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> // extract caption
</span><del>- captionBlock = editor.dom.getParents( imageNode, '.wp-caption' );
</del><ins>+ captionBlock = dom.getParents( imageNode, '.wp-caption' );
</ins><span class="cx">
</span><span class="cx"> if ( captionBlock.length ) {
</span><span class="cx"> captionBlock = captionBlock[0];
</span><span class="lines">@@ -155,26 +157,26 @@
</span><span class="cx"> metadata.align = name.replace( 'align', '' );
</span><span class="cx"> }
</span><span class="cx"> } );
</span><del>- caption = editor.dom.select( 'dd.wp-caption-dd', captionBlock );
</del><ins>+
+ caption = dom.select( 'dd.wp-caption-dd', captionBlock );
</ins><span class="cx"> if ( caption.length ) {
</span><span class="cx"> caption = caption[0];
</span><span class="cx"> // need to do some more thinking about this
</span><span class="cx"> metadata.caption = editor.serializer.serialize( caption )
</span><span class="cx"> .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
</span><del>-
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // extract linkTo
</span><del>- if ( imageNode.parentNode.nodeName === 'A' ) {
- metadata.linkUrl = editor.dom.getAttrib( imageNode.parentNode, 'href' );
</del><ins>+ if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
+ metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return metadata;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function updateImage( imageNode, imageData ) {
</span><del>- var className, width, node, html, captionNode, nodeToReplace, uid;
</del><ins>+ var className, width, node, html, captionNode, nodeToReplace, uid, editedImg;
</ins><span class="cx">
</span><span class="cx"> if ( imageData.caption ) {
</span><span class="cx">
</span><span class="lines">@@ -185,11 +187,11 @@
</span><span class="cx">
</span><span class="cx"> //TODO: shouldn't add the id attribute if it isn't an attachment
</span><span class="cx">
</span><del>- // should create a new function for genrating the caption markup
</del><ins>+ // should create a new function for generating the caption markup
</ins><span class="cx"> html = '<dl id="'+ imageData.attachment_id +'" class="wp-caption '+ className +'" style="width: '+ width +'px">' +
</span><span class="cx"> '<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
</span><span class="cx">
</span><del>- node = editor.dom.create( 'div', { 'class': 'mceTemp', draggable: 'true' }, html );
</del><ins>+ node = editor.dom.create( 'div', { 'class': 'mceTemp' }, html );
</ins><span class="cx"> } else {
</span><span class="cx"> node = createImageAndLink( imageData, 'node' );
</span><span class="cx"> }
</span><span class="lines">@@ -215,12 +217,15 @@
</span><span class="cx">
</span><span class="cx"> editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
</span><span class="cx">
</span><del>- if ( node.nodeName === 'IMG' ) {
- editor.selection.select( node );
- } else {
- editor.selection.select( editor.dom.select( 'img', node )[0] );
</del><ins>+ editor.nodeChanged();
+
+ editedImg = node.nodeName === 'IMG' ? node : editor.dom.select( 'img', node )[0];
+
+ if ( editedImg ) {
+ editor.selection.select( editedImg );
+ // refresh toolbar
+ addToolbar( editedImg );
</ins><span class="cx"> }
</span><del>- editor.nodeChanged();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function createImageAndLink( imageData, mode ) {
</span><span class="lines">@@ -264,11 +269,124 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ function editImage( img ) {
+ var frame, callback;
+
+ if ( typeof wp === 'undefined' || ! wp.media ) {
+ editor.execCommand( 'mceImage' );
+ return;
+ }
+
+ editor.undoManager.add();
+
+ frame = wp.media({
+ frame: 'image',
+ state: 'image-details',
+ metadata: extractImageData( img )
+ } );
+
+ callback = function( imageData ) {
+ updateImage( img, imageData );
+ editor.focus();
+ };
+
+ frame.state('image-details').on( 'update', callback );
+ frame.state('replace-image').on( 'replace', callback );
+ frame.on( 'close', function() {
+ editor.focus();
+ // editor.selection.select( img );
+ // editor.nodeChanged();
+ });
+
+ frame.open();
+ }
+
+ function removeImage( node ) {
+ var wrap;
+
+ if ( node.nodeName === 'DIV' && editor.dom.hasClass( node, 'mceTemp' ) ) {
+ wrap = node;
+ } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
+ wrap = editor.dom.getParent( node, 'div.mceTemp' );
+ }
+
+ if ( wrap ) {
+ if ( wrap.nextSibling ) {
+ editor.selection.select( wrap.nextSibling );
+ } else if ( wrap.previousSibling ) {
+ editor.selection.select( wrap.previousSibling );
+ } else {
+ editor.selection.select( wrap.parentNode );
+ }
+
+ editor.selection.collapse( true );
+ editor.nodeChanged();
+ editor.dom.remove( wrap );
+ } else {
+ editor.dom.remove( node );
+ }
+ }
+
+ function addToolbar( node ) {
+ var position, toolbarHtml, toolbar,
+ dom = editor.dom;
+
+ removeToolbar();
+
+ // Don't add to placeholders
+ if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) {
+ return;
+ }
+
+ dom.setAttrib( node, 'data-wp-imgselect', 1 );
+ position = dom.getPos( node, editor.getBody() );
+
+ toolbarHtml = '<div class="wrapper" data-mce-bogus="1">' +
+ '<div class="dashicons dashicons-format-image edit" data-mce-bogus="1"></div> ' +
+ '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div></div>';
+
+ toolbar = dom.create( 'div', {
+ 'id': 'wp-image-toolbar',
+ 'data-mce-bogus': '1',
+ 'contenteditable': false
+ }, toolbarHtml );
+
+ editor.getBody().appendChild( toolbar );
+
+ dom.setStyles( toolbar, {
+ top: position.y,
+ left: position.x,
+ width: node.width
+ });
+ }
+
+ function removeToolbar() {
+ var toolbar = editor.dom.get( 'wp-image-toolbar' );
+
+ if ( toolbar ) {
+ editor.dom.remove( toolbar );
+ }
+
+ editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
+ }
+
+ function isPlaceholder( node ) {
+ var dom = editor.dom;
+
+ if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) ||
+ dom.getAttrib( node, 'data-mce-object' ) ) {
+
+ return true;
+ }
+
+ return false;
+ }
+
</ins><span class="cx"> editor.on( 'init', function() {
</span><span class="cx"> var dom = editor.dom;
</span><span class="cx">
</span><span class="cx"> // Add caption field to the default image dialog
</span><del>- editor.on( 'wpLoadImageForm', function( e ) {
</del><ins>+ editor.on( 'wpLoadImageForm', function( event ) {
</ins><span class="cx"> if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -283,26 +401,26 @@
</span><span class="cx"> label: 'Image caption'
</span><span class="cx"> };
</span><span class="cx">
</span><del>- e.data.splice( e.data.length - 1, 0, captionField );
</del><ins>+ event.data.splice( event.data.length - 1, 0, captionField );
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> // Fix caption parent width for images added from URL
</span><del>- editor.on( 'wpNewImageRefresh', function( e ) {
</del><ins>+ editor.on( 'wpNewImageRefresh', function( event ) {
</ins><span class="cx"> var parent, captionWidth;
</span><span class="cx">
</span><del>- if ( parent = dom.getParent( e.node, 'dl.wp-caption' ) ) {
</del><ins>+ if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
</ins><span class="cx"> if ( ! parent.style.width ) {
</span><del>- captionWidth = parseInt( e.node.clientWidth, 10 ) + 10;
</del><ins>+ captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
</ins><span class="cx"> captionWidth = captionWidth ? captionWidth + 'px' : '50%';
</span><span class="cx"> dom.setStyle( parent, 'width', captionWidth );
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- editor.on( 'wpImageFormSubmit', function( e ) {
- var data = e.imgData.data,
- imgNode = e.imgData.node,
- caption = e.imgData.caption,
</del><ins>+ editor.on( 'wpImageFormSubmit', function( event ) {
+ var data = event.imgData.data,
+ imgNode = event.imgData.node,
+ caption = event.imgData.caption,
</ins><span class="cx"> captionId = '',
</span><span class="cx"> captionAlign = '',
</span><span class="cx"> captionWidth = '',
</span><span class="lines">@@ -311,7 +429,7 @@
</span><span class="cx"> // Temp image id so we can find the node later
</span><span class="cx"> data.id = '__wp-temp-img-id';
</span><span class="cx"> // Cancel the original callback
</span><del>- e.imgData.cancel = true;
</del><ins>+ event.imgData.cancel = true;
</ins><span class="cx">
</span><span class="cx"> if ( ! data.style ) {
</span><span class="cx"> data.style = null;
</span><span class="lines">@@ -365,7 +483,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( parent && parent.nodeName === 'P' ) {
</span><del>- wrap = dom.create( 'div', { 'class': 'mceTemp', 'draggable': 'true' }, html );
</del><ins>+ wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
</ins><span class="cx"> dom.insertAfter( wrap, parent );
</span><span class="cx"> editor.selection.select( wrap );
</span><span class="cx"> editor.nodeChanged();
</span><span class="lines">@@ -374,7 +492,7 @@
</span><span class="cx"> dom.remove( parent );
</span><span class="cx"> }
</span><span class="cx"> } else {
</span><del>- editor.selection.setContent( '<div class="mceTemp" draggable="true">' + html + '</div>' );
</del><ins>+ editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
</ins><span class="cx"> }
</span><span class="cx"> } else {
</span><span class="cx"> editor.selection.setContent( html );
</span><span class="lines">@@ -431,7 +549,7 @@
</span><span class="cx"> '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
</span><span class="cx">
</span><span class="cx"> if ( parent = dom.getParent( imgNode, 'p' ) ) {
</span><del>- wrap = dom.create( 'div', { 'class': 'mceTemp', 'draggable': 'true' }, html );
</del><ins>+ wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
</ins><span class="cx"> dom.insertAfter( wrap, parent );
</span><span class="cx"> editor.selection.select( wrap );
</span><span class="cx"> editor.nodeChanged();
</span><span class="lines">@@ -443,7 +561,7 @@
</span><span class="cx"> dom.remove( parent );
</span><span class="cx"> }
</span><span class="cx"> } else {
</span><del>- editor.selection.setContent( '<div class="mceTemp" draggable="true">' + html + '</div>' );
</del><ins>+ editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> } else {
</span><span class="lines">@@ -466,13 +584,13 @@
</span><span class="cx">
</span><span class="cx"> imgNode = dom.get('__wp-temp-img-id');
</span><span class="cx"> dom.setAttrib( imgNode, 'id', imgId );
</span><del>- e.imgData.node = imgNode;
</del><ins>+ event.imgData.node = imgNode;
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- editor.on( 'wpLoadImageData', function( e ) {
</del><ins>+ editor.on( 'wpLoadImageData', function( event ) {
</ins><span class="cx"> var parent,
</span><del>- data = e.imgData.data,
- imgNode = e.imgData.node;
</del><ins>+ data = event.imgData.data,
+ imgNode = event.imgData.node;
</ins><span class="cx">
</span><span class="cx"> if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
</span><span class="cx"> parent = dom.select( 'dd.wp-caption-dd', parent )[0];
</span><span class="lines">@@ -484,33 +602,64 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- // Prevent dragging images out of the caption elements
</del><span class="cx"> dom.bind( editor.getDoc(), 'dragstart', function( event ) {
</span><span class="cx"> var node = editor.selection.getNode();
</span><span class="cx">
</span><ins>+ // Prevent dragging images out of the caption elements
</ins><span class="cx"> if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> }
</span><ins>+
+ // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
+ removeToolbar();
+
</ins><span class="cx"> });
</span><ins>+
+ // Prevent IE11 from making dl.wp-caption resizable
+ if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
+ // The 'mscontrolselect' event is supported only in IE11+
+ dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
+ if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
+ // Hide the thick border with resize handles around dl.wp-caption
+ editor.getBody().focus(); // :(
+ } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
+ // Trigger the thick border with resize handles...
+ // This will make the caption text editable.
+ event.target.focus();
+ }
+ });
+
+ editor.on( 'click', function( event ) {
+ if ( event.target.nodeName === 'IMG' && dom.getAttrib( event.target, 'data-wp-imgselect' ) &&
+ dom.getParent( event.target, 'dl.wp-caption' ) ) {
+
+ editor.getBody().focus();
+ }
+ });
+ }
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> editor.on( 'ObjectResized', function( event ) {
</span><span class="cx"> var parent, width,
</span><span class="cx"> node = event.target;
</span><span class="cx">
</span><del>- if ( node.nodeName === 'IMG' && ( parent = editor.dom.getParent( node, '.wp-caption' ) ) ) {
- width = event.width || editor.dom.getAttrib( node, 'width' );
</del><ins>+ if ( node.nodeName === 'IMG' ) {
+ if ( parent = editor.dom.getParent( node, '.wp-caption' ) ) {
+ width = event.width || editor.dom.getAttrib( node, 'width' );
</ins><span class="cx">
</span><del>- if ( width ) {
- width = parseInt( width, 10 ) + 10;
- editor.dom.setStyle( parent, 'width', width + 'px' );
</del><ins>+ if ( width ) {
+ width = parseInt( width, 10 ) + 10;
+ editor.dom.setStyle( parent, 'width', width + 'px' );
+ }
</ins><span class="cx"> }
</span><ins>+ // refresh toolbar
+ addToolbar( node );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- editor.on( 'BeforeExecCommand', function( e ) {
</del><ins>+ editor.on( 'BeforeExecCommand', function( event ) {
</ins><span class="cx"> var node, p, DL, align,
</span><del>- cmd = e.command,
</del><ins>+ cmd = event.command,
</ins><span class="cx"> dom = editor.dom;
</span><span class="cx">
</span><span class="cx"> if ( cmd === 'mceInsertContent' ) {
</span><span class="lines">@@ -525,7 +674,7 @@
</span><span class="cx"> if ( tinymce.Env.ie > 8 ) {
</span><span class="cx"> setTimeout( function() {
</span><span class="cx"> editor.selection.setCursorLocation( p, 0 );
</span><del>- editor.selection.setContent( e.value );
</del><ins>+ editor.selection.setContent( event.value );
</ins><span class="cx"> }, 500 );
</span><span class="cx">
</span><span class="cx"> return false;
</span><span class="lines">@@ -536,6 +685,8 @@
</span><span class="cx"> align = cmd.substr(7).toLowerCase();
</span><span class="cx"> align = 'align' + align;
</span><span class="cx">
</span><ins>+ removeToolbar();
+
</ins><span class="cx"> if ( dom.is( node, 'dl.wp-caption' ) ) {
</span><span class="cx"> DL = node;
</span><span class="cx"> } else {
</span><span class="lines">@@ -566,17 +717,18 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- editor.on( 'keydown', function( e ) {
</del><ins>+ editor.on( 'keydown', function( event ) {
</ins><span class="cx"> var node, wrap, P, spacer,
</span><span class="cx"> selection = editor.selection,
</span><span class="cx"> dom = editor.dom;
</span><span class="cx">
</span><del>- if ( e.keyCode === tinymce.util.VK.ENTER ) {
</del><ins>+ if ( event.keyCode === tinymce.util.VK.ENTER ) {
</ins><span class="cx"> // When pressing Enter inside a caption move the caret to a new parapraph under it
</span><del>- wrap = dom.getParent( editor.selection.getNode(), 'div.mceTemp' );
</del><ins>+ node = selection.getNode();
+ wrap = dom.getParent( node, 'div.mceTemp' );
</ins><span class="cx">
</span><span class="cx"> if ( wrap ) {
</span><del>- dom.events.cancel(e); // Doesn't cancel all :(
</del><ins>+ dom.events.cancel( event ); // Doesn't cancel all :(
</ins><span class="cx">
</span><span class="cx"> // Remove any extra dt and dd cleated on pressing Enter...
</span><span class="cx"> tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
</span><span class="lines">@@ -585,13 +737,19 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- spacer = tinymce.Env.ie ? '' : '<br data-mce-bogus="1" />';
</del><ins>+ spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
</ins><span class="cx"> P = dom.create( 'p', null, spacer );
</span><del>- dom.insertAfter( P, wrap );
</del><ins>+
+ if ( node.nodeName === 'DD' ) {
+ dom.insertAfter( P, wrap );
+ } else {
+ wrap.parentNode.insertBefore( P, wrap );
+ }
+
+ editor.nodeChanged();
</ins><span class="cx"> selection.setCursorLocation( P, 0 );
</span><del>- editor.nodeChanged();
</del><span class="cx"> }
</span><del>- } else if ( e.keyCode === tinymce.util.VK.DELETE || e.keyCode === tinymce.util.VK.BACKSPACE ) {
</del><ins>+ } else if ( event.keyCode === tinymce.util.VK.DELETE || event.keyCode === tinymce.util.VK.BACKSPACE ) {
</ins><span class="cx"> node = selection.getNode();
</span><span class="cx">
</span><span class="cx"> if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
</span><span class="lines">@@ -601,57 +759,58 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( wrap ) {
</span><del>- dom.events.cancel(e);
-
- if ( wrap.nextSibling ) {
- selection.select( wrap.nextSibling );
- } else if ( wrap.previousSibling ) {
- selection.select( wrap.previousSibling );
- } else {
- selection.select( wrap.parentNode );
- }
-
- selection.collapse( true );
- editor.nodeChanged();
- dom.remove( wrap );
- wrap = null;
</del><ins>+ dom.events.cancel( event );
+ removeImage( node );
</ins><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- editor.on( 'mousedown', function( e ) {
- var imageNode, frame, callback;
- if ( e.target.nodeName === 'IMG' && editor.selection.getNode() === e.target ) {
- // Don't trigger on right-click
- if ( e.button !== 2 ) {
</del><ins>+ editor.on( 'mousedown', function( event ) {
+ var node = event.target;
</ins><span class="cx">
</span><del>- // Don't attempt to edit placeholders
- if ( editor.dom.hasClass( e.target, 'mceItem' ) || '1' === editor.dom.getAttrib( e.target, 'data-mce-placeholder' ) ) {
- return;
- }
</del><ins>+ if ( tinymce.Env.ie && editor.dom.getParent( node, '#wp-image-toolbar' ) ) {
+ // Stop IE > 8 from making the wrapper resizable on mousedown
+ event.preventDefault();
+ }
</ins><span class="cx">
</span><del>- imageNode = e.target;
</del><ins>+ if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
+ addToolbar( node );
+ }
+ });
</ins><span class="cx">
</span><del>- frame = wp.media({
- frame: 'image',
- state: 'image-details',
- metadata: extractImageData( imageNode )
- } );
</del><ins>+ editor.on( 'mouseup', function( event ) {
+ var image,
+ node = event.target,
+ dom = editor.dom;
</ins><span class="cx">
</span><del>- callback = function( imageData ) {
- updateImage( imageNode, imageData );
- editor.focus();
- };
</del><ins>+ // Don't trigger on right-click
+ if ( event.button && event.button > 1 ) {
+ return;
+ }
</ins><span class="cx">
</span><del>- frame.state('image-details').on( 'update', callback );
- frame.state('replace-image').on( 'replace', callback );
</del><ins>+ if ( node.nodeName === 'DIV' && dom.getParent( node, '#wp-image-toolbar' ) ) {
+ image = dom.select( 'img[data-wp-imgselect]' )[0];
</ins><span class="cx">
</span><del>- frame.open();
</del><ins>+ if ( image ) {
+ editor.selection.select( image );
+
+ if ( dom.hasClass( node, 'remove' ) ) {
+ removeImage( image );
+ removeToolbar();
+ } else if ( dom.hasClass( node, 'edit' ) ) {
+ editImage( image );
+ }
</ins><span class="cx"> }
</span><ins>+ } else if ( node.nodeName !== 'IMG' ) {
+ removeToolbar();
</ins><span class="cx"> }
</span><del>- } );
</del><ins>+ });
</ins><span class="cx">
</span><ins>+ editor.on( 'cut', function() {
+ removeToolbar();
+ });
+
</ins><span class="cx"> editor.wpSetImgCaption = function( content ) {
</span><span class="cx"> return parseShortcode( content );
</span><span class="cx"> };
</span><span class="lines">@@ -660,13 +819,14 @@
</span><span class="cx"> return getShortcode( content );
</span><span class="cx"> };
</span><span class="cx">
</span><del>- editor.on( 'BeforeSetContent', function( e ) {
- e.content = editor.wpSetImgCaption( e.content );
</del><ins>+ editor.on( 'BeforeSetContent', function( event ) {
+ event.content = editor.wpSetImgCaption( event.content );
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- editor.on( 'PostProcess', function( e ) {
- if ( e.get ) {
- e.content = editor.wpGetImgCaption( e.content );
</del><ins>+ editor.on( 'PostProcess', function( event ) {
+ if ( event.get ) {
+ event.content = editor.wpGetImgCaption( event.content );
+ event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymceskinswordpresswpcontentcss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css (27158 => 27159)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css 2014-02-10 22:59:40 UTC (rev 27158)
+++ trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css 2014-02-10 23:47:34 UTC (rev 27159)
</span><span class="lines">@@ -117,6 +117,46 @@
</span><span class="cx"> cursor: pointer;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#wp-image-toolbar {
+ position: absolute;
+}
+
+#wp-image-toolbar .wrapper {
+ position: relative;
+ height: 33px;
+ background-color: rgba(0,0,0,0.3);
+}
+
+#wp-image-toolbar .dashicons {
+ position: absolute;
+ color: white;
+ width: 36px;
+ height: 32px;
+ line-height: 32px;
+ cursor: pointer;
+}
+
+#wp-image-toolbar div.dashicons-no-alt {
+ top: 0;
+ right: 0;
+}
+
+#wp-image-toolbar div.dashicons-format-image {
+ top: 0;
+ left: 0;
+}
+
+/* Image resize handles */
+.mce-content-body div.mce-resizehandle {
+ border-color: #777;
+ width: 7px;
+ height: 7px;
+}
+
+.mce-content-body img[data-mce-selected] {
+ outline: 1px solid #777;
+}
+
</ins><span class="cx"> .mce-content-body img.wp-gallery:hover {
</span><span class="cx"> background-color: #ededed;
</span><span class="cx"> border-style: solid;
</span></span></pre>
</div>
</div>
</body>
</html>