kindeditor php上传类,kindEditor 3.5.2 增加 php 上传附件 分享。

感谢 kindsoft.net 提供如此给力的编辑器。kindeditor 是本人觉得目前市面上最实用的编辑器。本人老早老早以前就开始使用了。

以前为了自己的项目也对编辑器进行过一些修改。但大多属于只伤皮毛不动筋骨的肤浅改造,也没有认真研究过KindEditor的深层。

严格来说这一次的修改冷然是一些皮毛,因为时至今日,还是有许多代码看不懂。

这一次是为kindEditor 3.5.2 增加了php上传附件的功能。官方论坛里看到好多人问,却很少有人答,尽管貌似有位仁兄贴了一个增加附件的帖子,但是我照其方法改造完脚本后,居然不能运行了。

不得已,只得自己动手从头改造,参考了原本imgupload的脚本和页面。

把改动了的行号先告诉大家吧:

1、/editor/skins/default.css 268行

2、/editor/kindeditor.js  99行

3、/editor/kindeditor.js  3060行

4、/editor/kindeditor.js  3175行

5、/editor/kindeditor.js  4505行

另外:

1、在/editor/skins/default/default.gif 的最后增加了一个我自己手绘的上传附件图标。

2、把php脚本目录放到了editor下边。

3、把用来保存图片和附件的attached目录放到了网站根目录下边,跟editor平级。

其实在KE.plugin['upload']里边还可以增加check,来简单的判断一下文件类型,由于比较懒,就没加。

也可以在/editor/php/的upload_json.php和uploadFiles.php文件里边加上创建子目录的脚本,由于比较懒,也没加。

还有需要说明的是,如果想要修改目录级别,给出修改位置如下:

uploadFiles.php 修改附件保存位置: 13行(相对路径,用来保存文件) 和 15行(绝对路径,用来在编辑器和页面中显示文件)

upload_json.php 修改图片保存位置: 13行(相对路径,用来保存文件) 和 15行(绝对路径,用来在编辑器和页面中显示图片)

我个人比较喜欢用根路径,这样就不怕目录层级的改变了,我好像把kindeditor里表情的路径也改成这样的啦。

最后说一点,做到上述修改,并不需要多高的js水平。我就不写代码了,直接下载了用就行,能看懂代码的,就自己写了,看不懂代码的,写了也是白写基本上。再次对kindsoft.net膜拜。

如果不出意外,脚本只放一周时间……

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
KindEditor是一款基于JavaScript的富文本编辑器,它可以方便地集成到网站中,并支持图片上传功能。在Spring Boot中实现KindEditor图片上传可以按照以下步骤进行: 1. 在Spring Boot中添加以下依赖: ```xml <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> ``` 2. 创建一个Controller用于处理图片上传请求,代码如下: ```java @RestController @RequestMapping("/upload") public class FileUploadController { @PostMapping("/image") public String uploadImage(HttpServletRequest request) throws Exception { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile file = multipartRequest.getFile("imgFile"); String filename = file.getOriginalFilename(); String suffix = filename.substring(filename.lastIndexOf(".") + 1); String newFilename = UUID.randomUUID().toString() + "." + suffix; String savePath = "D:/upload/images/" + newFilename; // 上传文件保存路径,根据实际情况修改 File destFile = new File(savePath); if (!destFile.getParentFile().exists()) { destFile.getParentFile().mkdirs(); } file.transferTo(destFile); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/images/" + newFilename; // 图片访问URL,根据实际情况修改 return "{\"error\":0,\"url\":\"" + url + "\"}"; } } ``` 3. 在HTML页面中集成KindEditor,并设置图片上传的请求地址,代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KindEditor图片上传示例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.css" /> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.js"></script> </head> <body> <textarea id="editor"></textarea> <script> KindEditor.ready(function(K) { K.create('#editor', { uploadJson: '/upload/image', allowFileManager: false }); }); </script> </body> </html> ``` 4. 启动Spring Boot应用,访问HTML页面即可进行图片上传上传的图片会保存在指定的路径中,并返回图片的访问URL给KindEditor进行显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值