一个有态度的博客

Attitude is everything。

Asp.Net MVC5 + Kindeditor 4.1.11编辑器集成七牛云上传功能

Asp.Net MVC5 + Kindeditor 4.1.11编辑器集成七牛云上传功能

KindEditor是一款非常受欢迎的国产开源的富文本编辑器,拥有广泛的用户基础。KindEditor默认就拥有图片、文件上传功能,但都是本地上传。而现在都是讲云计算、云存储的时代了,所以本篇为KindEditor增加一个上传图片文件到七牛云存储的插件,本次只是演示为主,不涉及数据库操作。

本人比较喜欢.Net,所以这里以MVC5为例。

1、先创建一个Asp.Net Mvc5 项目,这里就用默认的框架。

2、从https://github.com/kindsoft/kindeditor 上下载一个最新版本的KindEditor,目前最新版是4.1.11,2016年5月份更新。解压并拷贝到项目根目录,删除不是必要的文件。最后只保留以下目录和文件。


3、在打开Views/Home/Index.cshtml文件,在里面添加一个表单:


并引入KindEditor文件和jQuery.form.js插件,并初始化KindEditor编辑器。


前台就能正常显示编辑器了。

4、在KindEditor的plugins目录下创建一个qiniu的目录,并在里面创建一个文件名为qiniu.js的Javascript文件。内容如下:


5、打开KinkEditor.all.js,给七牛添加一个图标,

打开lang/zh-CN.js添加:

qiniu:'七牛',

在Index.cshtml中添加css

.ke-icon-qiniu {
	background-image: url('/kindeditor/qiniu.png');
	width: 16px;
	height: 16px;
}

到这里编辑器中已经能显示七牛的图标了,点击并能弹出一个对话框。

6、通过NuGet搜索Qiniu,NuGet上最新的是7.0.0.1版本,安装并在项目中引用。

在Home控制器中添加一个GetQiNiuToken action,这个action主要是为Kindeditror提供Token,代码不多,官方文档上也很详细,这里我没有实现复杂的功能,只是为Kindeditor提供了Token,新文件名,默认文件域名等信息,详细代码如下:

到此,通过Kindeditor上传图片到七牛云己实现,如果要上传文件只要修改上传策略PutPolicy即可。我这里没有使用回调函数来检测是否上传成功,而是直接返回了路径,不管是否成功都返回了路径,这里还可以优化,以待有时间再缕缕研究。

本篇源码下载:http://pan.baidu.com/s/1jHU186i

2017.2.5更新:

更新qiniu.js文件,添加代码可以实现上传的文件名有后辍:

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。

http://blog.postcha.com/read/83 Asp.Net MVC5 + Kindeditor 4.1.11编辑器集成七牛云上传功能

2 条评论

  • 流亡
    流亡

    博主可否给个联系方式 这篇文章本人有点问题想请教

    2017-02-07 22:57
  • 小梁博客
    小梁博客

    文章最后有代码。qq:85167538

    2017-02-09 13:21

登录后才能发表评论!