实现这个功能遇到很多坑,在网上也找了很多资料,但是网上的多而杂,所以就总结下。
下载网盘ckeditor:
链接:https://pan.baidu.com/s/1U-mztsiIdkdNHUGyoHjSBw
提取码:7uyj
效果图:
Html代码:
<div class="noticeContent">
@*纯文本编辑控件*@
<textarea id="editor" name="NoticeContent" class="form-control"></textarea>
</div>
<script src="~/Content/ckeditor/ckeditor.js"></script>
var imgs = [];
var CKEDITOR;
CKEDITOR.replace('editor', { //编辑器设置
language: 'zh-cn', // 语言: 中文,默认是英文
allowedContent: true, //关闭标签过滤
removePlugins: 'elementspath', // 编辑器下面不显示元素路径
resize_enabled: true, // 是否允许拖动改变编辑器的大小
});
Controllers代码:
[HttpPost]
public string SaveDetailImg(HttpPostedFileBase files)//富文本编辑器上传图片
{
try
{
if (files != null)
{
//返回后缀。 upload.FileName获取文件的全名
string fileExtension = Path.GetExtension(files.FileName);
//将字符串转换为小写形式地副本
fileExtension = fileExtension.ToLower();
//判断上传的附件格式
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
{
//检查目录是否存在,不存在就创建
if (!Directory.Exists(Server.MapPath("~/Document/Notice/")))
{
//在项目所在的位置添加它的子目录
Directory.CreateDirectory(Server.MapPath("~/Document/Notice/"));
}
//拼接文件名====当前日期+全球唯一标识符+后缀(目的是区分上传的图片)
string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;
//获取物理路径===也就是绝对路径
string filePath = Server.MapPath("~/Document/Notice/") + fileName;
//把文件保存到物理路径当中
files.SaveAs(filePath);
//由于可能用户保存数据时,不想保存数据那么我们的数据就是垃圾数据,
//因此我们先把我们的数据上传到临时表中,借用session保存上传的数据。避免垃圾数据保存
//获取上传的临时文件表(未保存的)
List<string> tempFile = new List<string>();
if (Session["tempEditorFile"] != null)
{
tempFile = Session["tempEditorFile"] as List<string>;
}
//未保存公告的临时文件
tempFile.Add(fileName);
//保存到session
Session["tempEditorFile"] = tempFile;
string url = "/Document/Notice/" + fileName;
return "true," + url;
}
}
}
catch (Exception)
{
throw;
}
return "";
}
还需要改一下插件的调用:
plugins=>multiimg=>dialogs=>image.html
有可能图片不显示该里面的路径,拼接根目录下的文件夹
plugins=>multiimg=>dialogs=>multiimg.js
利用时间写了一个demo:
https://download.csdn.net/download/wwq0813/11193598