主题: [教學]圖片加上位置的屬性 |
作者: chino, 发布日期: 2009-08-21 14:31:22, 浏览数: 4562 |
我是直接加在kindeditor.js,而且改成繁體的 使用v3.2.1 貼出來看的懂就用吧,幾個地方有局部修改 1.在htmlTags img: 加上align 2.修改下面這段的代碼加上align的設置 KE.plugin['image'] = { click : function(id) { KE.util.selection(id); var dialog = new KE.dialog({ id : id, cmd : 'image', width : 310, height : 90, title : KE.lang['image'], yesButton : KE.lang['yes'], noButton : KE.lang['no'] }); dialog.show(); }, check : function(id) { var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog); var type = KE.$('type', dialogDoc).value; var url = ''; if (type == 1) { url = KE.$('imgFile', dialogDoc).value; } else { url = KE.$('url', dialogDoc).value; } var width = KE.$('imgWidth', dialogDoc).value; var height = KE.$('imgHeight', dialogDoc).value; var border = KE.$('imgBorder', dialogDoc).value; var Align = KE.$('imgAlign', dialogDoc).value; //本行增加 if (!url.match(/\.(jpg|jpeg|gif|bmp|png)(\s|$)/i)) { alert(KE.lang['invalidImg']); window.focus(); KE.g[id].yesButton.focus(); return false; } if (width.match(/^\d+$/) == null) { alert(KE.lang['invalidWidth']); window.focus(); KE.g[id].yesButton.focus(); return false; } if (height.match(/^\d+$/) == null) { alert(KE.lang['invalidHeight']); window.focus(); KE.g[id].yesButton.focus(); return false; } if (border.match(/^\d+$/) == null) { alert(KE.lang['invalidBorder']); window.focus(); KE.g[id].yesButton.focus(); return false; } return true; }, exec : function(id) { KE.util.select(id); var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog); var type = KE.$('type', dialogDoc).value; if (!this.check(id)) return false; if (type == 1) { KE.$('editorId', dialogDoc).value = id; dialogDoc.uploadForm.submit(); return false; } else { var url = KE.$('url', dialogDoc).value; var title = KE.$('imgTitle', dialogDoc).value; var width = KE.$('imgWidth', dialogDoc).value; var height = KE.$('imgHeight', dialogDoc).value; var border = KE.$('imgBorder', dialogDoc).value; var Align = KE.$('imgAlign', dialogDoc).value; //本行增加 this.insert(id, url, title, width, height, border,Align); //本行修改 } }, insert : function(id, url, title, width, height, border,Align) { //本行修改 var html = '<img src="' + url + '" '; if (width > 0) html += 'width="' + width + '" '; if (height > 0) html += 'height="' + height + '" '; if (title) html += 'title="' + title + '" '; if (Align) html += 'align="' + Align + '" '; //本行增加 html += 'alt="' + title + '" '; html += 'border="' + border + '" />'; KE.util.insertHtml(id, html); KE.layout.hide(id); KE.util.focus(id); } }; 應該直接蓋掉這段就可以 然後再修改plugins/image.html 我取中間一段,你自己對照一下 <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="left1"> <select id="type" name="type" /> <option value="1" selected="selected">本機</option> <option value="2">遠端</option> </select> </td> <td class="right1"> <input type="file" id="imgFile" name="imgFile" style="width:220px;" /> <input type="text" id="url" name="url" value="http://" maxlength="255" style="width:220px;display:none;" /> </td> </tr> <tr> <td class="left1">說明:</td> <td class="right1"> <input type="text" id="imgTitle" name="imgTitle" value="" maxlength="100" style="width:120px;" /> <select id="imgAlign" name="imgAlign" style="width:100px;"> <option value="">圖片位置</option> <option value="baseline">基線對齊</option> <option value="top">居上</option> <option value="middle">居中</option> <option value="bottom">居下</option> <option value="texttop">文字上方</option> <option value="absmiddle">絕對居中</option> <option value="absbottom">絕對居下</option> <option value="left">居左圖文環繞</option> <option value="right">居右圖文環繞</option> </select> </td> </tr> </table>
如果你是用php 那要再改upload.php 主要是加上imgAlign,取代下面這個即可 echo '<script type="text/javascript">parent.KE.plugin["image"].insert("' . $_POST['id'] . '", "' . $file_url . '","' . $_POST['imgTitle'] . '","' . $_POST['imgWidth'] . '","' . $_POST['imgHeight'] . '","' . $_POST['imgBorder'] . '","' . $_POST['imgAlign'] . '");</script>';
以上改完就能用了 |
作者: Roddy, 发布日期: 2009-08-21 16:54:21 |
不错
|
回复 |
作者: 若海, 发布日期: 2009-08-28 08:47:37 |
还是建议自己扩展为自己的插件,最好不要动原js文件
|
回复 |