sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TinyMCE Classic Block: fix the Edit Image modal to work as in the Classic Editor.

Browse Source 
Fixes #46085.

git-svn-id: https://develop.svn.wordpress.org/trunk@44695 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2019-01-24 11:10:34 +00:00
parent ad0a1a2f82
commit 86d04a546f
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js vendored
View File

@ -347,12 +347,17 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) ); return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
} }
function updateImage( imageNode, imageData ) { function updateImage( $imageNode, imageData ) {
var classes, className, node, html, parent, wrap, linkNode, var classes, className, node, html, parent, wrap, linkNode, imageNode,
captionNode, dd, dl, id, attrs, linkAttrs, width, height, align, captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
$imageNode, srcset, src, $imageNode, srcset, src,
dom = editor.dom; dom = editor.dom;
if ( ! $imageNode || ! $imageNode.length ) {
return;
}
imageNode = $imageNode[0];
classes = tinymce.explode( imageData.extraClasses, ' ' ); classes = tinymce.explode( imageData.extraClasses, ' ' );
if ( ! classes ) { if ( ! classes ) {
@ -389,7 +394,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
dom.setAttribs( imageNode, attrs ); dom.setAttribs( imageNode, attrs );
// Preserve empty alt attributes. // Preserve empty alt attributes.
editor.$( imageNode ).attr( 'alt', imageData.alt || '' ); $imageNode.attr( 'alt', imageData.alt || '' );
linkAttrs = { linkAttrs = {
href: imageData.linkUrl, href: imageData.linkUrl,
@ -513,7 +518,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
} }
function editImage( img ) { function editImage( img ) {
var frame, callback, metadata; var frame, callback, metadata, imageNode;
if ( typeof wp === 'undefined' || ! wp.media ) { if ( typeof wp === 'undefined' || ! wp.media ) {
editor.execCommand( 'mceImage' ); editor.execCommand( 'mceImage' );
@ -522,6 +527,9 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
metadata = extractImageData( img ); metadata = extractImageData( img );
// Mark the image node so we can select it later.
editor.$( img ).attr( 'data-wp-editing', 1 );
// Manipulate the metadata by reference that is fed into the PostImage model used in the media modal // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
wp.media.events.trigger( 'editor:image-edit', { wp.media.events.trigger( 'editor:image-edit', {
editor: editor, editor: editor,
@ -538,9 +546,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
wp.media.events.trigger( 'editor:frame-create', { frame: frame } ); wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
callback = function( imageData ) { callback = function( imageData ) {
editor.focus();
editor.undoManager.transact( function() { editor.undoManager.transact( function() {
updateImage( img, imageData ); updateImage( imageNode, imageData );
} ); } );
frame.detach(); frame.detach();
}; };
@ -550,6 +557,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
frame.on( 'close', function() { frame.on( 'close', function() {
editor.focus(); editor.focus();
frame.detach(); frame.detach();
// `close` fires first...
// To be able to update the image node, we need to find it here,
// and use it in the callback.
imageNode = editor.$( 'img[data-wp-editing]' )
imageNode.removeAttr( 'data-wp-editing' );
}); });
frame.open(); frame.open();
@ -810,7 +823,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
editor.on( 'beforeGetContent', function( event ) { editor.on( 'beforeGetContent', function( event ) {
if ( event.format !== 'raw' ) { if ( event.format !== 'raw' ) {
editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null ); editor.$( 'img[id="__wp-temp-img-id"]' ).removeAttr( 'id' );
} }
}); });

4
src/wp-includes/css/editor.css
View File

@ -1211,6 +1211,10 @@ i.mce-i-wp_code:before {
content: "\f104"; content: "\f104";
} }
.mce-content-body dl.wp-caption {
max-width: 100%;
}
/* Quicktags */ /* Quicktags */
.quicktags-toolbar { .quicktags-toolbar {
padding: 3px; padding: 3px;