教你如何在kindeditor中扩展图片裁剪的功能

本文介绍如何在kindeditor中扩展一个自定义按钮,并实现对应的功能

  • 首先我们看下目录结构,目录包含 attached、editor、script、tools 四个文件夹
    attached 用来存放上传的图片,可以在tools里upload_json.ashx 代码里修改上传的路径
    editor 编辑器所用到的基本文件都放在此文件夹
    script 文件里引入了 artDialog 弹出插件(ps:本人最喜欢的弹窗插件)
    tools 处理上传图片、管理图片、裁剪图片的类和文件都放在此文件夹

  • 编辑器的具体配置,先删除lang文件夹下无用的语言包配置文件,留下en.js、zh-CN.js、zh-TW.js 即可。分别打开三个文件在source节点上面加上 cutthumbs: ‘裁剪’, 这里我只在zh-CN.js加了,实际上三个都加才算合适。

  • 在plugins文件夹下新建cutthumbs文件夹,然后在文件夹下新建cutthumbs.js ,写入如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    KindEditor.plugin('cutthumbs', function (K) {
    var editor = this, name = 'cutthumbs';
    // 点击图标时执行
    editor.clickToolbar(name, function () {
    //editor.insertHtml('图片裁剪');
    art.dialog.open(editor.pluginsPath + 'cutthumbs/index.html',
    {
    id: 'cutthumbs_win',
    title: '图片裁剪----------www.peng8.net-----------作者:黑桃K',
    width: '800px',
    height: '70%',
    lock: true
    });
    });
    });
  • 将我写好的 图片裁剪的index.html 及 相关裁剪的插件 拷贝到 cutthumbs里

  • index.html 里书写前端裁剪的js代码,下载的DEMO里有index.html的相关代码,由于很长我就不贴出来了
  • 接着是服务端裁剪用到的方法,由于本人用的asp.net,就只贴出asp.net后台相关的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string result = string.Empty;
if (!string.IsNullOrEmpty(context.Request.Form["ImgResult"]))
{
string a = context.Request.Url.Host;
string ImgInfo = System.Web.HttpUtility.UrlDecode(context.Request.Form["ImgResult"].ToString());
string oldpath = context.Server.MapPath(ImageResizer.Util.PathUtils.RemoveQueryString(ImgInfo));
string croppedFileName = Guid.NewGuid().ToString();
//物理完整路径
string path = "/attached/image/" + DateTime.Now.ToString("yyyyMMdd") + "/"; //站点目录+上传目录
string toFileFullPath = GetMapPath(path);
//检查有该路径是否就创建
if (!Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
string newFullPathName = string.Concat(toFileFullPath, croppedFileName, ".jpg");
ImageBuilder.Current.Build(oldpath, newFullPathName, new ResizeSettings(ImgInfo));
result = "{\"success\":true,\"path\":\"" + (path+croppedFileName+".jpg") + "\"}";
}
else {
result = "{\"success\":false,\"path\":\"\"}";
}
context.Response.Write(result);
context.Response.End();
}
  • 最后上传几张效果图给大家看看

demo下载地址:点我下载DEMO