wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js

   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                                 b = b.replace(id[0], '');
 146
 147                                 cls = b.match(/align=['"]([^'"]*)['"] ?/);
 148                                 b = b.replace(cls[0], '');
 149
 150                                 w = b.match(/width=['"]([0-9]*)['"] ?/);
 151                                 b = b.replace(w[0], '');
 152
 153                                 c = trim(c);
 154                                 img = c.match(/((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i);
 155
 156                                 if ( img && img[2] ) {
 157                                         cap = trim( img[2] );
 158                                         img = trim( img[1] );
 159                                 } else {
 160                                         // old captions shortcode style
 161                                         cap = trim(b).replace(/caption=['"]/, '').replace(/['"]$/, '');
 162                                         img = c;
 163                                 }
 164
 165                                 id = ( id && id[1] ) ? id[1] : '';
 166                                 cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
 167                                 w = ( w && w[1] ) ? w[1] : '';
 168
 169                                 if ( !w || !cap )
 170                                         return c;
 171
 172                                 div_cls = 'mceTemp';
 173                                 if ( cls == 'aligncenter' )
 174                                         div_cls += ' mceIEcenter';
 175
 176                                 return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+( 10 + parseInt(w) )+
 177                                 'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';
 178                         });
 179                 },
 180
 181                 _get_shcode : function(content) {
 182                         return content.replace(/<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function(a, b){
 183                                 var ret = b.replace(/<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function(a,b,c,cap){
 184                                         var id, cls, w;
 185
 186                                         w = c.match(/width="([0-9]*)"/);
 187                                         w = ( w && w[1] ) ? w[1] : '';
 188
 189                                         if ( !w || !cap )
 190                                                 return c;
 191
 192                                         id = b.match(/id="([^"]*)"/);
 193                                         id = ( id && id[1] ) ? id[1] : '';
 194
 195                                         cls = b.match(/class="([^"]*)"/);
 196                                         cls = ( cls && cls[1] ) ? cls[1] : '';
 197                                         cls = cls.match(/align[a-z]+/) || 'alignnone';
 198
 199                                         cap = cap.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){
 200                                                 // no line breaks inside HTML tags
 201                                                 return a.replace(/[\r\n\t]+/, ' ');
 202                                         });
 203
 204                                         // convert remaining line breaks to <br>
 205                                         cap = cap.replace(/\s*\n\s*/g, '<br />');
 206
 207                                         return '[caption id="'+id+'" align="'+cls+'" width="'+w+'"]'+c+' '+cap+'[/caption]';
 208                                 });
 209
 210                                 if ( ret.indexOf('[caption') !== 0 ) {
 211                                         // the caption html seems brocken, try to find the image that may be wrapped in a link
 212                                         // and may be followed by <p> with the caption text.
 213                                         ret = b.replace(/[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2');
 214                                 }
 215
 216                                 return ret;
 217                         });
 218                 },
 219
 220                 _createButtons : function() {
 221                         var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
 222
 223                         DOM.remove('wp_editbtns');
 224
 225                         DOM.add(document.body, 'div', {
 226                                 id : 'wp_editbtns',
 227                                 style : 'display:none;'
 228                         });
 229
 230                         editButton = DOM.add('wp_editbtns', 'img', {
 231                                 src : t.url+'/img/image.png',
 232                                 id : 'wp_editimgbtn',
 233                                 width : '24',
 234                                 height : '24',
 235                                 title : ed.getLang('wpeditimage.edit_img')
 236                         });
 237
 238                         tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
 239                                 var ed = tinyMCE.activeEditor;
 240                                 ed.windowManager.bookmark = ed.selection.getBookmark('simple');
 241                                 ed.execCommand("WP_EditImage");
 242                         });
 243
 244                         dellButton = DOM.add('wp_editbtns', 'img', {
 245                                 src : t.url+'/img/delete.png',
 246                                 id : 'wp_delimgbtn',
 247                                 width : '24',
 248                                 height : '24',
 249                                 title : ed.getLang('wpeditimage.del_img')
 250                         });
 251
 252                         tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
 253                                 var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p;
 254
 255                                 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
 256                                         if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') )
 257                                                 ed.dom.remove(p);
 258                                         else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 )
 259                                                 ed.dom.remove(p);
 260                                         else
 261                                                 ed.dom.remove(el);
 262
 263                                         ed.execCommand('mceRepaint');
 264                                         return false;
 265                                 }
 266                         });
 267                 },
 268
 269                 getInfo : function() {
 270                         return {
 271                                 longname : 'Edit Image',
 272                                 author : 'WordPress',
 273                                 authorurl : 'http://wordpress.org',
 274                                 infourl : '',
 275                                 version : "1.0"
 276                         };
 277                 }
 278         });
 279
 280         tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage);
 281 })();