Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-23 01:27:36 +01:00
Code Issues Projects Releases Wiki Activity

Edit image in TinyMCE:

Browse Source 
- 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 #24409.
Built from https://develop.svn.wordpress.org/trunk@27159


git-svn-id: http://core.svn.wordpress.org/trunk@27025 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-02-10 23:48:12 +00:00
parent 5f0981788d
commit c908c8f708
5 changed files with 311 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
wp-includes/class-wp-editor.php
View File

@ -207,7 +207,7 @@ final class _WP_Editors {
$ext_plugins = '';
if ( $set['teeny'] ) {
self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array( 'fullscreen', 'link', 'image', 'wordpress', 'wplink' ), $editor_id );
self::$plugins = $plugins = apply_filters( 'teeny_mce_plugins', array( 'fullscreen', 'link', 'image', 'wordpress', 'wpeditimage', 'wplink' ), $editor_id );
} else {
/**
* TinyMCE external plugins filter
@ -335,8 +335,12 @@ final class _WP_Editors {
self::$first_init['external_plugins'] = json_encode( $mce_external_plugins );
}
// WordPress default stylesheet
$mce_css = array( self::$baseurl . '/skins/wordpress/wp-content.css' );
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
$version = 'ver=' . $GLOBALS['wp_version'];
$dashicons = includes_url( "css/dashicons$suffix.css?$version" );
// WordPress default stylesheet and dashicons
$mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
// load editor_style.css if the current theme supports it
if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

366
wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
View File

@ -42,7 +42,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
width = parseInt( w, 10 ) + 10;
return '<div class="mceTemp" draggable="true"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
'<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
});
}
@ -102,7 +102,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
function extractImageData( imageNode ) {
var classes, metadata, captionBlock, caption;
var classes, metadata, captionBlock, caption,
dom = editor.dom;
// default attributes
metadata = {
@ -118,12 +119,13 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
linkUrl: ''
};
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 );
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 );
//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
//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
// maybe use getAttribs()
// extract meta data from classes (candidate for turning into a method)
@ -144,7 +146,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
} );
// extract caption
captionBlock = editor.dom.getParents( imageNode, '.wp-caption' );
captionBlock = dom.getParents( imageNode, '.wp-caption' );
if ( captionBlock.length ) {
captionBlock = captionBlock[0];
@ -155,26 +157,26 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
metadata.align = name.replace( 'align', '' );
}
} );
caption = editor.dom.select( 'dd.wp-caption-dd', captionBlock );
caption = dom.select( 'dd.wp-caption-dd', captionBlock );
if ( caption.length ) {
caption = caption[0];
// need to do some more thinking about this
metadata.caption = editor.serializer.serialize( caption )
.replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
}
}
// extract linkTo
if ( imageNode.parentNode.nodeName === 'A' ) {
metadata.linkUrl = editor.dom.getAttrib( imageNode.parentNode, 'href' );
if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
}
return metadata;
}
function updateImage( imageNode, imageData ) {
var className, width, node, html, captionNode, nodeToReplace, uid;
var className, width, node, html, captionNode, nodeToReplace, uid, editedImg;
if ( imageData.caption ) {
@ -185,11 +187,11 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
//TODO: shouldn't add the id attribute if it isn't an attachment
// should create a new function for genrating the caption markup
// should create a new function for generating the caption markup
html = '<dl id="'+ imageData.attachment_id +'" class="wp-caption '+ className +'" style="width: '+ width +'px">' +
'<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
node = editor.dom.create( 'div', { 'class': 'mceTemp', draggable: 'true' }, html );
node = editor.dom.create( 'div', { 'class': 'mceTemp' }, html );
} else {
node = createImageAndLink( imageData, 'node' );
}
@ -215,12 +217,15 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
if ( node.nodeName === 'IMG' ) {
editor.selection.select( node );
} else {
editor.selection.select( editor.dom.select( 'img', node )[0] );
}
editor.nodeChanged();
editedImg = node.nodeName === 'IMG' ? node : editor.dom.select( 'img', node )[0];
if ( editedImg ) {
editor.selection.select( editedImg );
// refresh toolbar
addToolbar( editedImg );
}
}
function createImageAndLink( imageData, mode ) {
@ -264,11 +269,124 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
}
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;
}
editor.on( 'init', function() {
var dom = editor.dom;
// Add caption field to the default image dialog
editor.on( 'wpLoadImageForm', function( e ) {
editor.on( 'wpLoadImageForm', function( event ) {
if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
return;
}
@ -283,26 +401,26 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
label: 'Image caption'
};
e.data.splice( e.data.length - 1, 0, captionField );
event.data.splice( event.data.length - 1, 0, captionField );
});
// Fix caption parent width for images added from URL
editor.on( 'wpNewImageRefresh', function( e ) {
editor.on( 'wpNewImageRefresh', function( event ) {
var parent, captionWidth;
if ( parent = dom.getParent( e.node, 'dl.wp-caption' ) ) {
if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
if ( ! parent.style.width ) {
captionWidth = parseInt( e.node.clientWidth, 10 ) + 10;
captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
captionWidth = captionWidth ? captionWidth + 'px' : '50%';
dom.setStyle( parent, 'width', captionWidth );
}
}
});
editor.on( 'wpImageFormSubmit', function( e ) {
var data = e.imgData.data,
imgNode = e.imgData.node,
caption = e.imgData.caption,
editor.on( 'wpImageFormSubmit', function( event ) {
var data = event.imgData.data,
imgNode = event.imgData.node,
caption = event.imgData.caption,
captionId = '',
captionAlign = '',
captionWidth = '',
@ -311,7 +429,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
// Temp image id so we can find the node later
data.id = '__wp-temp-img-id';
// Cancel the original callback
e.imgData.cancel = true;
event.imgData.cancel = true;
if ( ! data.style ) {
data.style = null;
@ -365,7 +483,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
if ( parent && parent.nodeName === 'P' ) {
wrap = dom.create( 'div', { 'class': 'mceTemp', 'draggable': 'true' }, html );
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
dom.insertAfter( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
@ -374,7 +492,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
dom.remove( parent );
}
} else {
editor.selection.setContent( '<div class="mceTemp" draggable="true">' + html + '</div>' );
editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
}
} else {
editor.selection.setContent( html );
@ -431,7 +549,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
'<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
if ( parent = dom.getParent( imgNode, 'p' ) ) {
wrap = dom.create( 'div', { 'class': 'mceTemp', 'draggable': 'true' }, html );
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
dom.insertAfter( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
@ -443,7 +561,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
dom.remove( parent );
}
} else {
editor.selection.setContent( '<div class="mceTemp" draggable="true">' + html + '</div>' );
editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
}
}
} else {
@ -466,13 +584,13 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
imgNode = dom.get('__wp-temp-img-id');
dom.setAttrib( imgNode, 'id', imgId );
e.imgData.node = imgNode;
event.imgData.node = imgNode;
});
editor.on( 'wpLoadImageData', function( e ) {
editor.on( 'wpLoadImageData', function( event ) {
var parent,
data = e.imgData.data,
imgNode = e.imgData.node;
data = event.imgData.data,
imgNode = event.imgData.node;
if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
parent = dom.select( 'dd.wp-caption-dd', parent )[0];
@ -484,33 +602,64 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
});
// Prevent dragging images out of the caption elements
dom.bind( editor.getDoc(), 'dragstart', function( event ) {
var node = editor.selection.getNode();
// Prevent dragging images out of the caption elements
if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
event.preventDefault();
}
// Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
removeToolbar();
});
// 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();
}
});
}
});
editor.on( 'ObjectResized', function( event ) {
var parent, width,
node = event.target;
if ( node.nodeName === 'IMG' && ( parent = editor.dom.getParent( node, '.wp-caption' ) ) ) {
width = event.width || editor.dom.getAttrib( node, 'width' );
if ( node.nodeName === 'IMG' ) {
if ( parent = editor.dom.getParent( node, '.wp-caption' ) ) {
width = event.width || editor.dom.getAttrib( node, 'width' );
if ( width ) {
width = parseInt( width, 10 ) + 10;
editor.dom.setStyle( parent, 'width', width + 'px' );
if ( width ) {
width = parseInt( width, 10 ) + 10;
editor.dom.setStyle( parent, 'width', width + 'px' );
}
}
// refresh toolbar
addToolbar( node );
}
});
editor.on( 'BeforeExecCommand', function( e ) {
editor.on( 'BeforeExecCommand', function( event ) {
var node, p, DL, align,
cmd = e.command,
cmd = event.command,
dom = editor.dom;
if ( cmd === 'mceInsertContent' ) {
@ -525,7 +674,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
if ( tinymce.Env.ie > 8 ) {
setTimeout( function() {
editor.selection.setCursorLocation( p, 0 );
editor.selection.setContent( e.value );
editor.selection.setContent( event.value );
}, 500 );
return false;
@ -536,6 +685,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
align = cmd.substr(7).toLowerCase();
align = 'align' + align;
removeToolbar();
if ( dom.is( node, 'dl.wp-caption' ) ) {
DL = node;
} else {
@ -566,17 +717,18 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
});
editor.on( 'keydown', function( e ) {
editor.on( 'keydown', function( event ) {
var node, wrap, P, spacer,
selection = editor.selection,
dom = editor.dom;
if ( e.keyCode === tinymce.util.VK.ENTER ) {
if ( event.keyCode === tinymce.util.VK.ENTER ) {
// When pressing Enter inside a caption move the caret to a new parapraph under it
wrap = dom.getParent( editor.selection.getNode(), 'div.mceTemp' );
node = selection.getNode();
wrap = dom.getParent( node, 'div.mceTemp' );
if ( wrap ) {
dom.events.cancel(e); // Doesn't cancel all :(
dom.events.cancel( event ); // Doesn't cancel all :(
// Remove any extra dt and dd cleated on pressing Enter...
tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
@ -585,13 +737,19 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
});
spacer = tinymce.Env.ie ? '' : '<br data-mce-bogus="1" />';
spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
P = dom.create( 'p', null, spacer );
dom.insertAfter( P, wrap );
selection.setCursorLocation( P, 0 );
if ( node.nodeName === 'DD' ) {
dom.insertAfter( P, wrap );
} else {
wrap.parentNode.insertBefore( P, wrap );
}
editor.nodeChanged();
selection.setCursorLocation( P, 0 );
}
} else if ( e.keyCode === tinymce.util.VK.DELETE || e.keyCode === tinymce.util.VK.BACKSPACE ) {
} else if ( event.keyCode === tinymce.util.VK.DELETE || event.keyCode === tinymce.util.VK.BACKSPACE ) {
node = selection.getNode();
if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
@ -601,56 +759,57 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
if ( wrap ) {
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;
dom.events.cancel( event );
removeImage( node );
return false;
}
}
});
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 ) {
editor.on( 'mousedown', function( event ) {
var node = event.target;
// Don't attempt to edit placeholders
if ( editor.dom.hasClass( e.target, 'mceItem' ) || '1' === editor.dom.getAttrib( e.target, 'data-mce-placeholder' ) ) {
return;
}
imageNode = e.target;
frame = wp.media({
frame: 'image',
state: 'image-details',
metadata: extractImageData( imageNode )
} );
callback = function( imageData ) {
updateImage( imageNode, imageData );
editor.focus();
};
frame.state('image-details').on( 'update', callback );
frame.state('replace-image').on( 'replace', callback );
frame.open();
}
if ( tinymce.Env.ie && editor.dom.getParent( node, '#wp-image-toolbar' ) ) {
// Stop IE > 8 from making the wrapper resizable on mousedown
event.preventDefault();
}
} );
if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
addToolbar( node );
}
});
editor.on( 'mouseup', function( event ) {
var image,
node = event.target,
dom = editor.dom;
// Don't trigger on right-click
if ( event.button && event.button > 1 ) {
return;
}
if ( node.nodeName === 'DIV' && dom.getParent( node, '#wp-image-toolbar' ) ) {
image = dom.select( 'img[data-wp-imgselect]' )[0];
if ( image ) {
editor.selection.select( image );
if ( dom.hasClass( node, 'remove' ) ) {
removeImage( image );
removeToolbar();
} else if ( dom.hasClass( node, 'edit' ) ) {
editImage( image );
}
}
} else if ( node.nodeName !== 'IMG' ) {
removeToolbar();
}
});
editor.on( 'cut', function() {
removeToolbar();
});
editor.wpSetImgCaption = function( content ) {
return parseShortcode( content );
@ -660,13 +819,14 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
return getShortcode( content );
};
editor.on( 'BeforeSetContent', function( e ) {
e.content = editor.wpSetImgCaption( e.content );
editor.on( 'BeforeSetContent', function( event ) {
event.content = editor.wpSetImgCaption( event.content );
});
editor.on( 'PostProcess', function( e ) {
if ( e.get ) {
e.content = editor.wpGetImgCaption( e.content );
editor.on( 'PostProcess', function( event ) {
if ( event.get ) {
event.content = editor.wpGetImgCaption( event.content );
event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
}
});

2
wp-includes/js/tinymce/plugins/wpeditimage/plugin.min.js vendored
View File

File diff suppressed because one or more lines are too long

40
wp-includes/js/tinymce/skins/wordpress/wp-content.css
View File

@ -117,6 +117,46 @@ img::selection {
cursor: pointer;
}
#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;
}
.mce-content-body img.wp-gallery:hover {
background-color: #ededed;
border-style: solid;

BIN
wp-includes/js/tinymce/wp-tinymce.js.gz
View File

Binary file not shown.