[Summary view] [Print] [Text view]

   1  
   2  (function() {
   3      tinymce.create('tinymce.plugins.wpEditImage', {
   4  
   5          init : function(ed, url) {
   6              var t = this;
   7  
   8              t.url = url;
   9              t._createButtons();
  10  
  11              // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
  12              ed.addCommand('WP_EditImage', function() {
  13                  var el = ed.selection.getNode(), vp = tinymce.DOM.getViewPort(), H = vp.h, W = ( 720 < vp.w ) ? 720 : vp.w, cls = ed.dom.getAttrib(el, 'class');
  14  
  15                  if ( cls.indexOf('mceItem') != -1 || cls.indexOf('wpGallery') != -1 || el.nodeName != 'IMG' )
  16                      return;
  17  
  18                  tb_show('', url + '/editimage.html?ver=321&TB_iframe=true');
  19                  tinymce.DOM.setStyles('TB_window', {
  20                      'width':( W - 50 )+'px',
  21                      'height':( H - 45 )+'px',
  22                      'margin-left':'-'+parseInt((( W - 50 ) / 2),10) + 'px'
  23                  });
  24  
  25                  if ( ! tinymce.isIE6 ) {
  26                      tinymce.DOM.setStyles('TB_window', {
  27                          'top':'20px',
  28                          'marginTop':'0'
  29                      });
  30                  }
  31  
  32                  tinymce.DOM.setStyles('TB_iframeContent', {
  33                      'width':( W - 50 )+'px',
  34                      'height':( H - 75 )+'px'
  35                  });
  36                  tinymce.DOM.setStyle( ['TB_overlay','TB_window','TB_load'], 'z-index', '999999' );
  37              });
  38  
  39              ed.onInit.add(function(ed) {
  40                  tinymce.dom.Event.add(ed.getBody(), 'dragstart', function(e) {
  41                      if ( !tinymce.isGecko && e.target.nodeName == 'IMG' && ed.dom.getParent(e.target, 'dl.wp-caption') )
  42                          return tinymce.dom.Event.cancel(e);
  43                  });
  44              });
  45  
  46              ed.onMouseUp.add(function(ed, e) {
  47                  if ( tinymce.isWebKit || tinymce.isOpera )
  48                      return;
  49  
  50                  if ( ed.dom.getParent(e.target, 'div.mceTemp') || ed.dom.is(e.target, 'div.mceTemp') ) {                    
  51                      window.setTimeout(function(){
  52                          var ed = tinyMCE.activeEditor, n = ed.selection.getNode(), DL = ed.dom.getParent(n, 'dl.wp-caption');
  53  
  54                          if ( DL && n.width != ( parseInt(ed.dom.getStyle(DL, 'width'), 10) - 10 ) ) {
  55                              ed.dom.setStyle(DL, 'width', parseInt(n.width, 10) + 10);
  56                              ed.execCommand('mceRepaint');
  57                          }
  58                      }, 100);
  59                  }
  60              });
  61  
  62              ed.onMouseDown.add(function(ed, e) {
  63                  var p;
  64  
  65                  if ( e.target.nodeName == 'IMG' && ed.dom.getAttrib(e.target, 'class').indexOf('mceItem') == -1 ) {
  66                      ed.plugins.wordpress._showButtons(e.target, 'wp_editbtns');
  67                      if ( tinymce.isGecko && (p = ed.dom.getParent(e.target, 'dl.wp-caption')) && ed.dom.hasClass(p.parentNode, 'mceTemp') )
  68                          ed.selection.select(p.parentNode);
  69                  }
  70              });
  71  
  72              ed.onKeyPress.add(function(ed, e) {
  73                  var DL, DIV, P;
  74  
  75                  if ( e.keyCode == 13 && (DL = ed.dom.getParent(ed.selection.getNode(), 'DL')) && ed.dom.hasClass(DL, 'wp-caption') ) {
  76                      P = ed.dom.create('p', {}, '&nbsp;');
  77                      if ( (DIV = DL.parentNode) && DIV.nodeName == 'DIV' ) 
  78                          ed.dom.insertAfter( P, DIV );
  79                      else
  80                          ed.dom.insertAfter( P, DL );
  81  
  82                      if ( P.firstChild )
  83                          ed.selection.select(P.firstChild);
  84                      else
  85                          ed.selection.select(P);
  86  
  87                      tinymce.dom.Event.cancel(e);
  88                      return false;
  89                  }
  90              });
  91  
  92              ed.onBeforeSetContent.add(function(ed, o) {
  93                  o.content = t._do_shcode(o.content);
  94              });
  95  
  96              ed.onPostProcess.add(function(ed, o) {
  97                  if (o.get)
  98                      o.content = t._get_shcode(o.content);
  99              });
 100          },
 101  
 102          _do_shcode : function(co) {
 103              return co.replace(/\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\][\s\u00a0]*/g, function(a,b,c){
 104                  var id, cls, w, cap, div_cls;
 105                  
 106                  b = b.replace(/\\'|\\&#39;|\\&#039;/g, '&#39;').replace(/\\"|\\&quot;/g, '&quot;');
 107                  c = c.replace(/\\&#39;|\\&#039;/g, '&#39;').replace(/\\&quot;/g, '&quot;');
 108                  id = b.match(/id=['"]([^'"]+)/i);
 109                  cls = b.match(/align=['"]([^'"]+)/i);
 110                  w = b.match(/width=['"]([0-9]+)/);
 111                  cap = b.match(/caption=['"]([^'"]+)/i);
 112  
 113                  id = ( id && id[1] ) ? id[1] : '';
 114                  cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
 115                  w = ( w && w[1] ) ? w[1] : '';
 116                  cap = ( cap && cap[1] ) ? cap[1] : '';
 117                  if ( ! w || ! cap ) return c;
 118                  
 119                  div_cls = (cls == 'aligncenter') ? 'mceTemp mceIEcenter' : 'mceTemp';
 120  
 121                  return '<div class="'+div_cls+'" draggable><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+(10+parseInt(w))+
 122                  'px"><dt class="wp-caption-dt">'+c+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';
 123              });
 124          },
 125  
 126          _get_shcode : function(co) {
 127              return co.replace(/<div class="mceTemp[^"]*">\s*<dl([^>]+)>\s*<dt[^>]+>([\s\S]+?)<\/dt>\s*<dd[^>]+>(.+?)<\/dd>\s*<\/dl>\s*<\/div>\s*/gi, function(a,b,c,cap){
 128                  var id, cls, w;
 129                  
 130                  id = b.match(/id=['"]([^'"]+)/i);
 131                  cls = b.match(/class=['"]([^'"]+)/i);
 132                  w = c.match(/width=['"]([0-9]+)/);
 133  
 134                  id = ( id && id[1] ) ? id[1] : '';
 135                  cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
 136                  w = ( w && w[1] ) ? w[1] : '';
 137  
 138                  if ( ! w || ! cap ) return c;
 139                  cls = cls.match(/align[^ '"]+/) || 'alignnone';
 140                  cap = cap.replace(/<\S[^<>]*>/gi, '').replace(/'/g, '&#39;').replace(/"/g, '&quot;');
 141  
 142                  return '[caption id="'+id+'" align="'+cls+'" width="'+w+'" caption="'+cap+'"]'+c+'[/caption]';
 143              });
 144          },
 145  
 146          _createButtons : function() {
 147              var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
 148  
 149              DOM.remove('wp_editbtns');
 150  
 151              DOM.add(document.body, 'div', {
 152                  id : 'wp_editbtns',
 153                  style : 'display:none;'
 154              });
 155  
 156              editButton = DOM.add('wp_editbtns', 'img', {
 157                  src : t.url+'/img/image.png',
 158                  id : 'wp_editimgbtn',
 159                  width : '24',
 160                  height : '24',
 161                  title : ed.getLang('wpeditimage.edit_img')
 162              });
 163  
 164              tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
 165                  var ed = tinyMCE.activeEditor;
 166                  ed.windowManager.bookmark = ed.selection.getBookmark('simple');
 167                  ed.execCommand("WP_EditImage");
 168              });
 169  
 170              dellButton = DOM.add('wp_editbtns', 'img', {
 171                  src : t.url+'/img/delete.png',
 172                  id : 'wp_delimgbtn',
 173                  width : '24',
 174                  height : '24',
 175                  title : ed.getLang('wpeditimage.del_img')
 176              });
 177  
 178              tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
 179                  var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p;
 180  
 181                  if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
 182                      if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') )
 183                          ed.dom.remove(p);
 184                      else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 )
 185                          ed.dom.remove(p);
 186                      else
 187                          ed.dom.remove(el);
 188  
 189                      ed.execCommand('mceRepaint');
 190                      return false;
 191                  }
 192              });
 193          },
 194  
 195          getInfo : function() {
 196              return {
 197                  longname : 'Edit Image',
 198                  author : 'WordPress',
 199                  authorurl : 'http://wordpress.org',
 200                  infourl : '',
 201                  version : "1.0"
 202              };
 203          }
 204      });
 205  
 206      tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage);
 207  })();