为Kindeditor控件添加图片自动上传功能

  Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果。它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET、PHP、ASP、Java等。官方网站可以查看这里:http://kindeditor.net/index.php

  Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改。

  在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复制到Kindeditor编辑器中,而不会从一张白纸开始编写内容。如果所复制的内容中包含图片,则需要首先将图片从源地址下载到本地,然后将其上传到本网站所在的服务器,否则图片仍然会指向你所复制的页面或者文档,这会导致图片可能在页面中无法正确打开。编辑人员往往要处理许多的文档,这样的操作无疑非常繁琐。能否让Kindeditor自动识别粘贴到其中的内容,并将图片自动上传到服务器呢?下面的代码实现了这一功能。

  有关如何在页面中使用Kindeditor可以去查看官方网站的文档,这里不再详细介绍。

  实现该功能的基本思路:在Kindeditor编辑器的keyup事件中添加代码,以检查编辑器的内容中是否包含图片;找出需要自动上传到服务器的图片,通过Ajax方式调用图片上传程序将图片上传到服务器;在Ajax的回调函数中将对应图片的src地址修改为本地相对地址。

  该功能不支持将Word中的图片复制出来并上传到服务器。

  上图是最终实现效果。程序会自动识别编辑器中的内容,如果有图片需要上传,则会在编辑器的顶部显示一条提示信息。用户点击“上传”链接,程序会通过Ajax请求调用图片上传程序,并在回调函数中将对应图片的src地址修改为本地相对地址。

  具体实现步骤及相关代码:

1. Kindeditor编辑器修改

  找到kindeditor.js文件,在keyup()事件中添加自定义代码。不同版本的Kindeditor所提供的代码差别可能会比较大,需要借助于官方文档进行查找。本文基于Kindeditor 4.1.10版本。

2. auto.js文件代码

function df() {
var haspicContainer = document.getElementById("has_pic");
if (haspicContainer == null) {
haspicContainer = document.createElement("div");
haspicContainer.id = "has_pic";
haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图片需要上传到服务器</b>&nbsp;&nbsp;<a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></div>";
$(".ke-toolbar").after(haspicContainer);
}
var img = $(".ke-edit-iframe").contents().find("img");
var piccount = 0;
var sstr = "";
$(img).each(function (i) {
var that = $(this);
if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
piccount  ;
if (i == $(img).length - 1)
sstr  = that.attr("src");
else
sstr  = 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("正在上传中...");
},
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   "张图片已经上传成功!&nbsp;&nbsp;<a href='javascript:closeupload();'>关闭</a>");
}
else $("#confirm").text("上传失败!");
}
});
}

  其中的$(".ke-edit-iframe").contents().find("img")用来查找编辑器内容中的所有图片。默认情况下,编辑器的内容被存放在iframe元素中,该iframe拥有class="ke-edit-iframe"的属性。程序会判断每个图片src属性的值中是否包含"http://"或者"https://",从而确定该图片是远程图片还是本地图片。如果图片为远程图片,则通过jQuery的ajax方法调用uploadpic.ashx将图片上传到服务器。同时在回调函数中修改对应图片的src地址。

3. uploadpic.ashx文件代码

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 sstr = "";
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)
sstr  = std;
else
sstr  = 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 (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}
string ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
dirPath  = ymd   "/";
if (!Directory.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;
}
}

  远程图片通过WebClient方法下载到服务器的相对路径"/uploads/image/"中,并且会按照日期自动生成文件夹和对应的文件名。返回的结果中包含了以"|"分隔的所有图片的本地相对地址,在步骤2的auto.js文件的uploadpic()函数中,回调方法success获取到该值并进行解析,将地址赋值给对应图片的src属性。

  原文出处:kindeditor/ckeditor编辑器加 图片自动上传成功。本文中的代码做了适当调整和优化。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4个万无一失的技巧让您开始使用JBoss BRMS 6.0.3

上周&#xff0c;红帽发布了标记为6.0.3的JBoss BRMS的下一版本&#xff0c;已订阅的用户可以在其客户门户中使用。 如果您对该版本的新增功能感到好奇&#xff0c;请在客户门户网站上在线查看版本说明和其余文档 。 我们正在寻找一些简单的方法来开始使用此新版本&#xff0…

带有Angular JS的Java EE 7 – CRUD,REST,验证–第2部分

这是Angular JS承诺的Java EE 7的后续版本–第1部分 。 花了比我预期更长的时间&#xff08;找到时间来准备代码和博客文章&#xff09;&#xff0c;但是终于到了&#xff01; 应用程序 第1部分中的原始应用程序只是带有分页的简单列表&#xff0c;以及提供列表数据的REST服务…

Chrome不显示OPTIONS请求的解决方法2021版chrome90

在chrome90上之前展示跨域请求预检请求的方法失效了&#xff1a; 在chrome地址栏总输入 chrome://flags/#out-of-blink-cors 将其设置为Disabled后重启浏览器 在chrome://flags找不到选项out-of-blink-cors。取而代之的是chrome将预检请求放到了控制台网络面板的 OTHER 面板中。…

SVG实现波浪效果

SVG实现波浪效果 svg path&#xff1a;C 贝塞尔曲线绘制波浪形状 A 绘制圆弧形 svg animate&#xff1a;制作波浪动画&#xff0c;为了波浪动画效果自然&#xff0c;设置values关键点       attributeName&#xff1a;变化属性名 dur&#xff1a;动画时间 repeatCount&a…

使用WildFly 8在Java EE7中自举Apache Camel

从Camel版本2.10开始&#xff0c;支持CDI&#xff08;JSR-299&#xff09;和DI&#xff08;JSR-330&#xff09;。 这为在Java EE容器中以及独立Java SE或CDI容器中开发和部署Apache Camel项目提供了新的机会。 是时候尝试一下并熟悉它了。 骆驼到底是什么&#xff1f; 骆驼是…

好东西要分享

目录 矢量图标库$\text{pic}$图论神器$\text{bzoj}$离线题库打字速度表情包PPP矢量图标库 个人jio的这个阿里巴巴矢量图标库蛮不错的 上面这张就是去上面的网站找的。 $\text{pic}$ 来wallpaper abyss找点好康的图片吧。 图论神器 画图 $\text{bzoj}$离线题库 $\text{bzoj}$离线…

Vue2.0 全家桶开发的网页应用(参照吾记APP)

github链接 借鉴吾记APP&#xff0c;使用 vue2.0 vue-router vuex 为主要技术栈&#xff0c;elementui做为ui框架&#xff0c;多模块 spa 模式&#xff0c;webpack2.0 负责模块打包&#xff0c;gulp 负责处理静态资源打包、压缩&#xff0c;欢迎打赏star&#xff01;&#xff…

Java EE 7批处理和魔兽世界–第1部分

这是我在上一个JavaOne上的会议之一。 这篇文章将扩展主题并使用Batch JSR-352 API进入一个实际的应用程序。 此应用程序与MMORPG 魔兽世界集成。 由于JSR-352是Java EE世界中的新规范&#xff0c;所以我认为许多人不知道如何正确使用它。 确定本规范适用的用例也可能是一个挑…

学习笔记-AngularJs(十)

前面一直在说自定义指令&#xff0c;但是却一直没有一次系统地去了解&#xff0c;现在需要我们一起来学习如何去使用自定义指令&#xff0c;去丰富html标签、属性&#xff0c;实现多元化、多功能的标签&#xff08;或是属性&#xff09;。辣么&#xff0c;啥是指令&#xff1f;…

WildFly 9 –别希望您的控制台像这样!

每个人都可能听到这个消息。 周一发布了第一个WildFly 9.0.0.Alpha1版本。 您可以从wildfly.org网站上下载它&#xff0c;最大的变化是它是由一个新的功能配置工具构建的&#xff0c;该工具位于现在单独的核心发行版中&#xff0c;并且还包含一个新的Servlet发行版 &#xff08…

磁盘性能 -- IOPS 和 吞吐量 说明

一. Wikepedia上有关IOPS 的说明链接如下&#xff1a;http://en.wikipedia.org/wiki/IOPSIOPS (Input/Output OperationsPer Second, pronounced i-ops) is a common performance measurement used to benchmark computer storage devices like harddisk drives (HDD), solid s…

3使用Jsoup解析Java中HTML文件的示例

HTML是Web的核心&#xff0c;无论您是通过JavaScript&#xff0c;JSP&#xff0c;PHP&#xff0c;ASP还是任何其他Web技术动态生成的&#xff0c;您在Internet上看到的所有页面都是基于HTML的。 您的浏览器实际上是解析HTML并为您呈现。 但是&#xff0c;如果需要解析HTML文档并…

径向菜单的制作

最终效果&#xff1a; 在径向菜单的制作前&#xff0c;首先需要知道几点知识点&#xff1a; Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间&#xff1b; Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数&#xff1b; 这两个函数中的X 都是指的“弧度”…

OptaPlanner –具有真实道路距离的车辆路线

在现实世界中&#xff0c;车辆路径问题&#xff08;VRP&#xff09;中的车辆必须走这条路&#xff1a;它们不能在客户之间直线行驶。 大多数VRP研究论文和演示都乐于忽略此实现细节。 和我一样&#xff0c;过去。 尽管使用道路距离&#xff08;而不是空中距离&#xff09;不会对…

关于如何在PSA众多请求号中查找数据是属于哪一条。

其中有两个TCODE: RSTSODS与RSTSODS&#xff0c;我们可以查找数据源的PSA表&#xff0c;然后在SE16中可以看到。 另外我们对PSA点击管理&#xff0c;一般会出现在窗口上面出现PSA的表名。 当然有些不在的话&#xff0c;那就去查找那两个TCODE。转载于:https://www.cnblogs.com/…

揭示垃圾收集暂停的时间长度

有几种方法可以改善您的产品。 一种方法是仔细跟踪用户的体验并在此基础上进行改进。 我们确实自己应用了此技术&#xff0c;并再次花了一些时间查看不同的数据 除了我们追求的许多其他方面之外&#xff0c;我们还提出了一个问题“延迟GC触发应用程序的最坏情况是什么”。 为了…

[转]android ListView详解

本文转自&#xff1a;http://www.cnblogs.com/allin/archive/2010/05/11/1732200.html 由于google doc 很多人都打不开&#xff0c;故更新了源码下载地址 【源码下载】----2011-01-18 在android开发中ListView是比较常用的组件&#xff0c;它以列表的形式展示具体内容&#xff…

JBoss BPM Suite 6.0.3版本的5个实用技巧

上周&#xff0c;红帽发布了标记为6.0.3的JBoss BPM Suite的下一版本&#xff0c;已订阅的用户可以在其客户门户中使用。 如果您对该版本的新增功能感到好奇&#xff0c;请在客户门户网站上在线查看版本说明和其余文档 。 我们正在寻找一些简单的方法来开始使用此新版本&…

Django学习---原生ajax

Ajax 原生ajax Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作&#xff0c;该对象在主流浏览器中均存在(除早起的IE)&#xff0c;Ajax首次出现IE5.5中存在&#xff08;ActiveX控件&#xff09;。 XmlHttpRequest对象的主要方法&#xff1a; a. void open(String …

霸主–统治和管理API的地方

今天我们生活在一个越来越分散的世界中。 如今的计算机系统不再是在随机桌子下面的某些硬件上运行单个部门项目&#xff0c;而是大规模&#xff0c;集中甚至分散地运行。 监视和管理的需求从未改变&#xff0c;但是随着时间的推移变得越来越复杂。 如果将所有这些跨功能功能都放…