ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
第二步:在html页面引入textarea标签;
<textarea name="Content_ch" rows="4" class="form-control ckeditor"></textarea>
第三步:在js中初始化富文本编辑器;
var content_ch = CKEDITOR.replace("Content_ch", { height: "300px" });
完成上面三个步骤就可以使用ckeditor富文本框编辑器了。但是如果需要支持上传图片以及直接复制黏贴图片,那么请继续往下看。
1.修改ckeditor配置文件config.js,在配置文件中添加如下信息:
config.extraPlugins = "uploadimage";
config.filebrowserImageUploadUrl ="/Common/CkUpLoadImg";//上传图片到服务器处理接口(返回成功结果必须如下格式:{“uploaded”:1,"fileName":"文件名","url":"文件路径"},错误格式为:{"uploaded":0,"error":{"message":"错误信息"}})
config.imageUploadUrl = "/Common/CkUpLoadImg";//上传图片到服务器处理接口(返回成功结果必须如下格式:{“uploaded”:1,"fileName":"文件名","url":"文件路径"},错误格式为:{"uploaded":0,"error":{"message":"错误信息"}})
配置好上面信息,就可以直接使用富文本框自带上传工具进行上传并保存到服务器。但是单单这样还不能实现复制黏贴图片功能。请继续往下看:
2.在页面添加如下脚本处理:
content_ch.on("change", function (e) {
var a = e.editor.document;
var b = a.find("img");
var count = b.count();
for (var i = 0; i < count; i++) {
if (b.getItem(i).$.src.split("/")[0].indexOf("http")==-1) {
upload(i, b, function (i, b, imgurl) {
b.getItem(i).$.src = imgurl;
var a = content_ch.document.$.getElementsByTagName("img")[i];
a.setAttribute("data-cke-saved-src", imgurl);//替换ckEditor的保存内容,必须要加上这一句,否则无法实现
});
}
}
});
function upload(i, b, callback) {
var dom = b.getItem(i).$
var src = dom.src;//获取img的src
src = src.substring(0, 10) == "data:image" ? dom.getAttribute("data-src") : src
$.ajax({
type: "post",
url: "/Common/CkCopyImg",//服务器处理接口
data: {
imgUrl: src
},
success: function (data) {
//根据返回地址数据自定义
var imgurl = data.result.data; //获取回传的图片url
//获取并更改到现有的图片标签src的值
callback(i, b, imgurl)
}
});
}
至此,就已完成复制黏贴图片到富文本框功能。但是这里面存在一个问题:就是每次富文本框内容发生改变后都会导致图片重新上传,会造成很多垃圾文件产生,可以考虑不使用chang事件,在保存整个表单内容的时候在统一处理富文本框里面包含img标签的内容,实现方法跟上面大体一致,这边就不做演示,亲们可以自己动手优化。
附上后台服务器处理接口:
/// <summary>
/// 富文本框上传图片处理
/// </summary>
/// <returns></returns>
public ActionResult CkUpLoadImg()
{
var br = UpLoadProductImage();
if (br.IsSuccessed)
{
var data = br.Data as Util.FileResultDto;
var url=data.FilePath.Replace(""","/");
System.Collections.Hashtable param = new System.Collections.Hashtable();
param.Add("uploaded", 1);
param.Add("fileName", data.FileName);
param.Add("url",url);
return ToJsonResult(param);
}
else
{
return Content("{"uploaded":0, "error":{"message":""+br.Message+""}}");
}
}
/// <summary>
/// 文件实体类
/// </summary>
public class FileResultDto
{
/// <summary>
/// 原文件名
/// </summary>
public string OriginFileName { get; set; }
/// <summary>
/// 文件名称
/// </summary>
public string FileName { get; set; }
/// <summary>
/// 文件路径
/// </summary>
public string FilePath { get; set; }
/// <summary>
/// 文件类型
/// </summary>
public string FileType { get; set; }
}