WordPress.org

Make WordPress Core

Changeset 38756


Ignore:
Timestamp:
10/07/16 21:41:00 (8 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.