5 tinymce.create('tinymce.plugins.wpEditImage', {
9 init: function(ed, url) {
16 ed.addCommand('WP_EditImage', t._editImage);
18 ed.onInit.add(function(ed) {
19 ed.dom.events.add(ed.getBody(), 'mousedown', function(e) {
22 if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) {
23 if ( tinymce.isGecko )
24 ed.selection.select(parent);
25 else if ( tinymce.isWebKit )
26 ed.dom.events.prevent(e);
30 // when pressing Return inside a caption move the caret to a new parapraph under it
31 ed.dom.events.add(ed.getBody(), 'keydown', function(e) {
34 if ( e.keyCode == 13 ) {
35 n = ed.selection.getNode();
36 DL = ed.dom.getParent(n, 'dl.wp-caption');
39 DIV = ed.dom.getParent(DL, 'div.mceTemp');
42 ed.dom.events.cancel(e);
43 P = ed.dom.create('p', {}, '\uFEFF');
44 ed.dom.insertAfter( P, DIV );
45 ed.selection.setCursorLocation(P, 0);
51 // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
52 if ( 'ontouchstart' in window ) {
53 ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
59 // resize the caption <dl> when the image is soft-resized by the user
60 ed.onMouseUp.add(function(ed, e) {
61 if ( tinymce.isWebKit || tinymce.isOpera )
64 if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) {
65 var n = ed.selection.getNode();
67 if ( 'IMG' == n.nodeName ) {
68 window.setTimeout(function(){
69 var DL = ed.dom.getParent(n, 'dl.wp-caption'), width;
71 if ( n.width != mouse.img_w || n.height != mouse.img_h )
72 n.className = n.className.replace(/size-[^ "']+/, '');
75 width = ed.dom.getAttrib(n, 'width') || n.width;
76 width = parseInt(width, 10);
77 ed.dom.setStyle(DL, 'width', 10 + width);
78 ed.execCommand('mceRepaint');
86 // show editimage buttons
87 ed.onMouseDown.add(function(ed, e){
91 ed.onBeforeSetContent.add(function(ed, o) {
92 o.content = ed.wpSetImgCaption(o.content);
95 ed.onPostProcess.add(function(ed, o) {
97 o.content = ed.wpGetImgCaption(o.content);
100 ed.wpSetImgCaption = function(content) {
101 return t._do_shcode(content);
104 ed.wpGetImgCaption = function(content) {
105 return t._get_shcode(content);
108 // When inserting content, if the caret is inside a caption create new paragraph under
109 // and move the caret there
110 ed.onBeforeExecCommand.add( function( ed, cmd ) {
113 if ( cmd == 'mceInsertContent' ) {
114 node = ed.dom.getParent(ed.selection.getNode(), 'div.mceTemp');
119 p = ed.dom.create('p');
120 ed.dom.insertAfter( p, node );
121 ed.selection.setCursorLocation(p, 0);
126 _do_shcode : function(content) {
127 return content.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function(a,b,c){
128 var id, cls, w, cap, div_cls, img, trim = tinymce.trim;
130 id = b.match(/id=['"]([^'"]*)['"] ?/);
132 b = b.replace(id[0], '');
134 cls = b.match(/align=['"]([^'"]*)['"] ?/);
136 b = b.replace(cls[0], '');
138 w = b.match(/width=['"]([0-9]*)['"] ?/);
140 b = b.replace(w[0], '');
143 img = c.match(/((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i);
145 if ( img && img[2] ) {
146 cap = trim( img[2] );
147 img = trim( img[1] );
149 // old captions shortcode style
150 cap = trim(b).replace(/caption=['"]/, '').replace(/['"]$/, '');
154 id = ( id && id[1] ) ? id[1] : '';
155 cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
156 w = ( w && w[1] ) ? w[1] : '';
162 if ( cls == 'aligncenter' )
163 div_cls += ' mceIEcenter';
165 w = parseInt( w, 10 ) + 10;
166 return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+w+
167 'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';
171 _get_shcode : function(content) {
172 return content.replace(/<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function(a, b){
173 var ret = b.replace(/<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function(a,b,c,cap){
176 w = c.match(/width="([0-9]*)"/);
177 w = ( w && w[1] ) ? w[1] : '';
182 id = b.match(/id="([^"]*)"/);
183 id = ( id && id[1] ) ? id[1] : '';
185 cls = b.match(/class="([^"]*)"/);
186 cls = ( cls && cls[1] ) ? cls[1] : '';
187 cls = cls.match(/align[a-z]+/) || 'alignnone';
189 cap = cap.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){
190 // no line breaks inside HTML tags
191 return a.replace(/[\r\n\t]+/, ' ');
194 // convert remaining line breaks to <br>
195 cap = cap.replace(/\s*\n\s*/g, '<br />');
197 return '[caption id="'+id+'" align="'+cls+'" width="'+w+'"]'+c+' '+cap+'[/caption]';
200 if ( ret.indexOf('[caption') !== 0 ) {
201 // the caption html seems brocken, try to find the image that may be wrapped in a link
202 // and may be followed by <p> with the caption text.
203 ret = b.replace(/[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2');
210 _createButtons : function() {
211 var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
213 if ( DOM.get('wp_editbtns') )
216 isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
217 ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
219 DOM.add(document.body, 'div', {
221 style : 'display:none;'
224 editButton = DOM.add('wp_editbtns', 'img', {
225 src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png',
226 id : 'wp_editimgbtn',
229 title : ed.getLang('wpeditimage.edit_img')
232 tinymce.dom.Event.add(editButton, 'mousedown', function() {
234 ed.plugins.wordpress._hideButtons();
237 dellButton = DOM.add('wp_editbtns', 'img', {
238 src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
242 title : ed.getLang('wpeditimage.del_img')
245 tinymce.dom.Event.add(dellButton, 'mousedown', function() {
246 var ed = tinymce.activeEditor, el = ed.selection.getNode(), parent;
248 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
249 if ( (parent = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(parent, 'mceTemp') ) {
250 ed.dom.remove(parent);
252 if ( el.parentNode.nodeName == 'A' && el.parentNode.childNodes.length == 1 )
255 if ( el.parentNode.nodeName == 'P' && el.parentNode.childNodes.length == 1 )
261 ed.execCommand('mceRepaint');
264 ed.plugins.wordpress._hideButtons();
268 _editImage : function() {
269 var ed = tinymce.activeEditor, url = this.url, el = ed.selection.getNode(), vp, H, W, cls = el.className;
271 if ( cls.indexOf('mceItem') != -1 || cls.indexOf('wpGallery') != -1 || el.nodeName != 'IMG' )
274 vp = tinymce.DOM.getViewPort();
275 H = 680 < (vp.h - 70) ? 680 : vp.h - 70;
276 W = 650 < vp.w ? 650 : vp.w;
278 ed.windowManager.open({
279 file: url + '/editimage.html',
286 _showButtons : function(e) {
287 var ed = this.editor, target = e.target;
289 if ( target.nodeName != 'IMG' ) {
290 if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) {
291 target = target.firstChild;
293 ed.plugins.wordpress._hideButtons();
298 if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
302 img_w: target.clientWidth,
303 img_h: target.clientHeight
306 if ( e.type == 'touchstart' ) {
307 ed.selection.select(target);
308 ed.dom.events.cancel(e);
311 ed.plugins.wordpress._hideButtons();
312 ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
316 getInfo : function() {
318 longname : 'Edit Image',
319 author : 'WordPress',
320 authorurl : 'http://wordpress.org',
327 tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage);