2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
3 var toolbarActive = false,
6 function parseShortcode( content ) {
7 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
8 var id, align, classes, caption, img, width,
11 id = b.match( /id=['"]([^'"]*)['"] ?/ );
13 b = b.replace( id[0], '' );
16 align = b.match( /align=['"]([^'"]*)['"] ?/ );
18 b = b.replace( align[0], '' );
21 classes = b.match( /class=['"]([^'"]*)['"] ?/ );
23 b = b.replace( classes[0], '' );
26 width = b.match( /width=['"]([0-9]*)['"] ?/ );
28 b = b.replace( width[0], '' );
32 img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
34 if ( img && img[2] ) {
35 caption = trim( img[2] );
38 // old captions shortcode style
39 caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
43 id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g, '' ) : '';
44 align = ( align && align[1] ) ? align[1] : 'alignnone';
45 classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g, '' ) : '';
47 if ( ! width && img ) {
48 width = img.match( /width=['"]([0-9]*)['"]/ );
51 if ( width && width[1] ) {
55 if ( ! width || ! caption ) {
59 width = parseInt( width, 10 );
60 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
64 return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +
65 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';
69 function getShortcode( content ) {
70 return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) {
73 if ( b.indexOf('<img ') === -1 ) {
74 // Broken caption. The user managed to drag the image out?
75 // Try to return the caption text as a paragraph.
76 out = b.match( /<dd [^>]+>([\s\S]+?)<\/dd>/i );
78 if ( out && out[1] ) {
79 return '<p>' + out[1] + '</p>';
85 out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, caption ) {
86 var id, classes, align, width;
88 width = c.match( /width="([0-9]*)"/ );
89 width = ( width && width[1] ) ? width[1] : '';
91 if ( ! width || ! caption ) {
95 id = b.match( /id="([^"]*)"/ );
96 id = ( id && id[1] ) ? id[1] : '';
98 classes = b.match( /class="([^"]*)"/ );
99 classes = ( classes && classes[1] ) ? classes[1] : '';
101 align = classes.match( /align[a-z]+/i ) || 'alignnone';
102 classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
105 classes = ' class="' + classes + '"';
108 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
109 // no line breaks inside HTML tags
110 return a.replace( /[\r\n\t]+/, ' ' );
113 // convert remaining line breaks to <br>
114 caption = caption.replace( /\s*\n\s*/g, '<br />' );
116 return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
119 if ( out.indexOf('[caption') !== 0 ) {
120 // the caption html seems broken, try to find the image that may be wrapped in a link
121 // and may be followed by <p> with the caption text.
122 out = b.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
129 function extractImageData( imageNode ) {
130 var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
131 captionClassName = [],
133 isIntRegExp = /^\d+$/;
135 // default attributes
137 attachment_id: false,
145 linkTargetBlank: false,
150 metadata.url = dom.getAttrib( imageNode, 'src' );
151 metadata.alt = dom.getAttrib( imageNode, 'alt' );
152 metadata.title = dom.getAttrib( imageNode, 'title' );
154 width = dom.getAttrib( imageNode, 'width' );
155 height = dom.getAttrib( imageNode, 'height' );
157 if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
158 width = imageNode.naturalWidth || imageNode.width;
161 if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
162 height = imageNode.naturalHeight || imageNode.height;
165 metadata.customWidth = metadata.width = width;
166 metadata.customHeight = metadata.height = height;
168 classes = tinymce.explode( imageNode.className, ' ' );
171 tinymce.each( classes, function( name ) {
173 if ( /^wp-image/.test( name ) ) {
174 metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
175 } else if ( /^align/.test( name ) ) {
176 metadata.align = name.replace( 'align', '' );
177 } else if ( /^size/.test( name ) ) {
178 metadata.size = name.replace( 'size-', '' );
180 extraClasses.push( name );
185 metadata.extraClasses = extraClasses.join( ' ' );
188 captionBlock = dom.getParents( imageNode, '.wp-caption' );
190 if ( captionBlock.length ) {
191 captionBlock = captionBlock[0];
193 classes = captionBlock.className.split( ' ' );
194 tinymce.each( classes, function( name ) {
195 if ( /^align/.test( name ) ) {
196 metadata.align = name.replace( 'align', '' );
197 } else if ( name && name !== 'wp-caption' ) {
198 captionClassName.push( name );
202 metadata.captionClassName = captionClassName.join( ' ' );
204 caption = dom.select( 'dd.wp-caption-dd', captionBlock );
205 if ( caption.length ) {
206 caption = caption[0];
208 metadata.caption = editor.serializer.serialize( caption )
209 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
214 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
215 link = imageNode.parentNode;
216 metadata.linkUrl = dom.getAttrib( link, 'href' );
217 metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
218 metadata.linkRel = dom.getAttrib( link, 'rel' );
219 metadata.linkClassName = link.className;
225 function hasTextContent( node ) {
226 return node && !! ( node.textContent || node.innerText );
229 function updateImage( imageNode, imageData ) {
230 var classes, className, node, html, parent, wrap, linkNode,
231 captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
234 classes = tinymce.explode( imageData.extraClasses, ' ' );
240 if ( ! imageData.caption ) {
241 classes.push( 'align' + imageData.align );
244 if ( imageData.attachment_id ) {
245 classes.push( 'wp-image-' + imageData.attachment_id );
246 if ( imageData.size && imageData.size !== 'custom' ) {
247 classes.push( 'size-' + imageData.size );
251 width = imageData.width;
252 height = imageData.height;
254 if ( imageData.size === 'custom' ) {
255 width = imageData.customWidth;
256 height = imageData.customHeight;
261 width: width || null,
262 height: height || null,
264 title: imageData.title || null,
265 'class': classes.join( ' ' ) || null
268 dom.setAttribs( imageNode, attrs );
271 href: imageData.linkUrl,
272 rel: imageData.linkRel || null,
273 target: imageData.linkTargetBlank ? '_blank': null,
274 'class': imageData.linkClassName || null
277 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
278 // Update or remove an existing link wrapped around the image
279 if ( imageData.linkUrl ) {
280 dom.setAttribs( imageNode.parentNode, linkAttrs );
282 dom.remove( imageNode.parentNode, true );
284 } else if ( imageData.linkUrl ) {
285 if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
286 // The image is inside a link together with other nodes,
287 // or is nested in another node, move it out
288 dom.insertAfter( imageNode, linkNode );
291 // Add link wrapped around the image
292 linkNode = dom.create( 'a', linkAttrs );
293 imageNode.parentNode.insertBefore( linkNode, imageNode );
294 linkNode.appendChild( imageNode );
297 captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
299 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
300 node = imageNode.parentNode;
305 if ( imageData.caption ) {
307 id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
308 align = 'align' + ( imageData.align || 'none' );
309 className = 'wp-caption ' + align;
311 if ( imageData.captionClassName ) {
312 className += ' ' + imageData.captionClassName.replace( /[<>&]+/g, '' );
315 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
316 width = parseInt( width, 10 );
321 dl = dom.select( 'dl.wp-caption', captionNode );
324 dom.setAttribs( dl, {
327 style: 'width: ' + width + 'px'
331 dd = dom.select( '.wp-caption-dd', captionNode );
334 dom.setHTML( dd[0], imageData.caption );
338 id = id ? 'id="'+ id +'" ' : '';
340 // should create a new function for generating the caption markup
341 html = '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
342 '<dt class="wp-caption-dt">' + dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
344 if ( parent = dom.getParent( node, 'p' ) ) {
345 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
346 parent.parentNode.insertBefore( wrap, parent );
349 if ( dom.isEmpty( parent ) ) {
350 dom.remove( parent );
353 dom.setOuterHTML( node, '<div class="mceTemp">' + html + '</div>' );
356 } else if ( captionNode ) {
357 // Remove the caption wrapper and place the image in new paragraph
358 parent = dom.create( 'p' );
359 captionNode.parentNode.insertBefore( parent, captionNode );
360 parent.appendChild( node );
361 dom.remove( captionNode );
364 if ( wp.media.events ) {
365 wp.media.events.trigger( 'editor:image-update', {
372 editor.nodeChanged();
373 // Refresh the toolbar
374 addToolbar( imageNode );
377 function editImage( img ) {
378 var frame, callback, metadata;
380 if ( typeof wp === 'undefined' || ! wp.media ) {
381 editor.execCommand( 'mceImage' );
385 metadata = extractImageData( img );
387 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
388 wp.media.events.trigger( 'editor:image-edit', {
396 state: 'image-details',
400 wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
402 callback = function( imageData ) {
404 editor.undoManager.transact( function() {
405 updateImage( img, imageData );
410 frame.state('image-details').on( 'update', callback );
411 frame.state('replace-image').on( 'replace', callback );
412 frame.on( 'close', function() {
415 editingImage = false;
421 function removeImage( node ) {
424 if ( node.nodeName === 'DIV' && editor.dom.hasClass( node, 'mceTemp' ) ) {
426 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
427 wrap = editor.dom.getParent( node, 'div.mceTemp' );
431 if ( wrap.nextSibling ) {
432 editor.selection.select( wrap.nextSibling );
433 } else if ( wrap.previousSibling ) {
434 editor.selection.select( wrap.previousSibling );
436 editor.selection.select( wrap.parentNode );
439 editor.selection.collapse( true );
440 editor.dom.remove( wrap );
442 editor.dom.remove( node );
446 editor.nodeChanged();
447 editor.undoManager.add();
450 function addToolbar( node ) {
451 var rectangle, toolbarHtml, toolbar, left,
456 // Don't add to placeholders
457 if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) {
461 dom.setAttrib( node, 'data-wp-imgselect', 1 );
462 rectangle = dom.getRect( node );
464 toolbarHtml = '<i class="dashicons dashicons-edit edit" data-mce-bogus="all"></i>' +
465 '<i class="dashicons dashicons-no-alt remove" data-mce-bogus="all"></i>';
467 toolbar = dom.create( 'p', {
468 'id': 'wp-image-toolbar',
469 'data-mce-bogus': 'all',
470 'contenteditable': false
474 left = rectangle.x + rectangle.w - 82;
479 editor.getBody().appendChild( toolbar );
480 dom.setStyles( toolbar, {
485 toolbarActive = true;
488 function removeToolbar() {
489 var toolbar = editor.dom.get( 'wp-image-toolbar' );
492 editor.dom.remove( toolbar );
495 editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
497 editingImage = false;
498 toolbarActive = false;
501 function isPlaceholder( node ) {
502 var dom = editor.dom;
504 if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) ||
505 dom.getAttrib( node, 'data-mce-object' ) ) {
513 function isToolbarButton( node ) {
514 return ( node && node.nodeName === 'I' && node.parentNode.id === 'wp-image-toolbar' );
517 function edit( event ) {
522 // Don't trigger on right-click
523 if ( event.button && event.button > 1 ) {
527 if ( isToolbarButton( node ) ) {
528 image = dom.select( 'img[data-wp-imgselect]' )[0];
531 editor.selection.select( image );
533 if ( dom.hasClass( node, 'remove' ) ) {
534 removeImage( image );
535 } else if ( dom.hasClass( node, 'edit' ) ) {
536 if ( ! editingImage ) {
543 event.preventDefault();
544 } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
546 } else if ( node.nodeName !== 'IMG' ) {
551 if ( 'ontouchend' in document ) {
552 editor.on( 'click', function( event ) {
553 var target = event.target;
555 if ( editingImage && target.nodeName === 'IMG' ) {
556 event.preventDefault();
559 if ( isToolbarButton( target ) ) {
560 event.preventDefault();
561 event.stopPropagation();
566 editor.on( 'mouseup touchend', edit );
568 editor.on( 'init', function() {
569 var dom = editor.dom,
570 captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
572 dom.addClass( editor.getBody(), captionClass );
574 // Add caption field to the default image dialog
575 editor.on( 'wpLoadImageForm', function( event ) {
576 if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
587 label: 'Image caption'
590 event.data.splice( event.data.length - 1, 0, captionField );
593 // Fix caption parent width for images added from URL
594 editor.on( 'wpNewImageRefresh', function( event ) {
595 var parent, captionWidth;
597 if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
598 if ( ! parent.style.width ) {
599 captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
600 captionWidth = captionWidth ? captionWidth + 'px' : '50%';
601 dom.setStyle( parent, 'width', captionWidth );
606 editor.on( 'wpImageFormSubmit', function( event ) {
607 var data = event.imgData.data,
608 imgNode = event.imgData.node,
609 caption = event.imgData.caption,
613 wrap, parent, node, html, imgId;
615 // Temp image id so we can find the node later
616 data.id = '__wp-temp-img-id';
617 // Cancel the original callback
618 event.imgData.cancel = true;
620 if ( ! data.style ) {
625 // Delete the image and the caption
627 if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) {
629 } else if ( imgNode.parentNode.nodeName === 'A' ) {
630 dom.remove( imgNode.parentNode );
632 dom.remove( imgNode );
635 editor.nodeChanged();
641 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
642 // No line breaks inside HTML tags
643 return a.replace( /[\r\n\t]+/, ' ' );
646 // Convert remaining line breaks to <br>
647 caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' );
651 // New image inserted
652 html = dom.createHTML( 'img', data );
655 node = editor.selection.getNode();
658 captionWidth = parseInt( data.width, 10 );
660 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
664 captionWidth = ' style="width: ' + captionWidth + 'px"';
667 html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
668 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
670 if ( node.nodeName === 'P' ) {
673 parent = dom.getParent( node, 'p' );
676 if ( parent && parent.nodeName === 'P' ) {
677 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
678 parent.parentNode.insertBefore( wrap, parent );
679 editor.selection.select( wrap );
680 editor.nodeChanged();
682 if ( dom.isEmpty( parent ) ) {
683 dom.remove( parent );
686 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
689 editor.selection.setContent( html );
692 // Edit existing image
694 // Store the original image id if any
695 imgId = imgNode.id || null;
696 // Update the image node
697 dom.setAttribs( imgNode, data );
698 wrap = dom.getParent( imgNode, 'dl.wp-caption' );
702 if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) {
703 parent.innerHTML = caption;
706 if ( imgNode.className ) {
707 captionId = imgNode.className.match( /wp-image-([0-9]+)/ );
708 captionAlign = imgNode.className.match( /align(left|right|center|none)/ );
711 if ( captionAlign ) {
712 captionAlign = captionAlign[0];
713 imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' );
715 captionAlign = 'alignnone';
718 captionAlign = ' class="wp-caption ' + captionAlign + '"';
721 captionId = ' id="attachment_' + captionId[1] + '"';
724 captionWidth = data.width || imgNode.clientWidth;
726 if ( captionWidth ) {
727 captionWidth = parseInt( captionWidth, 10 );
729 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
733 captionWidth = ' style="width: '+ captionWidth +'px"';
736 if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) {
737 html = dom.getOuterHTML( imgNode.parentNode );
738 node = imgNode.parentNode;
740 html = dom.getOuterHTML( imgNode );
744 html = '<dl ' + captionId + captionAlign + captionWidth + '>' +
745 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
747 if ( parent = dom.getParent( imgNode, 'p' ) ) {
748 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
749 dom.insertAfter( wrap, parent );
750 editor.selection.select( wrap );
751 editor.nodeChanged();
753 // Delete the old image node
756 if ( dom.isEmpty( parent ) ) {
757 dom.remove( parent );
760 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
765 // Remove the caption wrapper and place the image in new paragraph
766 if ( imgNode.parentNode.nodeName === 'A' ) {
767 html = dom.getOuterHTML( imgNode.parentNode );
769 html = dom.getOuterHTML( imgNode );
772 parent = dom.create( 'p', {}, html );
773 dom.insertAfter( parent, wrap.parentNode );
774 editor.selection.select( parent );
775 editor.nodeChanged();
776 dom.remove( wrap.parentNode );
781 imgNode = dom.get('__wp-temp-img-id');
782 dom.setAttrib( imgNode, 'id', imgId );
783 event.imgData.node = imgNode;
786 editor.on( 'wpLoadImageData', function( event ) {
788 data = event.imgData.data,
789 imgNode = event.imgData.node;
791 if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
792 parent = dom.select( 'dd.wp-caption-dd', parent )[0];
795 data.caption = editor.serializer.serialize( parent )
796 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
801 dom.bind( editor.getDoc(), 'dragstart', function( event ) {
802 var node = editor.selection.getNode();
804 // Prevent dragging images out of the caption elements
805 if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
806 event.preventDefault();
809 // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
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();
827 editor.on( 'click', function( event ) {
828 if ( event.target.nodeName === 'IMG' && dom.getAttrib( event.target, 'data-wp-imgselect' ) &&
829 dom.getParent( event.target, 'dl.wp-caption' ) ) {
831 editor.getBody().focus();
837 editor.on( 'ObjectResized', function( event ) {
838 var node = event.target;
840 if ( node.nodeName === 'IMG' ) {
841 editor.undoManager.transact( function() {
845 node.className = node.className.replace( /\bsize-[^ ]+/, '' );
847 if ( parent = dom.getParent( node, '.wp-caption' ) ) {
848 width = event.width || dom.getAttrib( node, 'width' );
851 width = parseInt( width, 10 );
853 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
857 dom.setStyle( parent, 'width', width + 'px' );
866 editor.on( 'BeforeExecCommand', function( event ) {
867 var node, p, DL, align,
871 if ( cmd === 'mceInsertContent' ) {
872 // When inserting content, if the caret is inside a caption create new paragraph under
873 // and move the caret there
874 if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
875 p = dom.create( 'p' );
876 dom.insertAfter( p, node );
877 editor.selection.setCursorLocation( p, 0 );
878 editor.nodeChanged();
880 } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) {
881 node = editor.selection.getNode();
882 align = cmd.substr(7).toLowerCase();
883 align = 'align' + align;
884 DL = dom.getParent( node, 'dl.wp-caption' );
889 // When inside an image caption, set the align* class on dl.wp-caption
890 if ( dom.hasClass( DL, align ) ) {
891 dom.removeClass( DL, align );
892 dom.addClass( DL, 'alignnone' );
894 DL.className = DL.className.replace( /align[^ ]+/g, '' );
895 dom.addClass( DL, align );
898 if ( node.nodeName === 'IMG' ) {
899 // Re-select the image to update resize handles, etc.
900 editor.nodeChanged();
903 event.preventDefault();
906 if ( node.nodeName === 'IMG' ) {
907 if ( dom.hasClass( node, align ) ) {
908 // The align class is being removed
909 dom.addClass( node, 'alignnone' );
911 dom.removeClass( node, 'alignnone' );
917 editor.on( 'keydown', function( event ) {
918 var node, wrap, P, spacer,
919 selection = editor.selection,
920 keyCode = event.keyCode,
922 VK = tinymce.util.VK;
924 if ( keyCode === VK.ENTER ) {
925 // When pressing Enter inside a caption move the caret to a new parapraph under it
926 node = selection.getNode();
927 wrap = dom.getParent( node, 'div.mceTemp' );
930 dom.events.cancel( event ); // Doesn't cancel all :(
932 // Remove any extra dt and dd cleated on pressing Enter...
933 tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
934 if ( dom.isEmpty( element ) ) {
935 dom.remove( element );
939 spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
940 P = dom.create( 'p', null, spacer );
942 if ( node.nodeName === 'DD' ) {
943 dom.insertAfter( P, wrap );
945 wrap.parentNode.insertBefore( P, wrap );
948 editor.nodeChanged();
949 selection.setCursorLocation( P, 0 );
951 } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
952 node = selection.getNode();
954 if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
956 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
957 wrap = dom.getParent( node, 'div.mceTemp' );
961 dom.events.cancel( event );
969 // Most key presses will replace the image so we need to remove the toolbar
970 if ( toolbarActive ) {
971 if ( event.ctrlKey || event.metaKey || event.altKey || ( keyCode < 48 && keyCode !== VK.SPACEBAR ) ) {
979 editor.on( 'mousedown', function( event ) {
980 if ( isToolbarButton( event.target ) ) {
981 if ( tinymce.Env.ie ) {
982 // Stop IE > 8 from making the wrapper resizable on mousedown
983 event.preventDefault();
985 } else if ( event.target.nodeName !== 'IMG' ) {
990 // Remove from undo levels
991 editor.on( 'BeforeAddUndo', function( event ) {
992 event.level.content = event.level.content.replace( / data-wp-imgselect="1"/g, '' );
995 // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
996 // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
997 // Collapse the selection to remove the resize handles.
998 if ( tinymce.Env.gecko ) {
999 editor.on( 'undo redo', function() {
1000 if ( editor.selection.getNode().nodeName === 'IMG' ) {
1001 editor.selection.collapse();
1006 editor.on( 'cut wpview-selected', function() {
1010 editor.wpSetImgCaption = function( content ) {
1011 return parseShortcode( content );
1014 editor.wpGetImgCaption = function( content ) {
1015 return getShortcode( content );
1018 editor.on( 'BeforeSetContent', function( event ) {
1019 if ( event.format !== 'raw' ) {
1020 event.content = editor.wpSetImgCaption( event.content );
1024 editor.on( 'PostProcess', function( event ) {
1026 event.content = editor.wpGetImgCaption( event.content );
1027 event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
1032 _do_shcode: parseShortcode,
1033 _get_shcode: getShortcode