一、序言
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', { '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='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，可以完美使用，批量上传图片也支持，删除图片时自动修改图片列表
