/Web/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js
JavaScript | 284 lines | 267 code | 15 blank | 2 comment | 24 complexity | 23acb7d19b52e8fafaa84c3a342cfe7c MD5 | raw file
Possible License(s): GPL-2.0, GPL-3.0, AGPL-1.0, LGPL-2.1
1 2(function() { 3 tinymce.create('tinymce.plugins.wpEditImage', { 4 url: '', 5 editor: {}, 6 7 init: function(ed, url) { 8 var t = this, mouse = {}; 9 10 t.url = url; 11 t.editor = ed; 12 t._createButtons(); 13 14 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); 15 ed.addCommand('WP_EditImage', function() { 16 var el = ed.selection.getNode(), vp, H, W, cls = ed.dom.getAttrib(el, 'class'); 17 18 if ( cls.indexOf('mceItem') != -1 || cls.indexOf('wpGallery') != -1 || el.nodeName != 'IMG' ) 19 return; 20 21 vp = tinymce.DOM.getViewPort(); 22 H = 680 < (vp.h - 70) ? 680 : vp.h - 70; 23 W = 650 < vp.w ? 650 : vp.w; 24 25 ed.windowManager.open({ 26 file: url + '/editimage.html', 27 width: W+'px', 28 height: H+'px', 29 inline: true 30 }); 31 }); 32 33 ed.onInit.add(function(ed) { 34 ed.dom.events.add(ed.getBody(), 'dragstart', function(e) { 35 var parent; 36 37 if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) { 38 ed.selection.select(parent); 39 } 40 }); 41 }); 42 43 // resize the caption <dl> when the image is soft-resized by the user (only possible in Firefox and IE) 44 ed.onMouseUp.add(function(ed, e) { 45 if ( tinymce.isWebKit || tinymce.isOpera ) 46 return; 47 48 if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) { 49 var n = ed.selection.getNode(); 50 51 if ( 'IMG' == n.nodeName ) { 52 window.setTimeout(function(){ 53 var DL = ed.dom.getParent(n, 'dl.wp-caption'), width; 54 55 if ( n.width != mouse.img_w || n.height != mouse.img_h ) 56 n.className = n.className.replace(/size-[^ "']+/, ''); 57 58 if ( DL ) { 59 width = ed.dom.getAttrib(n, 'width') || n.width; 60 width = parseInt(width, 10); 61 ed.dom.setStyle(DL, 'width', 10 + width); 62 ed.execCommand('mceRepaint'); 63 } 64 }, 100); 65 } 66 } 67 mouse = {}; 68 }); 69 70 // show editimage buttons 71 ed.onMouseDown.add(function(ed, e) { 72 var target = e.target; 73 74 if ( target.nodeName != 'IMG' ) { 75 if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) 76 target = target.firstChild; 77 else 78 return; 79 } 80 81 if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) { 82 mouse = { 83 x: e.clientX, 84 y: e.clientY, 85 img_w: target.clientWidth, 86 img_h: target.clientHeight 87 }; 88 89 ed.plugins.wordpress._showButtons(target, 'wp_editbtns'); 90 } 91 }); 92 93 // when pressing Return inside a caption move the caret to a new parapraph under it 94 ed.onKeyPress.add(function(ed, e) { 95 var n, DL, DIV, P; 96 97 if ( e.keyCode == 13 ) { 98 n = ed.selection.getNode(); 99 DL = ed.dom.getParent(n, 'dl.wp-caption'); 100 101 if ( DL ) 102 DIV = ed.dom.getParent(DL, 'div.mceTemp'); 103 104 if ( DIV ) { 105 P = ed.dom.create('p', {}, '<br>'); 106 ed.dom.insertAfter( P, DIV ); 107 ed.selection.select(P.firstChild); 108 109 if ( tinymce.isIE ) { 110 ed.selection.setContent(''); 111 } else { 112 ed.selection.setContent('<br _moz_dirty="">'); 113 ed.selection.setCursorLocation(P, 0); 114 } 115 116 ed.dom.events.cancel(e); 117 return false; 118 } 119 } 120 }); 121 122 ed.onBeforeSetContent.add(function(ed, o) { 123 o.content = ed.wpSetImgCaption(o.content); 124 }); 125 126 ed.onPostProcess.add(function(ed, o) { 127 if (o.get) 128 o.content = ed.wpGetImgCaption(o.content); 129 }); 130 131 ed.wpSetImgCaption = function(content) { 132 return t._do_shcode(content); 133 }; 134 135 ed.wpGetImgCaption = function(content) { 136 return t._get_shcode(content); 137 }; 138 }, 139 140 _do_shcode : function(content) { 141 return content.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function(a,b,c){ 142 var id, cls, w, cap, div_cls, img, trim = tinymce.trim; 143 144 id = b.match(/id=['"]([^'"]*)['"] ?/); 145 if ( id ) 146 b = b.replace(id[0], ''); 147 148 cls = b.match(/align=['"]([^'"]*)['"] ?/); 149 if ( cls ) 150 b = b.replace(cls[0], ''); 151 152 w = b.match(/width=['"]([0-9]*)['"] ?/); 153 if ( w ) 154 b = b.replace(w[0], ''); 155 156 c = trim(c); 157 img = c.match(/((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i); 158 159 if ( img && img[2] ) { 160 cap = trim( img[2] ); 161 img = trim( img[1] ); 162 } else { 163 // old captions shortcode style 164 cap = trim(b).replace(/caption=['"]/, '').replace(/['"]$/, ''); 165 img = c; 166 } 167 168 id = ( id && id[1] ) ? id[1] : ''; 169 cls = ( cls && cls[1] ) ? cls[1] : 'alignnone'; 170 w = ( w && w[1] ) ? w[1] : ''; 171 172 if ( !w || !cap ) 173 return c; 174 175 div_cls = 'mceTemp'; 176 if ( cls == 'aligncenter' ) 177 div_cls += ' mceIEcenter'; 178 179 return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+( 10 + parseInt(w) )+ 180 'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>'; 181 }); 182 }, 183 184 _get_shcode : function(content) { 185 return content.replace(/<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function(a, b){ 186 var ret = b.replace(/<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function(a,b,c,cap){ 187 var id, cls, w; 188 189 w = c.match(/width="([0-9]*)"/); 190 w = ( w && w[1] ) ? w[1] : ''; 191 192 if ( !w || !cap ) 193 return c; 194 195 id = b.match(/id="([^"]*)"/); 196 id = ( id && id[1] ) ? id[1] : ''; 197 198 cls = b.match(/class="([^"]*)"/); 199 cls = ( cls && cls[1] ) ? cls[1] : ''; 200 cls = cls.match(/align[a-z]+/) || 'alignnone'; 201 202 cap = cap.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){ 203 // no line breaks inside HTML tags 204 return a.replace(/[\r\n\t]+/, ' '); 205 }); 206 207 // convert remaining line breaks to <br> 208 cap = cap.replace(/\s*\n\s*/g, '<br />'); 209 210 return '[caption id="'+id+'" align="'+cls+'" width="'+w+'"]'+c+' '+cap+'[/caption]'; 211 }); 212 213 if ( ret.indexOf('[caption') !== 0 ) { 214 // the caption html seems brocken, try to find the image that may be wrapped in a link 215 // and may be followed by <p> with the caption text. 216 ret = b.replace(/[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2'); 217 } 218 219 return ret; 220 }); 221 }, 222 223 _createButtons : function() { 224 var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton; 225 226 DOM.remove('wp_editbtns'); 227 228 DOM.add(document.body, 'div', { 229 id : 'wp_editbtns', 230 style : 'display:none;' 231 }); 232 233 editButton = DOM.add('wp_editbtns', 'img', { 234 src : t.url+'/img/image.png', 235 id : 'wp_editimgbtn', 236 width : '24', 237 height : '24', 238 title : ed.getLang('wpeditimage.edit_img') 239 }); 240 241 tinymce.dom.Event.add(editButton, 'mousedown', function(e) { 242 var ed = tinyMCE.activeEditor; 243 ed.windowManager.bookmark = ed.selection.getBookmark('simple'); 244 ed.execCommand("WP_EditImage"); 245 }); 246 247 dellButton = DOM.add('wp_editbtns', 'img', { 248 src : t.url+'/img/delete.png', 249 id : 'wp_delimgbtn', 250 width : '24', 251 height : '24', 252 title : ed.getLang('wpeditimage.del_img') 253 }); 254 255 tinymce.dom.Event.add(dellButton, 'mousedown', function(e) { 256 var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p; 257 258 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) { 259 if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') ) 260 ed.dom.remove(p); 261 else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 ) 262 ed.dom.remove(p); 263 else 264 ed.dom.remove(el); 265 266 ed.execCommand('mceRepaint'); 267 return false; 268 } 269 }); 270 }, 271 272 getInfo : function() { 273 return { 274 longname : 'Edit Image', 275 author : 'WordPress', 276 authorurl : 'http://wordpress.org', 277 infourl : '', 278 version : "1.0" 279 }; 280 } 281 }); 282 283 tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage); 284})();