Kindeditor is a powerful open source online HTML editor that supports WYSIWYG editing effects. It is written in JavaScript and can seamlessly integrate with multiple different locales such as .NET, PHP, ASP, Java, etc. The official website can be viewed here: http://kindeditor.net/index.php
Kindeditor itself provides many very practical plugins, and because the code is open source, developers can extend and modify it as needed.
Consider this scenario when editing website content using Kindeditor: Editors tend to copy content from other pages or Word documents into the Kindeditor editor, rather than writing content from a blank sheet of paper. If the copied content contains images, you need to first download the image from the source address to the local area and upload it to the server where this website is located, otherwise the image will still point to the page or document you copied, which will cause the image to fail to open correctly in the page. Editors often have to process a lot of documents, and such operations are undoubtedly very cumbersome. Can Kindeditor automatically recognize the content pasted into it and upload the image to the server? The following code implements this function.
For details on how to use Kindeditor on the page, you can view the official website documentation.
The basic idea of implementing this function: add code to the keyup event of the Kindeditor editor to check whether the editor contains pictures; find out the pictures that need to be uploaded to the server automatically, call the picture upload program through Ajax to upload the pictures to the server; in the Ajax callback function, change the src address of the corresponding picture to the local relative address.
This feature does not support copying and uploading images in Word to the server.
The picture above is the final result. The program will automatically recognize the content in the editor. If there are pictures that need to be uploaded, a prompt message will be displayed at the top of the editor. When the user clicks on the "Upload" link, the program will call the image upload program through Ajax request, and modify the src address of the corresponding image to the local relative address in the callback function.
Specific implementation steps and related codes:
1. Kindeditor editor modification
Find the kindeditor.js file and add custom code in the keyup() event. The code provided by different versions of Kindeditor may vary greatly and require searching with the help of official documents. This article is based on Kindeditor version 4.1.10.
2. auto.js file code
function df() { var haspicContainer = document.getElementById("has_pic"); if (has_pic" == null) { haspicContainer = document.createElement("div"); haspicContainer.id = "has_pic"; haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>You have an image that needs to be uploaded to the server</b><a href='javascript:uploadpic();' >Upload</a></div><div id='confirm'></div>"; $(".ke-toolbar").after(haspicContainer); } var img = $(".ke-edit-iframe").contents().find("img"); var piccount = 0; var str = ""; $(img).each(function (i) { var that = $(this); if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) { piccount++; if (that.attr("src").indexOf("https://") >= 0) { piccount++; if (i == $(img).length - 1) strtr += that.attr("src"); else strtr += that.attr("src") + "|"; } }); $("#piclist").val(sstr); document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";}function closeupload() { $("#has_pic").hide(); $("#upload").show();}function uploadpic() { var piclist = encodeURI($("#piclist").val()); if (piclist.length == 0) return false; $.ajax({ url: "asp.net/uploadpic.ashx", data: "pic=" + piclist, type: "GET", beforeSend: function () { $("#upload").hide(); $("#confirm").text("Uploading..."); }, success: function (msg) { if (msg !== "") { var str = new Array(); str = msg.split('|'); var img = $(".ke-edit-iframe").contents().find("img"); $(img).each(function (i) { var that = $(this); if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) { that.attr("src", "/uploads/image/" + str[i]); that.attr("data-ke-src", "/uploads/image/" + str[i]); } }); $("#confirm").html(img.length + "A picture has been uploaded successfully! <a href='javascript:closeupload();'>close</a>"); } else $("#confirm").text("Upload failed!"); } });}$(".ke-edit-iframe").contents().find("img") is used to find all images in the editor content. By default, the content of the editor is stored in the iframe element, which has the property of class="ke-edit-iframe". The program will determine whether the value of each image src attribute contains "http://" or "https://", thereby determining whether the image is a remote image or a local image. If the image is a remote image, uploadpic.ashx is called by jQuery's ajax method to uploadpic to the server. At the same time, modify the src address of the corresponding picture in the callback function.
3. uploadpic.ashx file code
public class uploadpic : IHttpHandler{ public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string pic = context.Request.QueryString["pic"]; string[] arr = pic.Split('|'); string str = ""; UpLoadIMG st = new UpLoadIMG(); for (int i = 0; i < arr.Length; i++) { if (arr[i].IndexOf("http://") >= 0 || arr[i].IndexOf("https://") >= 0) { string std = st.SaveUrlPics(arr[i], "../../uploads/image/"); if (std.Length > 0) { if (i == arr.Length - 1) strr += std; else strr += std + "|"; } } } context.Response.Write(sstr); } public bool IsReusable { get { return false; } }}public class UpLoadIMG{ public string SaveUrlPics(string imgurlAry, string path) { string strHTML = ""; string dirPath = HttpContext.Current.Server.MapPath(path); try { if (!Dirctory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); } string ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); dirPath += ymd + "/"; if (!Dirctory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); } string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + imgurlAry.Substring(imgurlAry.LastIndexOf(".")); WebClient wc = new WebClient(); wc.DownloadFile(imgurlAry, dirPath + newFileName); strHTML = ymd + "/" + newFileName; } catch (Exception ex) { //return ex.Message; } return strHTML; }}The remote image is downloaded to the server's relative path "/uploads/image/" through the WebClient method, and the folder and corresponding file names will be automatically generated according to the date. The returned result contains the local relative addresses of all pictures separated by "|". In the uploadpic() function of the auto.js file in step 2, the callback method success obtains the value and parses it, and assigns the address to the src attribute of the corresponding picture.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.