fck_editor 不采用正则表达式实现插入任意自定义图片标签的解决方法-CSDN博客

本文链接：https://blog.csdn.net/aspgreener/article/details/1740510

<% @ Register TagPrefix="fckeditorv2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>

<% @ Page language="c#" Codebehind="Archive_add.aspx.cs" AutoEventWireup="false" Inherits="BlogCMS.Archive.Archive_add" %>

<% @ Register TagPrefix="uc1" TagName="footer" Src="/module/footer.ascx" %>

<% @ Register TagPrefix="uc1" TagName="tb_search_bar" Src="/module/tb_search_bar.ascx" %>

<% @ Register TagPrefix="uc1" TagName="ProvinceList" Src="/usercontrol/ProvinceList.ascx" %>

<% @ Register TagPrefix="uc1" TagName="user_login" Src="/module/user_login.ascx" %>

<% @ Register TagPrefix="uc1" Namespace="Web.usercontrol" Assembly="Web" %>

<% @ Register TagPrefix="uc1" TagName="header" Src="/module/header.ascx" %>

<% @ Register TagPrefix="uc1" TagName="tb_submenu" Src="/module/tb_submenu.ascx" %>

<! doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >

< html >

< head >

< title > <% = System.Configuration.ConfigurationSettings.AppSettings[ " title " ] %> </ title >

< meta content ="Microsoft Visual Studio .NET 7.1" name ="GENERATOR" >

< meta content ="C#" name ="CODE_LANGUAGE" >

< meta content ="JavaScript" name ="vs_defaultClientScript" >

< meta content ="http://schemas.microsoft.com/intellisense/ie5" name ="vs_targetSchema" >

< link href ="/css/common.css" rel ="stylesheet" type ="text/css" >

< link href ="/css/mocommon.css" rel ="stylesheet" type ="text/css" >

< link href ="/css/molanmu.css" rel ="stylesheet" type ="text/css" >

< link href ="/css/shipin.css" rel ="stylesheet" type ="text/css" >

< script language ="javascript" >

var oEditer;

function CheckForm()

{

if(document.getElementById("tb_title").value == ""){alert("请输入标题！");return false;}

if(document.getElementById("ddl_archivesort").value == ""){alert("请选择分类！");return false;}

var content = oEditer.GetXHTML(true); //content就是编辑器的内容的html源码了

if(content == ""){alert("请输入正文！");return false;}

}

function FCKeditor_OnComplete(editorInstance)

{

oEditer = editorInstance;

}

function Init()

{

}

function getLabel()

{

document.getElementById("biaoqian1").innerHTML = "Loading......";

OlympicUcc.BlogCMS.Archive.Archive_add.getLabel(0,20,20,getLabel_result);

}

function getLabel_result(result)

{

document.getElementById("biaoqian1").innerHTML = result.value;

}

function addlabel(label)

{

var str_label;

str_label = document.getElementById("tb_label").value;

if(str_label == "")

{

str_label += label;

}

else

{

str_label += "," + label;

}

document.getElementById("tb_label").value = str_label;

}

var filecount = 0;

function addfile(id)

{

if(document.getElementById(id).value != "")

{

var filecount = parseInt(id.replace("picfile",""));

//获得路径，文件名和扩展名

var str_filepath = document.getElementById("picfile" + filecount).value;

var str_file = str_filepath.substring(str_filepath.lastIndexOf("/") + 1,str_filepath.length);

var str_fileextensions = str_file.substring(str_file.lastIndexOf(".") + 1,str_file.length);

if(IsPicFile(str_fileextensions))

{

var objFiles = document.getElementById("div_files");

objFiles.appendChild(document.createTextNode(" "));

var objSpan = document.createElement("span");

objSpan.id = "fileinfo" + filecount;

//<!--添加ID显示开始

objSpan.appendChild(document.createTextNode("["+ filecount +"]"));

//添加ID显示结束-->

objSpan.appendChild(document.createTextNode(" "));

//<!--添加插入按钮开始

var objLink = document.createElement("a");

objLink.href = "javascript:AddToContent('"+ (filecount-1) +"');";

objLink.appendChild(document.createTextNode("插入"));

objSpan.appendChild(objLink);

//添加插入按钮结束-->

objSpan.appendChild(document.createTextNode(" "));

//<!--添加删除按钮开始

var objLink = document.createElement("a");

objLink.href = "javascript:DeletePic('"+ filecount +"');";

objLink.appendChild(document.createTextNode("删除"));

objSpan.appendChild(objLink);

//添加删除按钮结束-->

objSpan.appendChild(document.createTextNode(" "));

//<!--添加文件名称开始

//添加文件名

//如果是图片就加入可以显示缩略图的样式

if(IsPicFile(str_fileextensions))

{

var objLink = document.createElement("a");

objLink.id = "fileimg" + filecount;

objLink.name = "fileimg" + filecount;

objLink.href = "javascript:AddToContent('"+ (filecount-1) +"');";

objLink.alt = filecount;

//点击相应的相册更换下面的相册照片

objLink.onmouseover = function(){ShowPic(this.alt,1);};

objLink.onmouseout = function(){ShowPic(this.alt,0);};

objLink.appendChild(document.createTextNode(str_file));

objSpan.appendChild(objLink);

}

else

{

var objSpan1 = document.createElement("span");

objSpan1.id = "fileimg" + filecount;

objSpan1.name = "fileimg" + filecount;

objSpan1.appendChild(document.createTextNode(str_file));

objSpan.appendChild(objSpan1);

}

//添加文件名称结束-->

objFiles.appendChild(objSpan);

//清空File控件中的内容

//document.getElementById("picfile").select();

//document.execCommand('Delete');

//防止用户更换图片

document.getElementById("picfile" + filecount).onclick = function(){return false};

//计数加1

filecount += 1;

//添加一个新的文件框

objSpan.appendChild(document.createElement("br"));

var objFile = document.createElement("input");

objFile.type = "file";

objFile.id = "picfile" + filecount;

objFile.name = "picfile" + filecount;

objFile.unselectable = "on";

objFile.style.width = "150px";

objFile.onchange = function(){addfile(this.id);};

objFiles.appendChild(objFile);

}

else

{

alert("文件类型错误，请选择图片文件！");

//清空File控件中的内容

document.getElementById(id).select();

document.execCommand('Delete');

return false;

}

function IsPicFile(str_fileextensions)

{

switch(str_fileextensions.toLowerCase())

{

case "gif":

return true;

break;

case "jpg":

return true;

break;

case "jpge":

return true;

break;

case "png":

return true;

break;

case "bmp":

return true;

break;

default:

return false;

break;

}

function AddToContent(id)

{

var oEditor = parent.FCKeditorAPI.GetInstance('FCKeditor1');

oEditor.InsertHtml("[localimg]{"+ id +"}[/localimg]");

}

function DeletePic(id)

{

//删除当前节点

var objTemp1 = document.getElementById("picfile" + id);

objTemp1.parentNode.removeChild(objTemp1);

var objTemp2 = document.getElementById("fileinfo" + id);

objTemp2.parentNode.removeChild(objTemp2);

}

function ShowPic(id,showflag)

{

var objDiv = document.getElementById("div_showpic");

objDiv.innerHTML = "";

if(showflag == "1")

{

var objImg = document.createElement("img");

objImg.src = document.getElementById("picfile" + id).value;

objDiv.appendChild(FixPicSize(objImg));

objDiv.style.left = window.event.clientX + window.document.body.scrollLeft;

objDiv.style.top = window.event.clientY + document.documentElement.scrollTop + 5;

objDiv.style.display = "block";

}

else

{

objDiv.style.display = "none";

}

//添加图片的宽高

function FixPicSize(obj)

{

if(obj.src != "")

{

var imgW = obj.width;

var imgH = obj.height;

if(imgW >= imgH && imgW > 100)

{

obj.width = "100";

obj.height = imgH /(imgW / 100);

}

if(imgW < imgH && imgH > 100)

{

obj.width = imgW /(imgH / 100);

obj.height = "100";

}

return obj;

}

window.onload = function ()

{

Init();

}

</ script >

</ head >

< body ms_positioning ="GridLayout" >

< form id ="Form1" method ="post" runat ="server" enctype ="multipart/form-data" >

< div class ="bg" >

< uc1:header id ="Header1" runat ="server" ></ uc1:header >

< div class ="content1" id ="con" >

< div class ="sidebar" >

< div id ="login" >

< uc1:user_login id ="User_login1" runat ="server" ></ uc1:user_login >

</ div >

< div id ="search" >

< uc1:tb_search_bar id ="Tb_search_bar1" runat ="server" ></ uc1:tb_search_bar >

</ div >

< div class ="sidelist" id ="xuanshou" >

< uc1:provincelist id ="ProvinceList1" runat ="server" repeatcolumns ="3" ></ uc1:provincelist ></ FONT >

</ div >

< div id ="top" >

< h2 > 选手人气排行榜 </ h2 >

< uc1:topn id ="Topn2" runat ="server" ranktype ="3" topn ="20" ></ uc1:topn >

</ div >

< uc1:tb_submenu id ="tb_submenu1" Type ="2" runat ="server" ></ uc1:tb_submenu >

< div id ="wenzhang_title" >

</ div >

< div id ="webzhang_content" >

< div id ="wenzhang_content01" >

< ul >

< li >

标　　题： < asp:textbox id ="tb_title" runat ="server" width ="365" maxlength ="50" ></ asp:textbox ></ li >

< li >

文章标签： < asp:textbox id ="tb_label" runat ="server" maxlength ="100" width ="365" ></ asp:textbox ></ li >

< li >

推荐标签： < span id ="biaoqian1" ></ span ></ li >

< li >

类          型： < asp:dropdownlist id ="ddl_archivesort" runat ="server" cssclass ="select01" ></ asp:dropdownlist >      < a href ="/BlogCMS/ArchiveSort/ArchiveSort_edit.aspx" > 修改我的分类 </ a >

</ li >

< li >

< span class ="tt01" > 正          文： </ span >< p >< fckeditorv2:fckeditor id ="FCKeditor1" height ="400" runat ="server" toolbarset ="Blog" basepath ="/BlogCMS/FCKeditor/" width ="100%" ></ fckeditorv2:fckeditor ></ p >

</ li >

< li id ="div_files" > 上传文件（只能选择图片文件）：

< br >

< input type ="file" id ="picfile1" name ="picfile1" unselectable ="on" style ="WIDTH:150px"

onchange ="addfile(this.id);" >

</ li >

< li >

< asp:label id ="lab_userconfig" runat ="server" ></ asp:label ></ li >

</ ul >

< div id ="div_showpic" style ="DISPLAY:none;Z-INDEX:999;FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image');LEFT:0px;POSITION:absolute;TOP:0px" ></ div >

</ div >

< div id ="wenzhang_button" >

< ul >

< li >

< asp:imagebutton id ="ImageButton1" imageurl ="/images/save.gif" runat ="server" ></ asp:imagebutton >

</ li >

</ ul >

</ div >

</ div >

< div class ="content" >

< div id ="tleft" ></ div >

< div id ="footercon" >

< div id ="tcon" ></ div >

< img style ="MARGIN-TOP:31px" src ="/images/index_100.jpg" >

</ div >

< div id ="tbottom" ></ div >

</ div >

</ form >

</ body >

</ html >

后台关键代码如下：

private void ImageButton1_Click( object sender, System.Web.UI.ImageClickEventArgs e)

{

string str_title;

string str_archivesort;

string str_archivelabel;

string str_archivecontent;

str_title = ClassString.Checktxt(tb_title.Text);

str_archivesort = ClassString.Checktxt(ddl_archivesort.SelectedValue);

str_archivelabel = ClassString.Checktxt(tb_label.Text);

str_archivecontent = ClassString.Checktxt(FCKeditor1.Value);

if(str_title == "")

{

ClassScript.AlertSomething("请输入标题！");

return;

}

if(str_archivesort == "")

{

ClassScript.AlertSomething("请选择分类！");

return;

}

if(str_archivecontent == "")

{

ClassScript.AlertSomething("请输入正文！");

return;

}

//获得文件序号和前台序号的对应关系

Hashtable objHsFile = new Hashtable();

for(int i = 0;i < HttpContext.Current.Request.Files.Count;i++)

{

objHsFile[i] = HttpContext.Current.Request.Files.Keys[i].Replace("picfile","");

}

DA_Archive objArchive = new DA_Archive();

Hashtable objHs = new Hashtable();

objHs["ARCHIVEID"] = ClassString.getNewGUID();

objHs["ARCHIVETITLE"] = str_title;

objHs["ARCHIVESORT"] = str_archivesort;

objHs["LABEL"] = str_archivelabel;

objHs["USERID"] = Session["userid"].ToString();

//objHs["ARCHIVECONTENT"] = str_archivecontent;

//先判断是否能够上传附件

if(ViewState["UPLOADFLAG"].ToString() == "1")

{

//保存文件

string str_physicalpath;

string str_virtualpath;

string [] strarr_newfilename;

string [] strarr_orgfilename;

string str_maxfilesize;

str_physicalpath = System.Configuration.ConfigurationSettings.AppSettings["uploadphysicalpath"];

str_virtualpath = System.Configuration.ConfigurationSettings.AppSettings["ImageSavePath"] + Session["USERNAME"].ToString() + "/";

str_maxfilesize = Convert.ToString(Convert.ToDouble(System.Configuration.ConfigurationSettings.AppSettings["UploadFileMaxSize_Image"]) * 1024 * 1024);

if(!ClassFile.UploadUserFile(HttpContext.Current.Request.Files,str_physicalpath + str_virtualpath,"images",str_maxfilesize,out strarr_newfilename,out strarr_orgfilename))

{

ClassScript.AlertSomething("文件格式有误或者网络原因！");

return;

}

for(int i = 0;i < strarr_newfilename.Length;i++)

{

strarr_newfilename[i] = str_virtualpath + strarr_newfilename[i];

}

//保存用户上传的附件

for(int i = 0;i < strarr_newfilename.Length;i++)

{

objArchive.InsertOneArchiveFiles(objHs["ARCHIVEID"].ToString(),strarr_orgfilename[i],strarr_newfilename[i],objHsFile[i].ToString());

strarr_newfilename[i] = " src="" + strarr_newfilename[i] + """;

}

//处理自定义标签

str_archivecontent = string.Format(str_archivecontent,strarr_newfilename);

str_archivecontent = str_archivecontent.Replace("[localimg]","<img border=0 width="430" ");

str_archivecontent = str_archivecontent.Replace("[/localimg]"," >");

objHs["ARCHIVECONTENT"] = str_archivecontent;

}

if(objArchive.InsertArchive(objHs))

{

ClassScript.AlertSomething("文章添加成功！");

ClassScript.LocationHref("/Archive/Archive_list.aspx?username=" + Session["username"].ToString());

}

else

{

ClassScript.AlertSomething("文章添加失败！");

}

objArchive.Dispose();

}

     现在来大概说说思路吧，首先插入自定义标签的格式如：
     [localimg]{0}[/localimg]---------------代表插入第一个图片
     [localimg]{1}[/localimg]---------------代表插入第二个图片
     [localimg]{2}[/localimg]---------------代表插入第三个图片
     以此类推。大家应该看差不多看明白了。关键就是{0},{1}等等类似的标签，非常有用。因为在后台的时候可以通过string.format ( System.String format , params object[] args )来进行处理(具体用法见后面的备注)。
     这样就可以利用这个函数和上传图片文件返回的数组来进行字符串的赋值工作了。结果就是我们想要的了。如果利用正则表达式，可能会更麻烦。如果哪位还知道解决方法，请告诉我，谢谢。

备注：
public static System.String Format ( System.String format , params object[] args )
System.String 的成员

摘要:
将指定 System.String 中的格式项替换为指定数组中相应 System.Object 实例的值的文本等效项。

参数:
format: System.String，包含零个或多个格式项。
args: 包含零个或多个要格式化的对象的 System.Object 数组。

返回值:
format 的一个副本，其中格式项已替换为 args 中相应 System.Object 实例的 System.String 等效项。

异常:
System.ArgumentNullException: format 或 args 为 null。
System.FormatException: format 无效。 - 或 - 用于指示要格式化的参数的数字小于零，或者大于或等于 args 数组的长度。