http://zentaoms.googlecode.com/svn/trunk/www/js/jquery/kindeditor/plugins/image/image.html@1059
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Image</title> <style type="text/css" rel="stylesheet"> body { margin: 0; font:12px/1.5 "sans serif",tahoma,verdana,helvetica; background-color:#F0F0EE; color:#222222; overflow:hidden; } form { margin:0; } label { cursor:pointer; } #resetBtn { margin-left:10px; cursor:pointer; } .main { margin: 0 10px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .tab-navi { width:98%; border-bottom:1px solid #A0A0A0; padding-left:5px; margin-bottom:10px; } .tab-navi ul { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; } .tab-navi li { position: relative; border: 1px solid #A0A0A0; background-color: #E0E0E0; margin: 0 2px -1px 0; padding: 0 20px; float: left; line-height: 25px; text-align: center; color: #555555; cursor: pointer; } .tab-navi li.selected { background-color: #F0F0EE; border-bottom: 1px solid #F0F0EE; color: #000000; cursor: default; } .tab-navi li.on { background-color: #F0F0EE; color: #000000; } .table { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; display:block; } .table li { padding:0; margin-bottom:10px; display:list-item; } .table li label { font-weight:bold; } .table li input { vertical-align:middle; } .table li img { vertical-align:middle; } </style> <script type="text/javascript"> var KE = parent.KindEditor; location.href.match(/\?id=([\w-]+)/i); var id = RegExp.$1; var fileManager = null; var allowUpload = (typeof KE.g[id].allowUpload == 'undefined') ? true : KE.g[id].allowUpload; var allowFileManager = (typeof KE.g[id].allowFileManager == 'undefined') ? false : KE.g[id].allowFileManager; var referMethod = (typeof KE.g[id].referMethod == 'undefined') ? '' : KE.g[id].referMethod; var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson; var lang = KE.lang.plugins.image; KE.event.ready(function() { var typeBox = KE.$('type', document); var urlBox = KE.$('url', document); var alignElements = document.getElementsByName('align'); var fileBox = KE.$('imgFile', document); var widthBox = KE.$('imgWidth', document); var heightBox = KE.$('imgHeight', document); var titleBox = KE.$('imgTitle', document); var resetBtn = KE.$('resetBtn', document); var tabNavi = KE.$('tabNavi', document); var defaultImg = KE.$('defaultImg', document); var leftImg = KE.$('leftImg', document); var rightImg = KE.$('rightImg', document); var viewServer = KE.$('viewServer', document); var liList = tabNavi.getElementsByTagName('li'); var selectTab = function(num) { if (num == 1) resetBtn.style.display = 'none'; else resetBtn.style.display = ''; widthBox.value = ''; heightBox.value = ''; titleBox.value = ''; alignElements[0].checked = true; for (var i = 0, len = liList.length; i < len; i++) { var li = liList[i]; if (i === num) { li.className = 'selected'; li.onclick = null; } else { if (allowUpload) { li.className = ''; li.onmouseover = function() { KE.addClass(this, 'on'); }; li.onmouseout = function() { KE.removeClass(this, 'on'); }; li.onclick = (function (i) { return function() { if (!fileManager) selectTab(i); }; })(i); } else { li.parentNode.removeChild(li); } } KE.$('tab' + (i + 1), document).style.display = 'none'; } typeBox.value = num + 1; KE.$('tab' + (num + 1), document).style.display = ''; } if (!allowFileManager) { viewServer.parentNode.removeChild(viewServer); urlBox.style.width = '300px'; } selectTab(0); var imgNode = KE.plugin['image'].getSelectedNode(id); if (imgNode) { var tempDiv = KE.$$('div', KE.g[id].iframeDoc); tempDiv.appendChild(imgNode.cloneNode(false)); var imgHtml = tempDiv.innerHTML; var src = imgNode.src; if (imgHtml.match(/kesrc="([^"]+)"/i)) src = RegExp.$1; urlBox.value = src; widthBox.value = imgNode.width; heightBox.value = imgNode.height; titleBox.value = (typeof imgNode.alt != 'undefined') ? imgNode.alt : imgNode.title; for (var i = 0, len = alignElements.length; i < len; i++) { if (alignElements[i].value == imgNode.align) { alignElements[i].checked = true; break; } } } KE.event.add(viewServer, 'click', function () { if (fileManager) return false; fileManager = new KE.dialog({ id : id, cmd : 'file_manager', file : 'file_manager/file_manager.html?id=' + id + '&ver=' + KE.version, width : 500, height : 400, loadingMode : true, title : KE.lang.fileManager, noButton : KE.lang.no, afterHide : function() { fileManager = null; } }); fileManager.show(); }); KE.$('uploadForm', document).action = imageUploadJson; KE.$('referMethod', document).value = referMethod; var alignIds = ['default', 'left', 'right']; for (var i = 0, len = alignIds.length; i < len; i++) { KE.event.add(KE.$(alignIds[i] + 'Img', document), 'click', (function(i) { return function() { KE.$(alignIds[i] + 'Chk', document).checked = true; }; })(i)); } KE.event.add(resetBtn, 'click', function() { var g = KE.g[id]; var img = KE.$$('img', g.iframeDoc); img.src = urlBox.value; img.style.position = 'absolute'; img.style.visibility = 'hidden'; img.style.top = '0px'; img.style.left = '1000px'; g.iframeDoc.body.appendChild(img); widthBox.value = img.width; heightBox.value = img.height; g.iframeDoc.body.removeChild(img); }); KE.util.pluginLang('image', document); viewServer.value = lang.viewServer; resetBtn.alt = resetBtn.title = lang.resetSize; defaultImg.alt = defaultImg.title = lang.defaultAlign; leftImg.alt = leftImg.title = lang.leftAlign; rightImg.alt = rightImg.title = lang.rightAlign; KE.util.hideLoadingPage(id); }, window, document); </script> </head> <body> <div class="main"> <div id="tabNavi" class="tab-navi"> <ul class="clearfix"> <li><span id="lang.remoteImage"></span></li> <li><span id="lang.localImage"></span></li> </ul> </div> <iframe name="uploadIframe" id="uploadIframe" style="display:none;"></iframe> <input type="hidden" id="type" name="type" value="" /> <form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data" target="uploadIframe"> <input type="hidden" id="editorId" name="id" value="" /> <input type="hidden" id="referMethod" name="referMethod" value="" /> <input type="hidden" name="imgBorder" value="0" /> <ul class="table"> <li> <div id="tab1" style="display:none;"> <label for="url"><span id="lang.remoteUrl"></span></label>&nbsp; <input type="text" id="url" name="url" value="http://" maxlength="255" style="width:230px;" /> <input type="button" id="viewServer" name="viewServer" value="" /> </div> <div id="tab2" style="display:none;"> <label for="imgFile"><span id="lang.localUrl"></span></label>&nbsp; <input type="file" id="imgFile" name="imgFile" style="width:300px;" /> </div> </li> <li> <label for="imgWidth"><span id="lang.size"></span></label>&nbsp; <span id="lang.width"></span> <input type="text" id="imgWidth" name="imgWidth" value="" maxlength="4" style="width:50px;text-align:right;" /> <span id="lang.height"></span> <input type="text" id="imgHeight" name="imgHeight" value="" maxlength="4" style="width:50px;text-align:right;" /> <img src="./images/refresh.gif" width="16" height="16" id="resetBtn" alt="" title="" /> </li> <li> <label><span id="lang.align"></span></label>&nbsp; <input type="radio" id="defaultChk" name="align" value="" checked="checked" /> <img id="defaultImg" src="./images/align_top.gif" width="23" height="25" border="0" alt="" title="" /> <input type="radio" id="leftChk" name="align" value="left" /> <img id="leftImg" src="./images/align_left.gif" width="23" height="25" border="0" alt="" title="" /> <input type="radio" id="rightChk" name="align" value="right" /> <img id="rightImg" src="./images/align_right.gif" width="23" height="25" border="0" alt="" title="" /> </li> <li> <label for="imgTitle"><span id="lang.imgTitle"></span></label> <input type="text" id="imgTitle" name="imgTitle" value="" maxlength="255" style="width:95%;" /> </li> </ul> </form> </div> </body> </html>