CKEditor的使用，并实现图片上传

ckeditor是一款富文本编辑器，类似于论坛帖子下边的回复输入框。

1、先要下载相应js文件，点我下载。根据自己的需求选择插件的丰富程度，下载后解压得到一个文件夹，放到webRoot目录下。

2、在jsp页面或html页面引入核心js。

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

3、在需要引入富文本的地方加入一个textarea标签。

<textarea name="ckeditor"></textarea></td>

4、注意name属性，然后在页面中加下下面js代码，效果就出来了。

<script>CKEDITOR.replace('ckeditor'});
</script>

5、很简单，但是此时我们发现，编辑器上的上传图片功能没有。所以代码需要改成下面这样。

<script>CKEDITOR.replace('ckeditor',{   filebrowserImageUploadUrl : '${ctx}/uploadImg/uploadImg',  language : 'zh-cn',  });
</script>

6、这里的filebrowserImageUploadUrl 是我写的一个上传图片的接口，代码如下。

 1 @Controller
 2 @RequestMapping("uploadImg")
 3 public class FileUploadController {
 4     /*
 5      * 图片命名格式
 6      */
 7     private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";
 8
 9     protected Logger logger = Logger.getLogger(FileUploadController.class);
10
11     /*
12      * 上传图片文件夹
13      */
14     private static final String UPLOAD_PATH = "/upload/CKimg/";
15
16     /*
17      * 上传图片
18      */
19     @RequestMapping(value = "uploadImg")
20     public void uplodaImg(@RequestParam("upload") MultipartFile file,//
21             HttpServletRequest request, //
22             HttpServletResponse response)//
23     {
24
25         try {
26
27             String proPath = request.getSession().getServletContext()
28                     .getRealPath("/");
29             String proName = request.getContextPath();
30             String path = proPath + UPLOAD_PATH;
31             PrintWriter out = response.getWriter();
32             String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
33             String fileName = file.getOriginalFilename();
34             String uploadContentType = file.getContentType();
35             String expandedName = "";
36             if (uploadContentType.equals("image/pjpeg")
37                     || uploadContentType.equals("image/jpeg")) {
38                 // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
39                 expandedName = ".jpg";
40             } else if (uploadContentType.equals("image/png")
41                     || uploadContentType.equals("image/x-png")) {
42                 // IE6上传的png图片的headimageContentType是"image/x-png"
43                 expandedName = ".png";
44             } else if (uploadContentType.equals("image/gif")) {
45                 expandedName = ".gif";
46             } else if (uploadContentType.equals("image/bmp")) {
47                 expandedName = ".bmp";
48             } else {
49                 out.println("<script type=\"text/javascript\">");
50                 out.println("window.parent.CKEDITOR.tools.callFunction("
51                         + CKEditorFuncNum + ",'',"
52                         + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
53                 out.println("</script>");
54                 return;
55             }
56             if (file.getSize() > 1024 * 1024 * 2) {
57                 out.println("<script type=\"text/javascript\">");
58                 out.println("window.parent.CKEDITOR.tools.callFunction("
59                         + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');");
60                 out.println("</script>");
61                 return;
62             }
63             DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
64             fileName = df.format(new Date()) + expandedName;
65             file.transferTo(new File(path + "/" + fileName));
66             out.println("<script type=\"text/javascript\">");
67             out.println("window.parent.CKEDITOR.tools.callFunction("
68                     + CKEditorFuncNum + ",'" + proName + "/upload/CKimg/"
69                     + fileName + "','')");
70             out.println("</script>");
71             return;
72         } catch (IllegalStateException e) {
73             e.printStackTrace();
74         } catch (IOException e) {
75             e.printStackTrace();
76         } catch (Exception e) {
77             e.printStackTrace();
78         }
79     }

至此，所有功能都已经实现。

2737

转载于:https://www.cnblogs.com/shii/p/7245577.html

CKEditor的使用，并实现图片上传相关推荐

第12章[12.10.1] Ext JS + CKEditor+Spring Boot 实现编辑器图片上传
CKEditor 支持多种图片上传实现方式, 可以直接使用CKEditor 提供的云服务,不过这个服务是收费的, 而且上传的图片如果安全性要求较高,该方式可能不适合.本篇基于Spring Boot实现 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)--整合Ckeditor且实现图片上传配置CKEDITOR 精简文件解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
asp.net core集成CKEditor实现图片上传功能
背景本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 1.visual studio 2019 开发环境 2. ...
ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
使用struts2完成ckeditor和图片上传
代码地址如下: http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor ...
ckeditor ——在图片上传中上传其他文件（word等）
最近项目中遇到需要用富文本编辑文档,最终以公告的形式在内网中展示,其中一个简单的要求就是要有附件.因为知道ckeditor是有图片的上传了,于是想是不是也可以上传如word,pdf等附件呢.这样内网展 ...
PHP+CKEditor 3配置详细说明(包括图片上传)
首先,我们要在页面中加入CKEditor的js文件: <head> ... <script type="text/javascript&qu ...

CKEditor的使用，并实现图片上传

CKEditor的使用，并实现图片上传相关推荐

最新文章

热门文章