TinyMCE: Allow pasting in image captions. Remove blocks and insert <br> tags instead, also remove elements that would break the caption like other images, video, audio, etc.

See #36211.
Built from https://develop.svn.wordpress.org/trunk@38756


git-svn-id: http://core.svn.wordpress.org/trunk@38699 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2016-10-07 21:41:29 +00:00
parent c0f1a49575
commit 470c5a1f2a
4 changed files with 53 additions and 9 deletions

View File

@ -1,6 +1,6 @@
/* global tinymce */ /* global tinymce */
tinymce.PluginManager.add( 'wpeditimage', function( editor ) { tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
var toolbar, serializer, touchOnImage, var toolbar, serializer, touchOnImage, pasteInCaption,
each = tinymce.each, each = tinymce.each,
trim = tinymce.trim, trim = tinymce.trim,
iOS = tinymce.Env.iOS; iOS = tinymce.Env.iOS;
@ -857,19 +857,63 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
} }
}); });
} }
}); });
editor.on( 'pastePostProcess', function( event ) {
// Pasting in a caption node.
if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) {
// Remove "non-block" elements that should not be in captions.
editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove();
editor.$( '*', event.node ).each( function( i, node ) {
if ( editor.dom.isBlock( node ) ) {
// Insert <br> where the blocks used to be. Makes it look better after pasting in the caption.
if ( tinymce.trim( node.textContent || node.innerText ) ) {
editor.dom.insertAfter( editor.dom.create( 'br' ), node );
editor.dom.remove( node, true );
} else {
editor.dom.remove( node );
}
}
});
// Trim <br> tags.
editor.$( 'br', event.node ).each( function( i, node ) {
if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' ||
! node.previousSibling || node.previousSibling.nodeName === 'BR' ) {
editor.dom.remove( node );
}
} );
// Pasted HTML is cleaned up for inserting in the caption.
pasteInCaption = true;
}
});
editor.on( 'BeforeExecCommand', function( event ) { editor.on( 'BeforeExecCommand', function( event ) {
var node, p, DL, align, replacement, var node, p, DL, align, replacement, captionParent,
cmd = event.command, cmd = event.command,
dom = editor.dom; dom = editor.dom;
if ( cmd === 'mceInsertContent' ) { if ( cmd === 'mceInsertContent' ) {
// When inserting content, if the caret is inside a caption create new paragraph under node = editor.selection.getNode();
// and move the caret there captionParent = dom.getParent( node, 'div.mceTemp' );
if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
if ( captionParent ) {
if ( pasteInCaption ) {
pasteInCaption = false;
// We are in the caption element, and in 'paste' context,
// and the pasted HTML was cleaned up on 'pastePostProcess' above.
// Let it be pasted in the caption.
return;
}
// The paste is somewhere else in the caption DL element.
// Prevent pasting in there as it will break the caption.
// Make new paragraph under the caption DL and move the caret there.
p = dom.create( 'p' ); p = dom.create( 'p' );
dom.insertAfter( p, node ); dom.insertAfter( p, captionParent );
editor.selection.setCursorLocation( p, 0 ); editor.selection.setCursorLocation( p, 0 );
editor.nodeChanged(); editor.nodeChanged();
} }

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.7-alpha-38755'; $wp_version = '4.7-alpha-38756';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.