利用kindeditor实现设为封面缩略图等功能ASP代码-it论坛

安哥网络 · 发表于 2013-12-21 15:48:30

利用kindeditor实现设为封面缩略图等功能ASP代码-it论坛
此例子是得用kindeditor完成的，这个编辑器下载的地方大家可以去百度一下就行了
上传的图片可以生成缩略图排列，点击图片可以插入到编辑器中，可以删除某个图片，删除的同时会从服务上一起删除

下面是源代码 it论坛

第一个添加页面呀

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.imgDiv { float:left; width:130px; height:110px; padding-top:10px; padding-left:5px; background:#ccc;}
.imgDiv img{ border:0px; width:120px; height:90px}
</style>
<link rel="stylesheet" href="editor/themes/default/default.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="editor/kindeditor.js"></script>
<script src="editor/lang/zh_CN.js"></script>
<script>
KindEditor.ready(function(K) {
var imgh="";
var imgurl="";
var editor = K.editor({
allowFileManager : true,
uploadJson : 'editor/asp/upload_json.asp'
});
K('#J_selectImage').click(function() {
editor.loadPlugin('multiimage', function() {
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var div = K('#J_imageView');
div.html('');
K.each(urlList, function(i, data) {
var j=document.getElementById('ImagePath').value;
if(j==""){
imgurl=data.url;
}
else{
imgurl=j+"|"+data.url;
}
$("#ImagePath").val(imgurl);
});
editor.hideDialog();
var array = imgurl.split("|");
var ids;
for (var s=0 ; s< array.length ; s++)
{
ids=array[s];
ids=ids.substr(ids.lastIndexOf("/")+1,ids.lastIndexOf("."));
ids=ids.replace(".","");
$('#J_imageView').append('<div class="imgDiv" id="'+ids+'"><a href="javascript:setContent(\'' + array[s] + '\')"><img title="点击图片将图片插入到编辑器" src="'+array[s] + '" width="120" height="90" border="0" /></a>
<label><input type="radio" name="IndexImageradio" onclick="setIndexImage(\''+array[s] +'\')" value="'+array[s] +'" />设为封面</label> <a href="javascript:dropThisDiv(\''+ids+'\',\''+array[s] +'\')">删除</a></div>');
}
}
});
});
});
});
//设置封面图片
function setIndexImage(Value)
{
$("#IcoImage").val(Value);
//$("#picView").html("<img id='img_view' src='"+t+"' width='160'/>");
}
//向编辑器插入图片
function setContent(Value)
{
if (Value != '' && Value != null) {
var valueimg='<img src="'+Value+'" />';
editor.insertHtml(''+valueimg+''); //利用kindeditor里的insertHtml方法向光标所在处添加html内容
}
}
//向编辑器插入分页标签
function SetEditorPage(Value)
{
if (Value != '' && Value != null) {
editor.insertHtml(''+Value+''); //利用kindeditor里的insertHtml方法向光标所在处添加html内容
}
}
//删除图片
function dropThisDiv(t,p)
{
document.getElementById(t).style.display='none'
var str =document.getElementById("ImagePath").value; //取上传了的图片内容
var strs =document.getElementById("IcoImage").value; //取缩略图文本框的内容
//利用kindeditor里的内置API方法，取内容编辑器的内容,开始
var strcon = editor.html(); //editor为页面添加编辑器里JS里定义的那个值
editor.sync();//同步到editor这个编辑器
strcon = document.getElementById('Content').value; // 原生API，content为页面上textarea的ID值
//editor.html('HTML内容');设置编辑器的值
//取内容编辑器的内容,结束
var arr = str.split("|");
var nstr="";
for (var i=0; i<arr.length; i++)
{
if(arr[i]!=p)
{
if (nstr!="")
{
nstr=nstr+"|";
}
nstr=nstr+arr[i]
}
}
if (nstr=="")
{
$("#imgTable").hide();
}
//判断要删除的图片是否被设置成了封面，如果是就清空，如果不是就不管,开始
if (strs==p){
document.getElementById("IcoImage").value=""; //原来为""
}
else
{
document.getElementById("IcoImage").value=strs; //原来为strs
}
//判断要删除的图片是否被设置成了封面，如果是就清空，如果不是就不管，结束
document.getElementById("ImagePath").value=nstr;
if (confirm("你确定从服务上一起删除这个图片吗？")){ //弹出提示框，点确定后执行删除图片代码
//利用ajax调用deltu.asp页面进行删除图片
var myDate = new Date();
$.ajax({
url: "admin/deltu.asp?id="+p+"",
data: { datetime: myDate.getTime() },
dataType: "text"
});
//删除图片结束
//同时删除编辑器里插入的相应图片，开始
//正则替换开始
var regimgb='<img src="'+p+'" />';
var regconb=new RegExp(""+regimgb+"","g"); //创建正则RegExp对象
var stringObjconb=""+strcon+"";
var newstrconb=stringObjconb.replace(regconb,"");
//正则替换结束
editor.html(''+newstrconb+''); //利用kindeditor里的内置API方法替换掉原来的编辑器内的内容
//document.getElementById("IndexImage").value=stringObjcona; //调试用的
//同时删除编辑器里插入的相应图片，结束
}
}
</script>
</head>
<body>
<FORM name="form" action="test2.asp" method="post" >
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="Content"]', {
filterMode : false,
uploadJson : 'editor/asp/upload_json.asp',
fileManagerJson : 'editor/asp/file_manager_json.asp',
allowFileManager : true,
width: '650px',
hight: '300px'
});
});
</script>
<textarea name="Content" id="Content" style="width:650px;height:300px;visibility:hidden;"></textarea>
首页缩略图：<input type="text" id="IcoImage" name="IcoImage" value="" style="width:600px;" />
<input type="button" id="J_selectImage" value="批量上传" />
<input type="hidden" id="ImagePath" name="ImagePath" value="" style="width:600px;" />
<div id="J_imageView"></div>
<INPUT class="button" type="submit" value="添加" />
</FORM>
</body>
</html>

复制代码

/////////////////////////////////////////////////////

以下为删除图片时所要调用的deltu.asp内容

<%
dim fso,id
id=request("id")
FileName=server.MapPath(id) '必须转换成绝对路径的
Set Fso = CreateObject("scripting.filesystemobject")
if Fso.FileExists(Filename) then '判断文件是否存在
Fso.DeleteFile filename
end if
Set Fso = nothing
%>

复制代码

//////////////////////////////////

第二个修改页面呀，其实这个页面和第一个添加的大部分是一样的，只有一小点不一样的地方，就是，修改的时候，原来可能是有已经上传了的图片的，所以要打开修改页面时就排列出来才行

那么我们只要加一些代码就行了，
下面是代码test2.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="admin/css/style.css" />
<link rel="stylesheet" href="editor/themes/default/default.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="editor/kindeditor.js"></script>
<script src="editor/lang/zh_CN.js"></script>
<script>
KindEditor.ready(function(K) {
var imgh="";
var imgurl="";
var editor = K.editor({
allowFileManager : true,
uploadJson : 'editor/asp/upload_json.asp'
});
K('#J_selectImage').click(function() {
editor.loadPlugin('multiimage', function() {
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var div = K('#J_imageView');
div.html('');
K.each(urlList, function(i, data) {
var j=document.getElementById('ImagePath').value;
if(j==""){
imgurl=data.url;
}
else{
imgurl=j+"|"+data.url;
}
$("#ImagePath").val(imgurl);
});
editor.hideDialog();
var array = imgurl.split("|");
var ids;
for (var s=0 ; s< array.length ; s++)
{
ids=array[s];
ids=ids.substr(ids.lastIndexOf("/")+1,ids.lastIndexOf("."));
ids=ids.replace(".","");
$('#J_imageView').append('<div class="imgDiv" id="'+ids+'"><a href="javascript:setContent(\'' + array[s] + '\')"><img title="点击图片将图片插入到编辑器" src="'+array[s] + '" width="120" height="90" border="0" /></a>
<label><input type="radio" name="IndexImageradio" onclick="setIndexImage(\''+array[s] +'\')" value="'+array[s] +'" />设为封面</label> <a href="javascript:dropThisDiv(\''+ids+'\',\''+array[s] +'\')">删除</a></div>');
}
}
});
});
});
});
//设置封面图片
function setIndexImage(Value)
{
$("#IcoImage").val(Value);
//$("#picView").html("<img id='img_view' src='"+t+"' width='160'/>");
}
//向编辑器插入图片
function setContent(Value)
{
if (Value != '' && Value != null) {
var valueimg='<img src="'+Value+'" />';
editor.insertHtml(''+valueimg+''); //利用kindeditor里的insertHtml方法向光标所在处添加html内容
}
}
//向编辑器插入分页标签
function SetEditorPage(Value)
{
if (Value != '' && Value != null) {
editor.insertHtml(''+Value+''); //利用kindeditor里的insertHtml方法向光标所在处添加html内容
}
}
//删除图片
function dropThisDiv(t,p)
{
document.getElementById(t).style.display='none'
var str =document.getElementById("ImagePath").value; //取上传了的图片内容
var strs =document.getElementById("IcoImage").value; //取缩略图文本框的内容
//利用kindeditor里的内置API方法，取内容编辑器的内容,开始
var strcon = editor.html(); //editor为页面添加编辑器里JS里定义的那个值
editor.sync();//同步到editor这个编辑器
strcon = document.getElementById('Content').value; // 原生API，content为页面上textarea的ID值
//editor.html('HTML内容');设置编辑器的值
//取内容编辑器的内容,结束
var arr = str.split("|");
var nstr="";
for (var i=0; i<arr.length; i++)
{
if(arr[i]!=p)
{
if (nstr!="")
{
nstr=nstr+"|";
}
nstr=nstr+arr[i]
}
}
if (nstr=="")
{
$("#imgTable").hide();
}
//判断要删除的图片是否被设置成了封面，如果是就清空，如果不是就不管,开始
if (strs==p){
document.getElementById("IcoImage").value=""; //原来为""
}
else
{
document.getElementById("IcoImage").value=strs; //原来为strs
}
//判断要删除的图片是否被设置成了封面，如果是就清空，如果不是就不管，结束
document.getElementById("ImagePath").value=nstr;
if (confirm("你确定从服务上一起删除这个图片吗？")){ //弹出提示框，点确定后执行删除图片代码
//利用ajax调用deltu.asp页面进行删除图片
var myDate = new Date();
$.ajax({
url: "admin/deltu.asp?id="+p+"",
data: { datetime: myDate.getTime() },
dataType: "text"
});
//删除图片结束
//同时删除编辑器里插入的相应图片，开始
//正则替换开始
var regimgb='<img src="'+p+'" />';
var regconb=new RegExp(""+regimgb+"","g"); //创建正则RegExp对象
var stringObjconb=""+strcon+"";
var newstrconb=stringObjconb.replace(regconb,"");
//正则替换结束
editor.html(''+newstrconb+''); //利用kindeditor里的内置API方法替换掉原来的编辑器内的内容
//document.getElementById("IndexImage").value=stringObjcona; //调试用的
//同时删除编辑器里插入的相应图片，结束
}
}
</script>
</head>
<%
Content=request("Content")
IcoImage=request("IcoImage")
ImagePath=request("ImagePath")
%>
<body>
<FORM name="form" action="test3.asp" method="post" >
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="Content"]', {
filterMode : false,
uploadJson : 'editor/asp/upload_json.asp',
fileManagerJson : 'editor/asp/file_manager_json.asp',
allowFileManager : true,
width: '650px',
hight: '300px'
});
});
</script>
<textarea name="Content" id="Content" style="width:650px;height:300px;visibility:hidden;"><%=Content%></textarea>
首页缩略图：<input type="text" id="IcoImage" name="IcoImage" value="<%=IcoImage%>" style="width:600px;" />
<input type="button" id="J_selectImage" value="批量上传" />
<input type="hidden" id="ImagePath" name="ImagePath" value="<%=ImagePath%>" style="width:600px;" />
<div id="J_imageView">
<%
'输出已有图片信息
'die imgUrls
Dim img,i,ids
if ImagePath<>"" then
img = split(ImagePath,"|")
For i=0 to ubound(img)
ids=replace(replace(img(i),"/",""),".","")
response.write "<div class=""imgDiv"" id="""&ids&"""><a href=""javascript:setContent('"&img(i)&"')"" ><img title=""点击图片将图片插入到编辑器"" src="""&img(i)&""" border=""0"" /></a>
<label><input type=""radio"" name=""IndexImageradio"" onclick=""setIndexImage('"&img(i)&"')"" value="""&img(i)&""" />设为封面</label> <a href=""javascript:dropThisDiv('"&ids&"','"&img(i)&"')"">删除</a></div>"
next
end if
%>
</div>
<INPUT class="button" type="submit" value="添加" />
</FORM>
</body>
</html>

复制代码

本文摘自it论坛：http://wenku.baidu.com/link?url= ... HBHedkz4VYiqLbU77MS

		自动登录	找回密码
密码			立即注册

利用kindeditor实现设为封面缩略图等功能ASP代码-it论坛

相关帖子

优秀会员

助人为乐

辛勤工作

技术精英

多才多艺

优秀班竹

灌水天才

星球管理

宣传大使

灌水之王

财富勋章

版主勋章

动漫勋章

勤奋会员

论坛精英

PS高手

心

8

闪游皮肤

双鱼座

8★8➹

志愿者

乖