一、序言
kindeditor編輯器，一款很漂亮的編輯器，官方地址：http://www.kindsoft.net/，雖然很漂亮，但是還不是很成熟，業余時間簡單使用了一下，發現缺少很多功能，例如我需要獲得所有上傳的圖片地址，並且在圖片中選一張圖片作為焦點圖片，則需要自己動手去寫，在QQ群中有好多人需要此功能，今天快下班了，發布一下自己寫的一些代碼來實現此功能。
二、效果展示
1、上傳圖片前
2、上傳圖片后
三、使用代碼
1、html代碼
<html> <head> <title>KindEditor編輯器——在上傳圖片中選一張為焦點圖片</title> <script src="kindeditor_4.0.5_min.js"></script> <script src="lang_zh.js"></script> <script src="edit_set.js"></script> <script type="text/javascript"> var editor; KindEditor.ready(function(K) { editor = K.create('#editHtml', { width:'580px', height:'300px', resizeType : 1, filterMode:true, allowImageUpload : true, uploadJson : '/edit_html/asp.net/upload_pic.ashx', afterChange:function(){createPicList(this.html());}, items : [ 'source','|','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'image', 'link','unlink','fullscreen'] }); }); </script> </head> <body> <table> <tr> <td class="lyTxtRight"> 詳細內容：</td> <td class="nobordertd edit"> <!--editor begin--> <asp:TextBox ID="editHtml" runat="server"></asp:TextBox> <input type="hidden" id="editAllPic" name="editAllPic" value="" /> <input type="hidden" id="editShowPic" name="editShowPic" value="" /> <!--editor end--> </td> </tr> <tr> <td class="lyTxtRight"> 首頁展示圖片：</td> <td> <div id="picList"> 暫無圖片(從上傳圖片中選擇首頁要展示的圖片)</div> </td> </tr> </table> </body> </html>
說明：
1、kindeditor_4.0.5_min.js是編輯器配置js
2、lang_zh.js是編輯器語言js
3、edit_set.js是在上傳圖片中選一張為焦點圖片，我自己寫的
4、ID="editAllPic"的input保存所有的圖片地址，用|分割
5、ID="editShowPic"的input保存一張選中的焦點圖片地址
2、edit_set.js代碼
window.onerror=function(){ return true; } function getID(objId) { return document.getElementById(objId); } function selectShowPic(obj) { getID("editShowPic").value=obj.value; } //editor onchange function createPicList(editValue) { var reg=new RegExp("img[^>]*src=\"([^\"].*?)\"","ig"); if(reg.test(editValue)) { reg=new RegExp("img[^>]*src=\"([^\"].*?)\"","ig"); html="<table style='background-color: #F7FAFF;border:1px solid #D3E7F6;'>"; var i=0; var allPic=""; while(reg.exec(editValue)!=null) { b=RegExp.$1; if(i%7==0) { html+="<tr>"; } html+="<td><input value='"+b+"' type=radio name='mrtp' onclick='selectShowPic(this);' ><img src="+b+" style='width:50px;height:50px;'></td>"; if(i%7==6) { html+="</tr>"; } i++; if(i==1) { allPic=b; }else{ allPic=allPic+"|"+b; } } if(i%7!=6) {html+="</tr>";} html+="</table>"; if(getID("editAllPic")) { if(getID("editAllPic").value!=allPic) { getID("editAllPic").value=allPic; if(getID("picList")) { getID("picList").innerHTML=html; } } } if(getID("editShowPic")) { var obj=document.getElementsByName("mrtp"); var showpic=getID("editShowPic").value; var ischecked=false; if(showpic!="") { for(var i=0;i<obj.length;i++) { if(obj[i].value==showpic) { obj[i].checked=true; getID("editShowPic").value=obj[i].value; ischecked=true; break; } } } if(obj.length>0 && !ischecked) { obj[0].checked=true; getID("editShowPic").value=obj[0].value; } } }else{
if(getID("editAllPic"))
{
getID("editAllPic").value="";
}
if(getID("editShowPic"))
{
getID("editShowPic").value="";
}
getID("picList").innerHTML="暫無圖片";
}
}
3、default.aspx.cs代碼
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //修改內容時，從數據庫讀取數據，我簡單寫一下就ok //編輯器內容 //string con = "測試代碼，謝謝<img alt=\"\" src=\"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png\" /><img alt=\"\" src=\"http://www.baidu.com/img/baidu_sylogo1.gif\" />"; //上傳的所有的圖片 //string allpic = "http://www.google.com.hk/intl/zh-CN/images/logo_cn.png|http://www.baidu.com/img/baidu_sylogo1.gif"; //一張焦點圖片 //string showpic = "http://www.baidu.com/img/baidu_sylogo1.gif"; //editHtml.Text = con; //執行客戶端腳本 //ExecScript("setEditorPic(\"" + allpic + "\",\"" + showpic + "\");"); } } protected void btnSubmit_Click(object sender, EventArgs e) { string con = editHtml.Text; //編輯器內容 string allPic = Request.Form["editAllPic"]; //上傳所有的圖片，用|分開 string showPic = Request.Form["editShowPic"]; //首頁展示的圖片 Response.Write(con + "-------" + allPic + "--------" + showPic); //<hr style="page-break-after:always;" class="ke-pagebreak" /> //分頁符，經測試，兼容瀏覽器 } /// <summary> /// 執行客戶端腳本 /// </summary> /// <param name="script"></param> public void ExecScript(string str) { ((System.Web.UI.Page)System.Web.HttpContext.Current.Handler).ClientScript.RegisterStartupScript(((System.Web.UI.Page)System.Web.HttpContext.Current.Handler).GetType(), "script", str, true); } }
四、后記
已修復bug，可以完美使用，批量上傳圖片也支持，刪除圖片時自動修改圖片列表
