2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
3 var toolbarActive = false;
5 function parseShortcode( content ) {
6 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
7 var id, cls, w, cap, img, width,
10 id = b.match( /id=['"]([^'"]*)['"] ?/ );
12 b = b.replace( id[0], '' );
15 cls = b.match( /align=['"]([^'"]*)['"] ?/ );
17 b = b.replace( cls[0], '' );
20 w = b.match( /width=['"]([0-9]*)['"] ?/ );
22 b = b.replace( w[0], '' );
26 img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
28 if ( img && img[2] ) {
32 // old captions shortcode style
33 cap = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
37 id = ( id && id[1] ) ? id[1] : '';
38 cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
41 w = img.match( /width=['"]([0-9]*)['"]/ );
52 width = parseInt( w, 10 );
53 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
57 return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
58 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
62 function getShortcode( content ) {
63 return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) {
66 if ( b.indexOf('<img ') === -1 ) {
67 // Broken caption. The user managed to drag the image out?
68 // Try to return the caption text as a paragraph.
69 out = b.match( /<dd [^>]+>([\s\S]+?)<\/dd>/i );
71 if ( out && out[1] ) {
72 return '<p>' + out[1] + '</p>';
78 out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, cap ) {
81 w = c.match( /width="([0-9]*)"/ );
82 w = ( w && w[1] ) ? w[1] : '';
88 id = b.match( /id="([^"]*)"/ );
89 id = ( id && id[1] ) ? id[1] : '';
91 cls = b.match( /class="([^"]*)"/ );
92 cls = ( cls && cls[1] ) ? cls[1] : '';
93 cls = cls.match( /align[a-z]+/ ) || 'alignnone';
95 cap = cap.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
96 // no line breaks inside HTML tags
97 return a.replace( /[\r\n\t]+/, ' ' );
100 // convert remaining line breaks to <br>
101 cap = cap.replace( /\s*\n\s*/g, '<br />' );
103 return '[caption id="'+ id +'" align="'+ cls +'" width="'+ w +'"]'+ c +' '+ cap +'[/caption]';
106 if ( out.indexOf('[caption') !== 0 ) {
107 // the caption html seems broken, try to find the image that may be wrapped in a link
108 // and may be followed by <p> with the caption text.
109 out = b.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
116 function extractImageData( imageNode ) {
117 var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
119 isIntRegExp = /^\d+$/;
121 // default attributes
123 attachment_id: false,
131 linkTargetBlank: false,
136 metadata.url = dom.getAttrib( imageNode, 'src' );
137 metadata.alt = dom.getAttrib( imageNode, 'alt' );
138 metadata.title = dom.getAttrib( imageNode, 'title' );
140 width = dom.getAttrib( imageNode, 'width' );
141 height = dom.getAttrib( imageNode, 'height' );
143 if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
144 width = imageNode.naturalWidth || imageNode.width;
147 if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
148 height = imageNode.naturalHeight || imageNode.height;
151 metadata.customWidth = metadata.width = width;
152 metadata.customHeight = metadata.height = height;
154 classes = tinymce.explode( imageNode.className, ' ' );
157 tinymce.each( classes, function( name ) {
159 if ( /^wp-image/.test( name ) ) {
160 metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
161 } else if ( /^align/.test( name ) ) {
162 metadata.align = name.replace( 'align', '' );
163 } else if ( /^size/.test( name ) ) {
164 metadata.size = name.replace( 'size-', '' );
166 extraClasses.push( name );
171 metadata.extraClasses = extraClasses.join( ' ' );
174 captionBlock = dom.getParents( imageNode, '.wp-caption' );
176 if ( captionBlock.length ) {
177 captionBlock = captionBlock[0];
179 classes = captionBlock.className.split( ' ' );
180 tinymce.each( classes, function( name ) {
181 if ( /^align/.test( name ) ) {
182 metadata.align = name.replace( 'align', '' );
186 caption = dom.select( 'dd.wp-caption-dd', captionBlock );
187 if ( caption.length ) {
188 caption = caption[0];
190 metadata.caption = editor.serializer.serialize( caption )
191 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
196 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
197 link = imageNode.parentNode;
198 metadata.linkUrl = dom.getAttrib( link, 'href' );
199 metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
200 metadata.linkRel = dom.getAttrib( link, 'rel' );
201 metadata.linkClassName = link.className;
207 function hasTextContent( node ) {
208 return node && !! ( node.textContent || node.innerText );
211 function updateImage( imageNode, imageData ) {
212 var classes, className, node, html, parent, wrap, linkNode,
213 captionNode, dd, dl, id, attrs, linkAttrs, width, height,
216 classes = tinymce.explode( imageData.extraClasses, ' ' );
222 if ( ! imageData.caption ) {
223 classes.push( 'align' + imageData.align );
226 if ( imageData.attachment_id ) {
227 classes.push( 'wp-image-' + imageData.attachment_id );
228 if ( imageData.size && imageData.size !== 'custom' ) {
229 classes.push( 'size-' + imageData.size );
233 width = imageData.width;
234 height = imageData.height;
236 if ( imageData.size === 'custom' ) {
237 width = imageData.customWidth;
238 height = imageData.customHeight;
243 width: width || null,
244 height: height || null,
246 title: imageData.title || null,
247 'class': classes.join( ' ' ) || null
250 dom.setAttribs( imageNode, attrs );
253 href: imageData.linkUrl,
254 rel: imageData.linkRel || null,
255 target: imageData.linkTargetBlank ? '_blank': null,
256 'class': imageData.linkClassName || null
259 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
260 // Update or remove an existing link wrapped around the image
261 if ( imageData.linkUrl ) {
262 dom.setAttribs( imageNode.parentNode, linkAttrs );
264 dom.remove( imageNode.parentNode, true );
266 } else if ( imageData.linkUrl ) {
267 if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
268 // The image is inside a link together with other nodes,
269 // or is nested in another node, move it out
270 dom.insertAfter( imageNode, linkNode );
273 // Add link wrapped around the image
274 linkNode = dom.create( 'a', linkAttrs );
275 imageNode.parentNode.insertBefore( linkNode, imageNode );
276 linkNode.appendChild( imageNode );
279 captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
281 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
282 node = imageNode.parentNode;
287 if ( imageData.caption ) {
289 id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
290 className = 'wp-caption align' + ( imageData.align || 'none' );
292 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
293 width = parseInt( width, 10 );
298 dl = dom.select( 'dl.wp-caption', captionNode );
301 dom.setAttribs( dl, {
304 style: 'width: ' + width + 'px'
308 dd = dom.select( '.wp-caption-dd', captionNode );
311 dom.setHTML( dd[0], imageData.caption );
315 id = id ? 'id="'+ id +'" ' : '';
317 // should create a new function for generating the caption markup
318 html = '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
319 '<dt class="wp-caption-dt">' + dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
321 if ( parent = dom.getParent( node, 'p' ) ) {
322 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
323 parent.parentNode.insertBefore( wrap, parent );
326 if ( dom.isEmpty( parent ) ) {
327 dom.remove( parent );
330 dom.setOuterHTML( node, '<div class="mceTemp">' + html + '</div>' );
333 } else if ( captionNode ) {
334 // Remove the caption wrapper and place the image in new paragraph
335 parent = dom.create( 'p' );
336 captionNode.parentNode.insertBefore( parent, captionNode );
337 parent.appendChild( node );
338 dom.remove( captionNode );
341 if ( wp.media.events ) {
342 wp.media.events.trigger( 'editor:image-update', {
349 editor.nodeChanged();
350 // Refresh the toolbar
351 addToolbar( imageNode );
354 function editImage( img ) {
355 var frame, callback, metadata;
357 if ( typeof wp === 'undefined' || ! wp.media ) {
358 editor.execCommand( 'mceImage' );
362 metadata = extractImageData( img );
364 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
365 wp.media.events.trigger( 'editor:image-edit', {
373 state: 'image-details',
377 wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
379 callback = function( imageData ) {
381 editor.undoManager.transact( function() {
382 updateImage( img, imageData );
387 frame.state('image-details').on( 'update', callback );
388 frame.state('replace-image').on( 'replace', callback );
389 frame.on( 'close', function() {
397 function removeImage( node ) {
400 if ( node.nodeName === 'DIV' && editor.dom.hasClass( node, 'mceTemp' ) ) {
402 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
403 wrap = editor.dom.getParent( node, 'div.mceTemp' );
407 if ( wrap.nextSibling ) {
408 editor.selection.select( wrap.nextSibling );
409 } else if ( wrap.previousSibling ) {
410 editor.selection.select( wrap.previousSibling );
412 editor.selection.select( wrap.parentNode );
415 editor.selection.collapse( true );
416 editor.nodeChanged();
417 editor.dom.remove( wrap );
419 editor.dom.remove( node );
424 function addToolbar( node ) {
425 var rectangle, toolbarHtml, toolbar, left,
430 // Don't add to placeholders
431 if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) {
435 dom.setAttrib( node, 'data-wp-imgselect', 1 );
436 rectangle = dom.getRect( node );
438 toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div>' +
439 '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
441 toolbar = dom.create( 'div', {
442 'id': 'wp-image-toolbar',
443 'data-mce-bogus': '1',
444 'contenteditable': false
448 left = rectangle.x + rectangle.w - 82;
453 editor.getBody().appendChild( toolbar );
454 dom.setStyles( toolbar, {
459 toolbarActive = true;
462 function removeToolbar() {
463 var toolbar = editor.dom.get( 'wp-image-toolbar' );
466 editor.dom.remove( toolbar );
469 editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
471 toolbarActive = false;
474 function isPlaceholder( node ) {
475 var dom = editor.dom;
477 if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) ||
478 dom.getAttrib( node, 'data-mce-object' ) ) {
486 editor.on( 'init', function() {
487 var dom = editor.dom,
488 captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
490 dom.addClass( editor.getBody(), captionClass );
492 // Add caption field to the default image dialog
493 editor.on( 'wpLoadImageForm', function( event ) {
494 if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
505 label: 'Image caption'
508 event.data.splice( event.data.length - 1, 0, captionField );
511 // Fix caption parent width for images added from URL
512 editor.on( 'wpNewImageRefresh', function( event ) {
513 var parent, captionWidth;
515 if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
516 if ( ! parent.style.width ) {
517 captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
518 captionWidth = captionWidth ? captionWidth + 'px' : '50%';
519 dom.setStyle( parent, 'width', captionWidth );
524 editor.on( 'wpImageFormSubmit', function( event ) {
525 var data = event.imgData.data,
526 imgNode = event.imgData.node,
527 caption = event.imgData.caption,
531 wrap, parent, node, html, imgId;
533 // Temp image id so we can find the node later
534 data.id = '__wp-temp-img-id';
535 // Cancel the original callback
536 event.imgData.cancel = true;
538 if ( ! data.style ) {
543 // Delete the image and the caption
545 if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) {
547 } else if ( imgNode.parentNode.nodeName === 'A' ) {
548 dom.remove( imgNode.parentNode );
550 dom.remove( imgNode );
553 editor.nodeChanged();
559 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
560 // No line breaks inside HTML tags
561 return a.replace( /[\r\n\t]+/, ' ' );
564 // Convert remaining line breaks to <br>
565 caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' );
569 // New image inserted
570 html = dom.createHTML( 'img', data );
573 node = editor.selection.getNode();
576 captionWidth = parseInt( data.width, 10 );
578 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
582 captionWidth = ' style="width: ' + captionWidth + 'px"';
585 html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
586 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
588 if ( node.nodeName === 'P' ) {
591 parent = dom.getParent( node, 'p' );
594 if ( parent && parent.nodeName === 'P' ) {
595 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
596 parent.parentNode.insertBefore( wrap, parent );
597 editor.selection.select( wrap );
598 editor.nodeChanged();
600 if ( dom.isEmpty( parent ) ) {
601 dom.remove( parent );
604 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
607 editor.selection.setContent( html );
610 // Edit existing image
612 // Store the original image id if any
613 imgId = imgNode.id || null;
614 // Update the image node
615 dom.setAttribs( imgNode, data );
616 wrap = dom.getParent( imgNode, 'dl.wp-caption' );
620 if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) {
621 parent.innerHTML = caption;
624 if ( imgNode.className ) {
625 captionId = imgNode.className.match( /wp-image-([0-9]+)/ );
626 captionAlign = imgNode.className.match( /align(left|right|center|none)/ );
629 if ( captionAlign ) {
630 captionAlign = captionAlign[0];
631 imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' );
633 captionAlign = 'alignnone';
636 captionAlign = ' class="wp-caption ' + captionAlign + '"';
639 captionId = ' id="attachment_' + captionId[1] + '"';
642 captionWidth = data.width || imgNode.clientWidth;
644 if ( captionWidth ) {
645 captionWidth = parseInt( captionWidth, 10 );
647 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
651 captionWidth = ' style="width: '+ captionWidth +'px"';
654 if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) {
655 html = dom.getOuterHTML( imgNode.parentNode );
656 node = imgNode.parentNode;
658 html = dom.getOuterHTML( imgNode );
662 html = '<dl ' + captionId + captionAlign + captionWidth + '>' +
663 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
665 if ( parent = dom.getParent( imgNode, 'p' ) ) {
666 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
667 dom.insertAfter( wrap, parent );
668 editor.selection.select( wrap );
669 editor.nodeChanged();
671 // Delete the old image node
674 if ( dom.isEmpty( parent ) ) {
675 dom.remove( parent );
678 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
683 // Remove the caption wrapper and place the image in new paragraph
684 if ( imgNode.parentNode.nodeName === 'A' ) {
685 html = dom.getOuterHTML( imgNode.parentNode );
687 html = dom.getOuterHTML( imgNode );
690 parent = dom.create( 'p', {}, html );
691 dom.insertAfter( parent, wrap.parentNode );
692 editor.selection.select( parent );
693 editor.nodeChanged();
694 dom.remove( wrap.parentNode );
699 imgNode = dom.get('__wp-temp-img-id');
700 dom.setAttrib( imgNode, 'id', imgId );
701 event.imgData.node = imgNode;
704 editor.on( 'wpLoadImageData', function( event ) {
706 data = event.imgData.data,
707 imgNode = event.imgData.node;
709 if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
710 parent = dom.select( 'dd.wp-caption-dd', parent )[0];
713 data.caption = editor.serializer.serialize( parent )
714 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
719 dom.bind( editor.getDoc(), 'dragstart', function( event ) {
720 var node = editor.selection.getNode();
722 // Prevent dragging images out of the caption elements
723 if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
724 event.preventDefault();
727 // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
731 // Prevent IE11 from making dl.wp-caption resizable
732 if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
733 // The 'mscontrolselect' event is supported only in IE11+
734 dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
735 if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
736 // Hide the thick border with resize handles around dl.wp-caption
737 editor.getBody().focus(); // :(
738 } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
739 // Trigger the thick border with resize handles...
740 // This will make the caption text editable.
741 event.target.focus();
745 editor.on( 'click', function( event ) {
746 if ( event.target.nodeName === 'IMG' && dom.getAttrib( event.target, 'data-wp-imgselect' ) &&
747 dom.getParent( event.target, 'dl.wp-caption' ) ) {
749 editor.getBody().focus();
755 editor.on( 'ObjectResized', function( event ) {
760 if ( node.nodeName === 'IMG' ) {
761 node.className = node.className.replace( /\bsize-[^ ]+/, '' );
763 if ( parent = dom.getParent( node, '.wp-caption' ) ) {
764 width = event.width || dom.getAttrib( node, 'width' );
767 width = parseInt( width, 10 );
769 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
773 dom.setStyle( parent, 'width', width + 'px' );
781 editor.on( 'BeforeExecCommand', function( event ) {
782 var node, p, DL, align,
786 if ( cmd === 'mceInsertContent' ) {
787 // When inserting content, if the caret is inside a caption create new paragraph under
788 // and move the caret there
789 if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
790 p = dom.create( 'p' );
791 dom.insertAfter( p, node );
792 editor.selection.setCursorLocation( p, 0 );
793 editor.nodeChanged();
795 if ( tinymce.Env.ie > 8 ) {
796 setTimeout( function() {
797 editor.selection.setCursorLocation( p, 0 );
798 editor.selection.setContent( event.value );
804 } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) {
805 node = editor.selection.getNode();
806 align = cmd.substr(7).toLowerCase();
807 align = 'align' + align;
811 if ( dom.is( node, 'dl.wp-caption' ) ) {
814 DL = dom.getParent( node, 'dl.wp-caption' );
818 // When inside an image caption, set the align* class on dl.wp-caption
819 if ( dom.hasClass( DL, align ) ) {
820 dom.removeClass( DL, align );
821 dom.addClass( DL, 'alignnone' );
823 DL.className = DL.className.replace( /align[^ ]+/g, '' );
824 dom.addClass( DL, align );
830 if ( node.nodeName === 'IMG' ) {
831 if ( dom.hasClass( node, align ) ) {
832 // The align class is being removed
833 dom.addClass( node, 'alignnone' );
835 dom.removeClass( node, 'alignnone' );
841 editor.on( 'keydown', function( event ) {
842 var node, wrap, P, spacer,
843 selection = editor.selection,
844 keyCode = event.keyCode,
847 if ( keyCode === tinymce.util.VK.ENTER ) {
848 // When pressing Enter inside a caption move the caret to a new parapraph under it
849 node = selection.getNode();
850 wrap = dom.getParent( node, 'div.mceTemp' );
853 dom.events.cancel( event ); // Doesn't cancel all :(
855 // Remove any extra dt and dd cleated on pressing Enter...
856 tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
857 if ( dom.isEmpty( element ) ) {
858 dom.remove( element );
862 spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
863 P = dom.create( 'p', null, spacer );
865 if ( node.nodeName === 'DD' ) {
866 dom.insertAfter( P, wrap );
868 wrap.parentNode.insertBefore( P, wrap );
871 editor.nodeChanged();
872 selection.setCursorLocation( P, 0 );
874 } else if ( keyCode === tinymce.util.VK.DELETE || keyCode === tinymce.util.VK.BACKSPACE ) {
875 node = selection.getNode();
877 if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
879 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
880 wrap = dom.getParent( node, 'div.mceTemp' );
884 dom.events.cancel( event );
892 // Key presses will replace the image so we need to remove the toolbar
893 if ( toolbarActive ) {
894 if ( event.ctrlKey || event.metaKey || event.altKey ||
895 ( keyCode < 48 && keyCode > 90 ) || keyCode > 186 ) {
903 editor.on( 'mousedown', function( event ) {
904 if ( editor.dom.getParent( event.target, '#wp-image-toolbar' ) ) {
905 if ( tinymce.Env.ie ) {
906 // Stop IE > 8 from making the wrapper resizable on mousedown
907 event.preventDefault();
909 } else if ( event.target.nodeName !== 'IMG' ) {
914 editor.on( 'mouseup', function( event ) {
919 // Don't trigger on right-click
920 if ( event.button && event.button > 1 ) {
924 if ( node.nodeName === 'DIV' && dom.getParent( node, '#wp-image-toolbar' ) ) {
925 image = dom.select( 'img[data-wp-imgselect]' )[0];
928 editor.selection.select( image );
930 if ( dom.hasClass( node, 'remove' ) ) {
931 removeImage( image );
932 } else if ( dom.hasClass( node, 'edit' ) ) {
936 } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
938 } else if ( node.nodeName !== 'IMG' ) {
943 editor.on( 'cut', function() {
947 editor.wpSetImgCaption = function( content ) {
948 return parseShortcode( content );
951 editor.wpGetImgCaption = function( content ) {
952 return getShortcode( content );
955 editor.on( 'BeforeSetContent', function( event ) {
956 event.content = editor.wpSetImgCaption( event.content );
959 editor.on( 'PostProcess', function( event ) {
961 event.content = editor.wpGetImgCaption( event.content );
962 event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
967 _do_shcode: parseShortcode,
968 _get_shcode: getShortcode