KindEditor编辑器——在上传图片中选一张为焦点图片

一、序言

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

posted @ 2012-05-11 18:00 WebApi 阅读(3151) 评论(1) 编辑收藏举报

刷新页面返回顶部

KindEditor编辑器——在上传图片中选一张为焦点图片

公告