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

本文介绍如何在FCKEditor中实现图片上传功能，并通过自定义标签方式处理上传图片，以便于在后台进行统一管理和替换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>

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>

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

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

</div>

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

</div>

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

</div>

<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>

<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>

</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>

<ul>

<li>

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

</li>

</ul>

</div>

</div>

</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 为 nu<script type="text/javascript">google_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_ad_width = 728;google_ad_height = 90;document.write("<s"+"cript type='text/javascript' s"+"rc='http://pagead2.googlesyndication.com/pagead/show_ads"+"."+"js'></scr"+"ipt>");</script>"");