WordPress.org

Make WordPress Core

Changeset 38756


Ignore:
Timestamp:
10/07/2016 09:41:00 PM (20 months ago)
Author:
azaozz
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r38328 r38756  
    11/* global tinymce */
    22tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
    3     var toolbar, serializer, touchOnImage,
     3    var toolbar, serializer, touchOnImage, pasteInCaption,
    44        each = tinymce.each,
    55        trim = tinymce.trim,
     
    858858            });
    859859        }
    860     });
     860    });
     861
     862    editor.on( 'pastePostProcess', function( event ) {
     863        // Pasting in a caption node.
     864        if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) {
     865            // Remove "non-block" elements that should not be in captions.
     866            editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove();
     867
     868            editor.$( '*', event.node ).each( function( i, node ) {
     869                if ( editor.dom.isBlock( node ) ) {
     870                    // Insert <br> where the blocks used to be. Makes it look better after pasting in the caption.
     871                    if ( tinymce.trim( node.textContent || node.innerText ) ) {
     872                        editor.dom.insertAfter( editor.dom.create( 'br' ), node );
     873                        editor.dom.remove( node, true );
     874                    } else {
     875                        editor.dom.remove( node );
     876                    }
     877                }
     878            });
     879
     880            // Trim <br> tags.
     881            editor.$( 'br',  event.node ).each( function( i, node ) {
     882                if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' ||
     883                    ! node.previousSibling || node.previousSibling.nodeName === 'BR' ) {
     884
     885                    editor.dom.remove( node );
     886                }
     887            } );
     888
     889            // Pasted HTML is cleaned up for inserting in the caption.
     890            pasteInCaption = true;
     891        }
     892    });
    861893
    862894    editor.on( 'BeforeExecCommand', function( event ) {
    863         var node, p, DL, align, replacement,
     895        var node, p, DL, align, replacement, captionParent,
    864896            cmd = event.command,
    865897            dom = editor.dom;
    866898
    867899        if ( cmd === 'mceInsertContent' ) {
    868             // When inserting content, if the caret is inside a caption create new paragraph under
    869             // and move the caret there
    870             if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
     900            node = editor.selection.getNode();
     901            captionParent = dom.getParent( node, 'div.mceTemp' );
     902
     903            if ( captionParent ) {
     904                if ( pasteInCaption ) {
     905                    pasteInCaption = false;
     906                    // We are in the caption element, and in 'paste' context,
     907                    // and the pasted HTML was cleaned up on 'pastePostProcess' above.
     908                    // Let it be pasted in the caption.
     909                    return;
     910                }
     911
     912                // The paste is somewhere else in the caption DL element.
     913                // Prevent pasting in there as it will break the caption.
     914                // Make new paragraph under the caption DL and move the caret there.
    871915                p = dom.create( 'p' );
    872                 dom.insertAfter( p, node );
     916                dom.insertAfter( p, captionParent );
    873917                editor.selection.setCursorLocation( p, 0 );
    874918                editor.nodeChanged();
Note: See TracChangeset for help on using the changeset viewer.