leanote/public/tinymce/plugins/leaui_image/plugin.js

/**
 * leaui album image manager plugin
 * copyright leaui
 * leaui.com
 */
var LEAUI_DATAS = [];
tinymce.PluginManager.add('leaui_image', function(editor, url) {
	//当url改变时, 得到图片的大小
	function getImageSize(url, callback) {
		var img = document.createElement('img');
	
		function done(width, height) {
			img.parentNode.removeChild(img);
			callback({width: width, height: height});
		}
	
		img.onload = function() {
			done(img.clientWidth, img.clientHeight);
		};
	
		img.onerror = function() {
			done();
		};
	
		img.src = url;
	
		var style = img.style;
		style.visibility = 'hidden';
		style.position = 'fixed';
		style.bottom = style.left = 0;
		style.width = style.height = 'auto';
	
		document.body.appendChild(img);
	}

	function showDialog() {
		var dom = editor.dom;

		var content = editor.selection.getContent();
		// get images and attrs
		var p = /<img.*?\/>/g;
		var images = content.match(p);
		var newNode = document.createElement("p");
		var datas = [];
		for(var i in images) {
			newNode.innerHTML = images[i];
			var imgElm = newNode.firstChild;
			if(imgElm && imgElm.nodeName == "IMG") {
				var data = {};
				data.src = dom.getAttrib(imgElm, 'data-src') || dom.getAttrib(imgElm, 'src');
				data.width = dom.getAttrib(imgElm, 'width');
				data.height = dom.getAttrib(imgElm, 'height');
				data.title = dom.getAttrib(imgElm, 'title');
				datas.push(data);
			}
		}
		LEAUI_DATAS = datas;

		function GetTheHtml(){
			var html = '<iframe id="leauiIfr" src="'+ url + '/index.html'+ '?' + new Date().getTime() + '" frameborder="0"></iframe>';
			return html;
		}
		
		win = editor.windowManager.open({
			title: "Manage Image",
			width : 885,
			height : 475,
			html: GetTheHtml(),
			buttons: [
				{
				text: 'Insert Image',
				subtype: 'primary',
				onclick: function(e) {
					var _iframe = document.getElementById('leauiIfr').contentWindow;
					var _div =_iframe.document.getElementById('preview');
					var ii = _div.childNodes; 
					//console.log(ii);
					var datas = [];
					for(var i = 0; i < ii.length; ++i) {
						var e = ii[i]; 
						//console.log(e);
						// 有些没有image
						if(e.firstChild && e.firstChild.nodeName == "IMG") {
							var img = e.firstChild;
							var d = {};
							d.src = img.getAttribute("src");
							d.width = img.getAttribute("data-width");
							d.height = img.getAttribute("data-height");
							d.title = img.getAttribute("data-title");

							datas.push(d); 
						}
					};

					for(var i in datas) {
						var data = datas[i];
						var src = data.src;
						// the network image
						var trueSrc;
						if(src.indexOf("http://") != -1 || src.indexOf("https://") != -1) {
							trueSrc = src;
						} else {
							trueSrc = url + "/" + src;
						}
						data.src = trueSrc;
						
						/*
						var width = "", height="", title="";
						if(data.width) {
							width = 'width="' + data.width +'" ';
						}
						if(data.height) {
							height = 'height="' + data.height +'" ';
						}
						if(data.title) {
							title = 'title="' + data.title +'" ';
						}
						var attrs = width + height + title;
						editor.insertContent('<img ' + attrs + ' data-src="' + src + '" src="' + trueSrc + '" />');
						*/
						
						// 这里, 如果图片宽度过大, 这里设置成500px
						var back = (function(data2, i) {
							var d = {};
							var imgElm;
							// 先显示loading...
							d.id = '__mcenew' + i;
							d.src = "http://leanote.com/images/loading-24.gif";
							imgElm = dom.createHTML('img', d);
							editor.insertContent(imgElm);
							imgElm = dom.get(d.id);
							log(imgElm)
							
							return function(wh) {
								if(wh && wh.width) {
									if(wh.width > 600) {
										wh.width = 600;
									}
									data2.width = wh.width;
								}
								dom.setAttrib(imgElm, 'src', data2.src);
								dom.setAttrib(imgElm, 'width', data2.width);
								dom.setAttrib(imgElm, 'title', data2.title);
								
								dom.setAttrib(imgElm, 'id', null);
							}
						})(data, i);
						getImageSize(data.src, back);
					}
					this.parent().parent().close();
				}
				},	
				{
				text: 'Cancel',
				onclick: function() {
					this.parent().parent().close();
				}
			}]
		});
	}
	
	editor.addButton('leaui_image', {
		icon: 'image',
		tooltip: 'Insert/edit image',
		onclick: showDialog,
		stateSelector: 'img:not([data-mce-object])'
	});

	editor.addMenuItem('leaui_image', {
		icon: 'image',
		text: 'Insert image',
		onclick: showDialog,
		context: 'insert',
		prependToContext: true
	});
	
	// 为解决在editor里拖动图片问题
	// 2014/7/8 21:43 浮躁的一天终有收获
    var dragStart = false;
    editor.on("dragstart", function(e) {
    	dragStart = true;
    });
    editor.on("dragend", function(e) {
    	dragStart = false;
    });
	editor.on("dragover", function(e) {
		if(!dragStart) {
    		$("body").trigger("dragover");
    	}
    });
});