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 })();