2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
3 var toolbar, serializer, touchOnImage, pasteInCaption,
8 function isPlaceholder( node ) {
9 return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) );
12 editor.addButton( 'wp_img_remove', {
14 icon: 'dashicon dashicons-no',
16 removeImage( editor.selection.getNode() );
20 editor.addButton( 'wp_img_edit', {
21 tooltip: 'Edit ', // trailing space is needed, used for context
22 icon: 'dashicon dashicons-edit',
24 editImage( editor.selection.getNode() );
29 alignleft: 'Align left',
30 aligncenter: 'Align center',
31 alignright: 'Align right',
32 alignnone: 'No alignment'
33 }, function( tooltip, name ) {
34 var direction = name.slice( 5 );
36 editor.addButton( 'wp_img_' + name, {
38 icon: 'dashicon dashicons-align-' + direction,
39 cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),
40 onPostRender: function() {
43 editor.on( 'NodeChange', function( event ) {
47 if ( event.element.nodeName !== 'IMG' ) {
51 node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element;
53 if ( 'alignnone' === name ) {
54 self.active( ! /\balign(left|center|right)\b/.test( node.className ) );
56 self.active( editor.dom.hasClass( node, name ) );
63 editor.once( 'preinit', function() {
64 if ( editor.wp && editor.wp._createToolbar ) {
65 toolbar = editor.wp._createToolbar( [
76 editor.on( 'wptoolbar', function( event ) {
77 if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) {
78 event.toolbar = toolbar;
82 function isNonEditable( node ) {
83 var parent = editor.$( node ).parents( '[contenteditable]' );
84 return parent && parent.attr( 'contenteditable' ) === 'false';
87 // Safari on iOS fails to select images in contentEditoble mode on touch.
90 editor.on( 'init', function() {
91 editor.on( 'touchstart', function( event ) {
92 if ( event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
97 editor.dom.bind( editor.getDoc(), 'touchmove', function() {
101 editor.on( 'touchend', function( event ) {
102 if ( touchOnImage && event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
103 var node = event.target;
105 touchOnImage = false;
107 window.setTimeout( function() {
108 editor.selection.select( node );
109 editor.nodeChanged();
111 } else if ( toolbar ) {
118 function parseShortcode( content ) {
119 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
120 var id, align, classes, caption, img, width;
122 id = b.match( /id=['"]([^'"]*)['"] ?/ );
124 b = b.replace( id[0], '' );
127 align = b.match( /align=['"]([^'"]*)['"] ?/ );
129 b = b.replace( align[0], '' );
132 classes = b.match( /class=['"]([^'"]*)['"] ?/ );
134 b = b.replace( classes[0], '' );
137 width = b.match( /width=['"]([0-9]*)['"] ?/ );
139 b = b.replace( width[0], '' );
143 img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
145 if ( img && img[2] ) {
146 caption = trim( img[2] );
147 img = trim( img[1] );
149 // old captions shortcode style
150 caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
154 id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g, '' ) : '';
155 align = ( align && align[1] ) ? align[1] : 'alignnone';
156 classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g, '' ) : '';
158 if ( ! width && img ) {
159 width = img.match( /width=['"]([0-9]*)['"]/ );
162 if ( width && width[1] ) {
166 if ( ! width || ! caption ) {
170 width = parseInt( width, 10 );
171 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
175 return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +
176 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';
180 function getShortcode( content ) {
181 return content.replace( /(?:<div [^>]+mceTemp[^>]+>)?\s*(<dl [^>]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {
184 if ( dl.indexOf('<img ') === -1 || dl.indexOf('</p>') !== -1 ) {
185 // Broken caption. The user managed to drag the image out or type in the wrapper div?
186 // Remove the <dl>, <dd> and <dt> and return the remaining text.
187 return dl.replace( /<d[ldt]( [^>]+)?>/g, '' ).replace( /<\/d[ldt]>/g, '' );
190 out = dl.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {
191 var id, classes, align, width;
193 width = c.match( /width="([0-9]*)"/ );
194 width = ( width && width[1] ) ? width[1] : '';
196 classes = b.match( /class="([^"]*)"/ );
197 classes = ( classes && classes[1] ) ? classes[1] : '';
198 align = classes.match( /align[a-z]+/i ) || 'alignnone';
200 if ( ! width || ! caption ) {
201 if ( 'alignnone' !== align[0] ) {
202 c = c.replace( /><img/, ' class="' + align[0] + '"><img' );
207 id = b.match( /id="([^"]*)"/ );
208 id = ( id && id[1] ) ? id[1] : '';
210 classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
213 classes = ' class="' + classes + '"';
216 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
217 // no line breaks inside HTML tags
218 return a.replace( /[\r\n\t]+/, ' ' );
221 // convert remaining line breaks to <br>
222 caption = caption.replace( /\s*\n\s*/g, '<br />' );
224 return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
227 if ( out.indexOf('[caption') === -1 ) {
228 // the caption html seems broken, try to find the image that may be wrapped in a link
229 // and may be followed by <p> with the caption text.
230 out = dl.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
237 function extractImageData( imageNode ) {
238 var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
239 captionClassName = [],
241 isIntRegExp = /^\d+$/;
243 // default attributes
245 attachment_id: false,
253 linkTargetBlank: false,
258 metadata.url = dom.getAttrib( imageNode, 'src' );
259 metadata.alt = dom.getAttrib( imageNode, 'alt' );
260 metadata.title = dom.getAttrib( imageNode, 'title' );
262 width = dom.getAttrib( imageNode, 'width' );
263 height = dom.getAttrib( imageNode, 'height' );
265 if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
266 width = imageNode.naturalWidth || imageNode.width;
269 if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
270 height = imageNode.naturalHeight || imageNode.height;
273 metadata.customWidth = metadata.width = width;
274 metadata.customHeight = metadata.height = height;
276 classes = tinymce.explode( imageNode.className, ' ' );
279 tinymce.each( classes, function( name ) {
281 if ( /^wp-image/.test( name ) ) {
282 metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
283 } else if ( /^align/.test( name ) ) {
284 metadata.align = name.replace( 'align', '' );
285 } else if ( /^size/.test( name ) ) {
286 metadata.size = name.replace( 'size-', '' );
288 extraClasses.push( name );
293 metadata.extraClasses = extraClasses.join( ' ' );
296 captionBlock = dom.getParents( imageNode, '.wp-caption' );
298 if ( captionBlock.length ) {
299 captionBlock = captionBlock[0];
301 classes = captionBlock.className.split( ' ' );
302 tinymce.each( classes, function( name ) {
303 if ( /^align/.test( name ) ) {
304 metadata.align = name.replace( 'align', '' );
305 } else if ( name && name !== 'wp-caption' ) {
306 captionClassName.push( name );
310 metadata.captionClassName = captionClassName.join( ' ' );
312 caption = dom.select( 'dd.wp-caption-dd', captionBlock );
313 if ( caption.length ) {
314 caption = caption[0];
316 metadata.caption = editor.serializer.serialize( caption )
317 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
322 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
323 link = imageNode.parentNode;
324 metadata.linkUrl = dom.getAttrib( link, 'href' );
325 metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
326 metadata.linkRel = dom.getAttrib( link, 'rel' );
327 metadata.linkClassName = link.className;
333 function hasTextContent( node ) {
334 return node && !! ( node.textContent || node.innerText );
337 // Verify HTML in captions
338 function verifyHTML( caption ) {
339 if ( ! caption || ( caption.indexOf( '<' ) === -1 && caption.indexOf( '>' ) === -1 ) ) {
343 if ( ! serializer ) {
344 serializer = new tinymce.html.Serializer( {}, editor.schema );
347 return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
350 function updateImage( imageNode, imageData ) {
351 var classes, className, node, html, parent, wrap, linkNode,
352 captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
353 $imageNode, srcset, src,
356 classes = tinymce.explode( imageData.extraClasses, ' ' );
362 if ( ! imageData.caption ) {
363 classes.push( 'align' + imageData.align );
366 if ( imageData.attachment_id ) {
367 classes.push( 'wp-image-' + imageData.attachment_id );
368 if ( imageData.size && imageData.size !== 'custom' ) {
369 classes.push( 'size-' + imageData.size );
373 width = imageData.width;
374 height = imageData.height;
376 if ( imageData.size === 'custom' ) {
377 width = imageData.customWidth;
378 height = imageData.customHeight;
383 width: width || null,
384 height: height || null,
386 title: imageData.title || null,
387 'class': classes.join( ' ' ) || null
390 dom.setAttribs( imageNode, attrs );
393 href: imageData.linkUrl,
394 rel: imageData.linkRel || null,
395 target: imageData.linkTargetBlank ? '_blank': null,
396 'class': imageData.linkClassName || null
399 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
400 // Update or remove an existing link wrapped around the image
401 if ( imageData.linkUrl ) {
402 dom.setAttribs( imageNode.parentNode, linkAttrs );
404 dom.remove( imageNode.parentNode, true );
406 } else if ( imageData.linkUrl ) {
407 if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
408 // The image is inside a link together with other nodes,
409 // or is nested in another node, move it out
410 dom.insertAfter( imageNode, linkNode );
413 // Add link wrapped around the image
414 linkNode = dom.create( 'a', linkAttrs );
415 imageNode.parentNode.insertBefore( linkNode, imageNode );
416 linkNode.appendChild( imageNode );
419 captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
421 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
422 node = imageNode.parentNode;
427 if ( imageData.caption ) {
428 imageData.caption = verifyHTML( imageData.caption );
430 id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
431 align = 'align' + ( imageData.align || 'none' );
432 className = 'wp-caption ' + align;
434 if ( imageData.captionClassName ) {
435 className += ' ' + imageData.captionClassName.replace( /[<>&]+/g, '' );
438 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
439 width = parseInt( width, 10 );
444 dl = dom.select( 'dl.wp-caption', captionNode );
447 dom.setAttribs( dl, {
450 style: 'width: ' + width + 'px'
454 dd = dom.select( '.wp-caption-dd', captionNode );
457 dom.setHTML( dd[0], imageData.caption );
461 id = id ? 'id="'+ id +'" ' : '';
463 // should create a new function for generating the caption markup
464 html = '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
465 '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
467 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
469 if ( parent = dom.getParent( node, 'p' ) ) {
470 parent.parentNode.insertBefore( wrap, parent );
472 node.parentNode.insertBefore( wrap, node );
475 editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node );
477 if ( parent && dom.isEmpty( parent ) ) {
478 dom.remove( parent );
481 } else if ( captionNode ) {
482 // Remove the caption wrapper and place the image in new paragraph
483 parent = dom.create( 'p' );
484 captionNode.parentNode.insertBefore( parent, captionNode );
485 parent.appendChild( node );
486 dom.remove( captionNode );
489 $imageNode = editor.$( imageNode );
490 srcset = $imageNode.attr( 'srcset' );
491 src = $imageNode.attr( 'src' );
493 // Remove srcset and sizes if the image file was edited or the image was replaced.
494 if ( srcset && src ) {
495 src = src.replace( /[?#].*/, '' );
497 if ( srcset.indexOf( src ) === -1 ) {
498 $imageNode.attr( 'srcset', null ).attr( 'sizes', null );
502 if ( wp.media.events ) {
503 wp.media.events.trigger( 'editor:image-update', {
510 editor.nodeChanged();
513 function editImage( img ) {
514 var frame, callback, metadata;
516 if ( typeof wp === 'undefined' || ! wp.media ) {
517 editor.execCommand( 'mceImage' );
521 metadata = extractImageData( img );
523 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
524 wp.media.events.trigger( 'editor:image-edit', {
532 state: 'image-details',
536 wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
538 callback = function( imageData ) {
540 editor.undoManager.transact( function() {
541 updateImage( img, imageData );
546 frame.state('image-details').on( 'update', callback );
547 frame.state('replace-image').on( 'replace', callback );
548 frame.on( 'close', function() {
556 function removeImage( node ) {
557 var wrap = editor.dom.getParent( node, 'div.mceTemp' );
559 if ( ! wrap && node.nodeName === 'IMG' ) {
560 wrap = editor.dom.getParent( node, 'a' );
564 if ( wrap.nextSibling ) {
565 editor.selection.select( wrap.nextSibling );
566 } else if ( wrap.previousSibling ) {
567 editor.selection.select( wrap.previousSibling );
569 editor.selection.select( wrap.parentNode );
572 editor.selection.collapse( true );
573 editor.dom.remove( wrap );
575 editor.dom.remove( node );
578 editor.nodeChanged();
579 editor.undoManager.add();
582 editor.on( 'init', function() {
583 var dom = editor.dom,
584 captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
586 dom.addClass( editor.getBody(), captionClass );
588 // Add caption field to the default image dialog
589 editor.on( 'wpLoadImageForm', function( event ) {
590 if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
601 label: 'Image caption'
604 event.data.splice( event.data.length - 1, 0, captionField );
607 // Fix caption parent width for images added from URL
608 editor.on( 'wpNewImageRefresh', function( event ) {
609 var parent, captionWidth;
611 if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
612 if ( ! parent.style.width ) {
613 captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
614 captionWidth = captionWidth ? captionWidth + 'px' : '50%';
615 dom.setStyle( parent, 'width', captionWidth );
620 editor.on( 'wpImageFormSubmit', function( event ) {
621 var data = event.imgData.data,
622 imgNode = event.imgData.node,
623 caption = event.imgData.wpcaption,
628 wrap, parent, node, html;
630 // Temp image id so we can find the node later
631 data.id = '__wp-temp-img-id';
632 // Cancel the original callback
633 event.imgData.cancel = true;
635 if ( ! data.style ) {
640 // Delete the image and the caption
642 if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) {
644 } else if ( imgNode.parentNode.nodeName === 'A' ) {
645 dom.remove( imgNode.parentNode );
647 dom.remove( imgNode );
650 editor.nodeChanged();
656 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
657 // No line breaks inside HTML tags
658 return a.replace( /[\r\n\t]+/, ' ' );
661 // Convert remaining line breaks to <br>
662 caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' );
663 caption = verifyHTML( caption );
667 // New image inserted
668 html = dom.createHTML( 'img', data );
671 node = editor.selection.getNode();
674 captionWidth = parseInt( data.width, 10 );
676 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
680 captionWidth = ' style="width: ' + captionWidth + 'px"';
683 html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
684 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
686 if ( node.nodeName === 'P' ) {
689 parent = dom.getParent( node, 'p' );
692 if ( parent && parent.nodeName === 'P' ) {
693 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
694 parent.parentNode.insertBefore( wrap, parent );
695 editor.selection.select( wrap );
696 editor.nodeChanged();
698 if ( dom.isEmpty( parent ) ) {
699 dom.remove( parent );
702 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
705 editor.selection.setContent( html );
708 // Edit existing image
710 // Store the original image id if any
711 imgId = imgNode.id || null;
712 // Update the image node
713 dom.setAttribs( imgNode, data );
714 wrap = dom.getParent( imgNode, 'dl.wp-caption' );
718 if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) {
719 parent.innerHTML = caption;
722 if ( imgNode.className ) {
723 captionId = imgNode.className.match( /wp-image-([0-9]+)/ );
724 captionAlign = imgNode.className.match( /align(left|right|center|none)/ );
727 if ( captionAlign ) {
728 captionAlign = captionAlign[0];
729 imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' );
731 captionAlign = 'alignnone';
734 captionAlign = ' class="wp-caption ' + captionAlign + '"';
737 captionId = ' id="attachment_' + captionId[1] + '"';
740 captionWidth = data.width || imgNode.clientWidth;
742 if ( captionWidth ) {
743 captionWidth = parseInt( captionWidth, 10 );
745 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
749 captionWidth = ' style="width: '+ captionWidth +'px"';
752 if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) {
753 node = imgNode.parentNode;
758 html = '<dl ' + captionId + captionAlign + captionWidth + '>' +
759 '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
761 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
763 if ( parent = dom.getParent( node, 'p' ) ) {
764 parent.parentNode.insertBefore( wrap, parent );
766 node.parentNode.insertBefore( wrap, node );
769 editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node );
771 if ( parent && dom.isEmpty( parent ) ) {
772 dom.remove( parent );
777 // Remove the caption wrapper and place the image in new paragraph
778 if ( imgNode.parentNode.nodeName === 'A' ) {
779 html = dom.getOuterHTML( imgNode.parentNode );
781 html = dom.getOuterHTML( imgNode );
784 parent = dom.create( 'p', {}, html );
785 dom.insertAfter( parent, wrap.parentNode );
786 editor.selection.select( parent );
787 editor.nodeChanged();
788 dom.remove( wrap.parentNode );
793 imgNode = dom.get('__wp-temp-img-id');
794 dom.setAttrib( imgNode, 'id', imgId || null );
795 event.imgData.node = imgNode;
798 editor.on( 'wpLoadImageData', function( event ) {
800 data = event.imgData.data,
801 imgNode = event.imgData.node;
803 if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
804 parent = dom.select( 'dd.wp-caption-dd', parent )[0];
807 data.wpcaption = editor.serializer.serialize( parent )
808 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
813 // Prevent IE11 from making dl.wp-caption resizable
814 if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
815 // The 'mscontrolselect' event is supported only in IE11+
816 dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
817 if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
818 // Hide the thick border with resize handles around dl.wp-caption
819 editor.getBody().focus(); // :(
820 } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
821 // Trigger the thick border with resize handles...
822 // This will make the caption text editable.
823 event.target.focus();
829 editor.on( 'ObjectResized', function( event ) {
830 var node = event.target;
832 if ( node.nodeName === 'IMG' ) {
833 editor.undoManager.transact( function() {
837 node.className = node.className.replace( /\bsize-[^ ]+/, '' );
839 if ( parent = dom.getParent( node, '.wp-caption' ) ) {
840 width = event.width || dom.getAttrib( node, 'width' );
843 width = parseInt( width, 10 );
845 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
849 dom.setStyle( parent, 'width', width + 'px' );
856 editor.on( 'pastePostProcess', function( event ) {
857 // Pasting in a caption node.
858 if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) {
859 // Remove "non-block" elements that should not be in captions.
860 editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove();
862 editor.$( '*', event.node ).each( function( i, node ) {
863 if ( editor.dom.isBlock( node ) ) {
864 // Insert <br> where the blocks used to be. Makes it look better after pasting in the caption.
865 if ( tinymce.trim( node.textContent || node.innerText ) ) {
866 editor.dom.insertAfter( editor.dom.create( 'br' ), node );
867 editor.dom.remove( node, true );
869 editor.dom.remove( node );
875 editor.$( 'br', event.node ).each( function( i, node ) {
876 if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' ||
877 ! node.previousSibling || node.previousSibling.nodeName === 'BR' ) {
879 editor.dom.remove( node );
883 // Pasted HTML is cleaned up for inserting in the caption.
884 pasteInCaption = true;
888 editor.on( 'BeforeExecCommand', function( event ) {
889 var node, p, DL, align, replacement, captionParent,
893 if ( cmd === 'mceInsertContent' || cmd === 'Indent' || cmd === 'Outdent' ) {
894 node = editor.selection.getNode();
895 captionParent = dom.getParent( node, 'div.mceTemp' );
897 if ( captionParent ) {
898 if ( cmd === 'mceInsertContent' ) {
899 if ( pasteInCaption ) {
900 pasteInCaption = false;
901 // We are in the caption element, and in 'paste' context,
902 // and the pasted HTML was cleaned up on 'pastePostProcess' above.
903 // Let it be pasted in the caption.
907 // The paste is somewhere else in the caption DL element.
908 // Prevent pasting in there as it will break the caption.
909 // Make new paragraph under the caption DL and move the caret there.
910 p = dom.create( 'p' );
911 dom.insertAfter( p, captionParent );
912 editor.selection.setCursorLocation( p, 0 );
913 editor.nodeChanged();
915 // Clicking Indent or Outdent while an image with a caption is selected breaks the caption.
917 event.preventDefault();
918 event.stopImmediatePropagation();
922 } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
923 node = editor.selection.getNode();
924 align = 'align' + cmd.slice( 7 ).toLowerCase();
925 DL = editor.dom.getParent( node, '.wp-caption' );
927 if ( node.nodeName !== 'IMG' && ! DL ) {
933 if ( editor.dom.hasClass( node, align ) ) {
934 replacement = ' alignnone';
936 replacement = ' ' + align;
939 node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement );
941 editor.nodeChanged();
942 event.preventDefault();
945 toolbar.reposition();
948 editor.fire( 'ExecCommand', {
956 editor.on( 'keydown', function( event ) {
957 var node, wrap, P, spacer,
958 selection = editor.selection,
959 keyCode = event.keyCode,
961 VK = tinymce.util.VK;
963 if ( keyCode === VK.ENTER ) {
964 // When pressing Enter inside a caption move the caret to a new parapraph under it
965 node = selection.getNode();
966 wrap = dom.getParent( node, 'div.mceTemp' );
969 dom.events.cancel( event ); // Doesn't cancel all :(
971 // Remove any extra dt and dd cleated on pressing Enter...
972 tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
973 if ( dom.isEmpty( element ) ) {
974 dom.remove( element );
978 spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
979 P = dom.create( 'p', null, spacer );
981 if ( node.nodeName === 'DD' ) {
982 dom.insertAfter( P, wrap );
984 wrap.parentNode.insertBefore( P, wrap );
987 editor.nodeChanged();
988 selection.setCursorLocation( P, 0 );
990 } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
991 node = selection.getNode();
993 if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
995 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
996 wrap = dom.getParent( node, 'div.mceTemp' );
1000 dom.events.cancel( event );
1001 removeImage( node );
1007 // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
1008 // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
1009 // Collapse the selection to remove the resize handles.
1010 if ( tinymce.Env.gecko ) {
1011 editor.on( 'undo redo', function() {
1012 if ( editor.selection.getNode().nodeName === 'IMG' ) {
1013 editor.selection.collapse();
1018 editor.wpSetImgCaption = function( content ) {
1019 return parseShortcode( content );
1022 editor.wpGetImgCaption = function( content ) {
1023 return getShortcode( content );
1026 editor.on( 'beforeGetContent', function( event ) {
1027 if ( event.format !== 'raw' ) {
1028 editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null );
1032 editor.on( 'BeforeSetContent', function( event ) {
1033 if ( event.format !== 'raw' ) {
1034 event.content = editor.wpSetImgCaption( event.content );
1038 editor.on( 'PostProcess', function( event ) {
1040 event.content = editor.wpGetImgCaption( event.content );
1047 editor.on( 'dragstart', function() {
1048 var node = editor.selection.getNode();
1050 if ( node.nodeName === 'IMG' ) {
1051 wrap = editor.dom.getParent( node, '.mceTemp' );
1053 if ( ! wrap && node.parentNode.nodeName === 'A' && ! hasTextContent( node.parentNode ) ) {
1054 wrap = node.parentNode;
1059 editor.on( 'drop', function( event ) {
1060 var dom = editor.dom,
1061 rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint( event.clientX, event.clientY, editor.getDoc() );
1063 // Don't allow anything to be dropped in a captioned image.
1064 if ( rng && dom.getParent( rng.startContainer, '.mceTemp' ) ) {
1065 event.preventDefault();
1066 } else if ( wrap ) {
1067 event.preventDefault();
1069 editor.undoManager.transact( function() {
1071 editor.selection.setRng( rng );
1074 editor.selection.setNode( wrap );
1084 editor.wp = editor.wp || {};
1085 editor.wp.isPlaceholder = isPlaceholder;
1089 _do_shcode: parseShortcode,
1090 _get_shcode: getShortcode