Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve Baidu text editor UEditor to add picture deletion function under .NET, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Baidu's editor is really good, but there are also some that are unsatisfactory, such as every update, the original functions have been lost, and the old version of the code can not be used directly, which is very uncomfortable for users. Today, I downloaded the latest version 1.2.5 to see the updated record, mainly to make a change to the form. I downloaded and used it. I relied on the deletion function of uploading pictures to be cancelled. Take the old version of the deleted code over, it doesn't work, but I have to study it slowly, annoying ah, annoying, torturing me for a long time.

1. First, modify the file imageManager.ashx under ueditor\ net on the server to increase the processing of image deletion. The Add section of the following code is shown:

The copy code is as follows:

/ * *

* Created by visual studio2010

* User: xuheng

* Date: 12-3-7

* Time: 16:29

* To change this template use File | Settings | File Templates.

, /

Using System

Using System.Web

Using System.IO

Using System.Text.RegularExpressions

Public class imageManager: IHttpHandler

{

Public void ProcessRequest (HttpContext context)

{

Context.Response.ContentType = "text/plain"

String [] paths = {"upload", "upload1"}; / / A list of directories to be traversed, preferably using a thumbnail address, otherwise it may cause serious delay when the network speed is slow

String [] filetype = {".gif", ".png", ".jpg", ".jpeg", ".bmp"}; / / File format allowed

String action = context.Server.HtmlEncode (context.Request ["action"])

If (action = = "get")

{

String str = String.Empty

Foreach (string path in paths)

{

DirectoryInfo info = new DirectoryInfo (context.Server.MapPath (path))

/ / Directory verification

If (info.Exists)

{

DirectoryInfo [] infoArr = info.GetDirectories ()

Foreach (DirectoryInfo tmpInfo in infoArr)

{

Foreach (FileInfo fi in tmpInfo.GetFiles ())

{

If (Array.IndexOf (filetype, fi.Extension)!-1)

{

Str + = path+ "/" + tmpInfo.Name + "/" + fi.Name + "ue_separate_ue"

}

}

}

}

}

Context.Response.Write (str)

}

/ / Add Start=== 2013-05-12

/ / Delete the selected file

String pathDel = string.Empty; / / it is best to use a thumbnail address, otherwise it may cause serious delay when the network speed is slow

String fileName = context.Server.HtmlEncode (context.Request ["fileName"])

Bool isDeleted = false

If (action = = "del")

{

Try

{

String fullPath = String.Empty

Foreach (string path in paths)

{

PathDel = context.Server.MapPath (path)

DirectoryInfo info = new DirectoryInfo (pathDel)

/ / Directory verification

If (info.Exists)

{

/ / get the directory named by time under the C:\...\ ueditor\ net\ upload directory. Such as: 2013-05-12

DirectoryInfo [] infoArr = info.GetDirectories ()

Foreach (DirectoryInfo tmpInfo in infoArr)

{

Foreach (FileInfo fi in tmpInfo.GetFiles ())

{

/ / determine whether it is the specified picture type, because the attachment and the picture are in the same directory.

If (Array.IndexOf (filetype, fi.Extension)!-1)

{

If (fi.Name.Equals (fileName))

{

FullPath = pathDel + "/" + tmpInfo.Name + "/" + fileName

File.Delete (fullPath)

IsDeleted = true

Break

}

}

}

/ / has been deleted, jump out

If (isDeleted = = true)

Break

}

}

/ / has been deleted, jump out

If (isDeleted = = true)

Break

}

IsDeleted = false

Context.Response.Write ("success")

}

Catch

{

Context.Response.Write ("error")

}

}

/ / Add End=== 2013-05-12

}

Public bool IsReusable

{

Get

{

Return false

}

}

}

2. Modify the image.js file under the script ueditor\ dialogs\ image. Add Ajax calls for image deletion processing. The following Add section shows:

The copy code is as follows:

/ * *

* Created by JetBrains PhpStorm.

* User: taoqili

* Date: 12-01-08

* Time: 2:52

* To change this template use File | Settings | File Templates.

, /

Var imageUploader = {}

FlashObj = null

PostConfig= []

(function () {

Var g = $G

Ajax = parent.baidu.editor.ajax

MaskIframe = g ("maskIframe"); / / tab mask layer, used to resolve z-index level inconsistencies between flash and other dom elements

/ / flashObj; / / flash upload object

Var flagImg = null, flashContainer

ImageUploader.init = function (opt, callbacks) {

SwitchTab ("imageTab")

CreateAlignButton (["remoteFloat", "localFloat"])

CreateFlash (opt, callbacks)

Var srcImg = editor.selection.getRange () .getClosedNode ()

If (srcImg) {

ShowImageInfo (srcImg)

ShowPreviewImage (srcImg, true)

Var tabElements = g ("imageTab") .children

TabHeads = tabElements [0] .children

TabBodys = tabElements [1] .children

For (var I = 0, ci; ci = tabHeads [iTunes +];) {

If (ci.getAttribute ("tabSrc") = = "remote") {

ClickHandler (tabHeads, tabBodys, ci)

}

}

}

AddUrlChangeListener ()

AddOKListener ()

AddScrollListener ()

AddSearchListener ()

$focus (g ("url"))

}

ImageUploader.setPostParams = function (obj,index) {

If (index===undefined) {

Utils.each (postConfig,function (config) {

Config.data = obj

})

} else {

Postconfiguration [index] .data = obj

}

}

Function insertImage (imgObjs) {

Editor.fireEvent ('beforeInsertImage', imgObjs)

Editor.execCommand ("insertImage", imgObjs)

}

Function searchImage () {

Var imgSearchInput = $G ("imgSearchTxt")

If (! imgSearchInput.getAttribute ("hasClick") | |! imgSearchInput.value) {

SelectTxt (imgSearchInput)

Return

}

G ("searchList") [xss_clean] = "" + lang.imageLoading + "

"

Var key = imgSearchInput.value

Type = $G ("imgType") .value

Url = "http://image.baidu.com/i?ct=201326592&cl=2&lm=-1&st=-1&tn=baiduimagejson&istype=2&rn=32&fm=index&pv=&word=" + encodeToGb2312 (key) + type +" & "+ + new Date

Var reqCallBack = function (data) {

Try {

Var imgObjs = data.data

} catch (e) {

Return

}

Var frg = document.createDocumentFragment ()

If (imgObjs.length

< 2) { g("searchList")[xss_clean] = "" + lang.tryAgain + " "; return; } for (var i = 0, len = imgObjs.length; i < len - 1; i++) { var img = document.createElement("img"), obj = imgObjs[i], div = document.createElement("div"); img.src = obj.objURL; //obj.thumbURL 为缩略图，只能针对百度内部使用 img.setAttribute("sourceUrl", obj.objURL); var title = obj.fromPageTitleEnc.replace(/^\.\.\./i, ""); img.setAttribute("title", lang.toggleSelect + obj.width + "X" + obj.height); img.onclick = function () { changeSelected(this); }; scale(img, 100, obj.width, obj.height); div.appendChild(img); var p = document.createElement("p"); p[xss_clean] = "" + title + ""; div.appendChild(p); //setTimeout(function(){ frg.appendChild(div); //},0); } g("searchList")[xss_clean] = ""; g("searchList").appendChild(frg); }; baidu.sio.callByServer(url, reqCallBack, {charset:"GB18030"}); } function selectTxt(node) { if (node.select) { node.select(); } else { var r = node.createTextRange && node.createTextRange(); r.select(); } } function addSearchListener() { g("imgSearchTxt").onclick = function () { selectTxt(this); this.setAttribute("hasClick", true); if (this.value == lang.searchInitInfo) { this.value = ""; } }; g("imgSearchTxt").onkeyup = function () { this.setAttribute("hasClick", true); //只触发一次 this.onkeyup = null; }; g("imgSearchBtn").onclick = function () { searchImage(); }; g("imgSearchReset").onclick = function () { var txt = g("imgSearchTxt"); txt.value = ""; txt.focus(); g("searchList")[xss_clean] = ""; }; g("imgType").onchange = function () { searchImage(); }; domUtils.on(g("imgSearchTxt"), "keyup", function (evt) { if (evt.keyCode == 13) { searchImage(); } }) } /** * 延迟加载 */ function addScrollListener() { g("imageList").onscroll = function () { var imgs = this.getElementsByTagName("img"), top = Math.ceil(this.scrollTop / 100) - 1; top = top < 0 ? 0 : top; for (var i = top * 5; i < (top + 5) * 5; i++) { var img = imgs[i]; if (img && !img.getAttribute("src")) { img.src = img.getAttribute("lazy_src"); img.removeAttribute("lazy_src"); } } } } /** * 绑定确认按钮 */ function addOKListener() { dialog.onok = function () { var currentTab = findFocus("tabHeads", "tabSrc"); switch (currentTab) { case "remote": return insertSingle(); break; case "local": return insertBatch(); break; case "imgManager": return insertSearch("imageList"); break; case "imgSearch": return insertSearch("searchList", true); break; } }; dialog.oncancel = function () { hideFlash(); } } function hideFlash() { flashObj = null; flashContainer[xss_clean] = ""; } /** * 将元素id下的所有图片文件插入到编辑器中。 * @param id * @param catchRemote 是否需要替换远程图片 */ function insertSearch(id, catchRemote) { var imgs = $G(id).getElementsByTagName("img"), imgObjs = []; for (var i = 0, ci; ci = imgs[i++];) { if (ci.getAttribute("selected")) { var url = ci.getAttribute("src", 2).replace(/(\s*$)/g, ""), img = {}; img.src = url; img.data_ue_src = url; imgObjs.push(img); } } insertImage(imgObjs); catchRemote && editor.fireEvent("catchRemoteImage"); hideFlash(); } /** * 插入单张图片 */ function insertSingle() { var url = g("url"), width = g("width"), height = g("height"), border = g("border"), vhSpace = g("vhSpace"), title = g("title"), align = findFocus("remoteFloat", "name"), imgObj = {}; if (!url.value) return; if (!flagImg) return; //粘贴地址后如果没有生成对应的预览图，可以认为本次粘贴地址失败 if (!checkNum([width, height, border, vhSpace])) return false; imgObj.src = url.value; imgObj.data_ue_src = url.value; imgObj.width = width.value; imgObj.height = height.value; imgObj.border = border.value; imgObj.floatStyle = align; imgObj.vspace = imgObj.hspace = vhSpace.value; imgObj.title = title.value; imgObj.style = "width:" + width.value + "px;height:" + height.value + "px;"; insertImage(imgObj); editor.fireEvent("catchRemoteImage"); hideFlash(); } /** * 检测传入的所有input框中输入的长宽是否是正数 * @param nodes input框集合， */ function checkNum(nodes) { for (var i = 0, ci; ci = nodes[i++];) { if (!isNumber(ci.value) || ci.value < 0) { alert(lang.numError); ci.value = ""; ci.focus(); return false; } } return true; } /** * 数字判断 * @param value */ function isNumber(value) { return /(0|^[1-9]\d*$)/.test(value); } /** * 插入多张图片 */ function insertBatch() { if (imageUrls.length < 1) return; var imgObjs = [], align = findFocus("localFloat", "name"); for (var i = 0, ci; ci = imageUrls[i++];) { var tmpObj = {}; tmpObj.title = ci.title; tmpObj.floatStyle = align; //修正显示时候的地址数据,如果后台返回的是图片的绝对地址，那么此处无需修正 tmpObj.data_ue_src = tmpObj.src = editor.options.imagePath + ci.url; imgObjs.push(tmpObj); } insertImage(imgObjs); hideFlash(); } /** * 找到id下具有focus类的节点并返回该节点下的某个属性 * @param id * @param returnProperty */ function findFocus(id, returnProperty) { var tabs = g(id).children, property; for (var i = 0, ci; ci = tabs[i++];) { if (ci.className == "focus") { property = ci.getAttribute(returnProperty); break; } } return property; } /** * 绑定地址框改变事件 */ function addUrlChangeListener() { var value = g("url").value; if (browser.ie) { g("url").onpropertychange = function () { var v = this.value; if (v != value) { createPreviewImage(v); value = v; } }; } else { g("url").addEventListener("input", function () { var v = this.value; if (v != value) { createPreviewImage(v); value = v; } }, false); } } /** * 绑定图片等比缩放事件 * @param percent 缩放比例 */ function addSizeChangeListener(percent) { var width = g("width"), height = g("height"), lock = g('lock'); width.onkeyup = function () { if (!isNaN(this.value) && lock.checked) { height.value = Math.round(this.value / percent) || this.value; } }; height.onkeyup = function () { if (!isNaN(this.value) && lock.checked) { width.value = Math.round(this.value * percent) || this.value; } } } /** * 依据url中的地址创建一个预览图片并将对应的信息填入信息框和预览框 */ function createPreviewImage(url) { if (!url) { flagImg = null; g("preview")[xss_clean] = ""; g("width").value = ""; g("height").value = ""; g("border").value = ""; g("vhSpace").value = ""; g("title").value = ""; $focus(g("url")); return; } var img = document.createElement("img"), preview = g("preview"); var imgTypeReg = /\.(png|gif|jpg|jpeg)$/gi, //格式过滤 urlFilter = ""; //地址过滤 if (!imgTypeReg.test(url) || url.indexOf(urlFilter) == -1) { preview[xss_clean] = "" + lang.imageUrlError + ""; flagImg = null; return; } preview[xss_clean] = lang.imageLoading; img.onload = function () { flagImg = this; showImageInfo(this); showPreviewImage(this,true); this.onload = null; }; img.onerror = function () { preview[xss_clean] = "" + lang.imageLoadError + ""; flagImg = null; this.onerror = null; }; img.src = url; } /** * 显示图片对象的信息 * @param img */ function showImageInfo(img) { if (!img.getAttribute("src") || !img.src) return; var wordImgFlag = img.getAttribute("word_img"); g("url").value = wordImgFlag ? wordImgFlag.replace("&", "&") : (img.getAttribute('data_ue_src') || img.getAttribute("src", 2).replace("&", "&")); g("width").value = img.width || 0; g("height").value = img.height || 0; g("border").value = img.getAttribute("border") || 0; g("vhSpace").value = img.getAttribute("vspace") || 0; g("title").value = img.title || ""; var align = editor.queryCommandValue("imageFloat") || "none"; updateAlignButton(align); //保存原始比例，用于等比缩放 var percent = (img.width / img.height).toFixed(2); addSizeChangeListener(percent); } /** * 将img显示在预览框， * @param img * @param needClone 是否需要克隆后显示 */ function showPreviewImage(img, needClone) { var tmpWidth = img.width, tmpHeight = img.height; var maxWidth = 262,maxHeight = 262, target = scaling(tmpWidth,tmpHeight,maxWidth,maxHeight); target.border = img.border||0; target.src = img.src; flagImg = true; if ((target.width + 2 * target.border) >

MaxWidth) {

Target.width = maxWidth-2 * target.border

}

If ((target.height + 2 * target.border) > maxWidth) {

Target.height = maxWidth-2 * target.border

}

Var preview = g ("preview")

Preview [XSS _ clean] ='

'

}

/ * *

* Image zooming

* @ param img

* @ param max

, /

Function scale (img, max, oWidth, oHeight) {

Var width = 0, height = 0, percent, ow = img.width | | oWidth, oh = img.height | | oHeight

If (ow > max | | oh > max) {

If (ow > = oh) {

If (width = ow-max) {

Percent = (width / ow) .tofixed (2)

Img.height = oh-oh * percent

Img.width = max

}

} else {

If (height = oh-max) {

Percent = (height / oh) .tofixed (2)

Img.width = ow-ow * percent

Img.height = max

}

}

}

}

Function scaling (width,height,maxWidth,maxHeight) {

If (width

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.