345 } |
345 } |
346 |
346 |
347 return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) ); |
347 return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) ); |
348 } |
348 } |
349 |
349 |
350 function updateImage( imageNode, imageData ) { |
350 function updateImage( $imageNode, imageData ) { |
351 var classes, className, node, html, parent, wrap, linkNode, |
351 var classes, className, node, html, parent, wrap, linkNode, imageNode, |
352 captionNode, dd, dl, id, attrs, linkAttrs, width, height, align, |
352 captionNode, dd, dl, id, attrs, linkAttrs, width, height, align, |
353 $imageNode, srcset, src, |
353 $imageNode, srcset, src, |
354 dom = editor.dom; |
354 dom = editor.dom; |
355 |
355 |
|
356 if ( ! $imageNode || ! $imageNode.length ) { |
|
357 return; |
|
358 } |
|
359 |
|
360 imageNode = $imageNode[0]; |
356 classes = tinymce.explode( imageData.extraClasses, ' ' ); |
361 classes = tinymce.explode( imageData.extraClasses, ' ' ); |
357 |
362 |
358 if ( ! classes ) { |
363 if ( ! classes ) { |
359 classes = []; |
364 classes = []; |
360 } |
365 } |
387 }; |
392 }; |
388 |
393 |
389 dom.setAttribs( imageNode, attrs ); |
394 dom.setAttribs( imageNode, attrs ); |
390 |
395 |
391 // Preserve empty alt attributes. |
396 // Preserve empty alt attributes. |
392 editor.$( imageNode ).attr( 'alt', imageData.alt || '' ); |
397 $imageNode.attr( 'alt', imageData.alt || '' ); |
393 |
398 |
394 linkAttrs = { |
399 linkAttrs = { |
395 href: imageData.linkUrl, |
400 href: imageData.linkUrl, |
396 rel: imageData.linkRel || null, |
401 rel: imageData.linkRel || null, |
397 target: imageData.linkTargetBlank ? '_blank': null, |
402 target: imageData.linkTargetBlank ? '_blank': null, |
511 |
516 |
512 editor.nodeChanged(); |
517 editor.nodeChanged(); |
513 } |
518 } |
514 |
519 |
515 function editImage( img ) { |
520 function editImage( img ) { |
516 var frame, callback, metadata; |
521 var frame, callback, metadata, imageNode; |
517 |
522 |
518 if ( typeof wp === 'undefined' || ! wp.media ) { |
523 if ( typeof wp === 'undefined' || ! wp.media ) { |
519 editor.execCommand( 'mceImage' ); |
524 editor.execCommand( 'mceImage' ); |
520 return; |
525 return; |
521 } |
526 } |
522 |
527 |
523 metadata = extractImageData( img ); |
528 metadata = extractImageData( img ); |
|
529 |
|
530 // Mark the image node so we can select it later. |
|
531 editor.$( img ).attr( 'data-wp-editing', 1 ); |
524 |
532 |
525 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal |
533 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal |
526 wp.media.events.trigger( 'editor:image-edit', { |
534 wp.media.events.trigger( 'editor:image-edit', { |
527 editor: editor, |
535 editor: editor, |
528 metadata: metadata, |
536 metadata: metadata, |
536 } ); |
544 } ); |
537 |
545 |
538 wp.media.events.trigger( 'editor:frame-create', { frame: frame } ); |
546 wp.media.events.trigger( 'editor:frame-create', { frame: frame } ); |
539 |
547 |
540 callback = function( imageData ) { |
548 callback = function( imageData ) { |
541 editor.focus(); |
|
542 editor.undoManager.transact( function() { |
549 editor.undoManager.transact( function() { |
543 updateImage( img, imageData ); |
550 updateImage( imageNode, imageData ); |
544 } ); |
551 } ); |
545 frame.detach(); |
552 frame.detach(); |
546 }; |
553 }; |
547 |
554 |
548 frame.state('image-details').on( 'update', callback ); |
555 frame.state('image-details').on( 'update', callback ); |
549 frame.state('replace-image').on( 'replace', callback ); |
556 frame.state('replace-image').on( 'replace', callback ); |
550 frame.on( 'close', function() { |
557 frame.on( 'close', function() { |
551 editor.focus(); |
558 editor.focus(); |
552 frame.detach(); |
559 frame.detach(); |
|
560 |
|
561 // `close` fires first... |
|
562 // To be able to update the image node, we need to find it here, |
|
563 // and use it in the callback. |
|
564 imageNode = editor.$( 'img[data-wp-editing]' ) |
|
565 imageNode.removeAttr( 'data-wp-editing' ); |
553 }); |
566 }); |
554 |
567 |
555 frame.open(); |
568 frame.open(); |
556 } |
569 } |
557 |
570 |
808 return getShortcode( content ); |
821 return getShortcode( content ); |
809 }; |
822 }; |
810 |
823 |
811 editor.on( 'beforeGetContent', function( event ) { |
824 editor.on( 'beforeGetContent', function( event ) { |
812 if ( event.format !== 'raw' ) { |
825 if ( event.format !== 'raw' ) { |
813 editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null ); |
826 editor.$( 'img[id="__wp-temp-img-id"]' ).removeAttr( 'id' ); |
814 } |
827 } |
815 }); |
828 }); |
816 |
829 |
817 editor.on( 'BeforeSetContent', function( event ) { |
830 editor.on( 'BeforeSetContent', function( event ) { |
818 if ( event.format !== 'raw' ) { |
831 if ( event.format !== 'raw' ) { |