Spring Boot集成CKEditor

释放双眼,带上耳机,听听看~!

CKEditor is a free, Open Source HTML text editor designed to simplify website content creation.

背景

项目中需要用到富文本编辑器,朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor与CKFinder学习–整合SpringMVC介绍的不错,内容很详细,可是我们用的是Spring boot,这就蛋疼了,加上CKeditor不熟悉,走了一些弯路,搞了好久,参考一些前辈的文章,加上自己的理解,终于run起来了。通过这次捣鼓,搞明白了一件事,一步步走,一步步实现效果,之前看到网上有现成的,直接搞起,到最后灰头土脸。

集成

1.官网demo

官网给出了几种使用样式,可以参考一下。Github上有源码,可以过去玩玩ckeditor-docs-samples.

Spring Boot集成CKEditor

我是参考的Article-editor,感觉这个就不错。

2.搭建工程

Spring Boot工程先搞起来,工程目录如下:

Spring Boot集成CKEditor

工程使用了Spring data jpa,还有thymeleaf。启动后的效果。

Spring Boot集成CKEditor

页面上的输入框有数据,就说明天前后台交互没问题。


1
2
3
4
5
6
7
8
1@RequestMapping(value = "/login",method = RequestMethod.GET)
2    public ModelAndView index(org.springframework.ui.Model model){
3        Student student=new Student("AA","1","abcdljaldf");
4        model.addAttribute("status","Hello");
5        model.addAttribute("page",student);
6        return new ModelAndView("/index");
7    }
8

3.集成CKEditor

把下载后的文件夹ckeditor放到static目录下面,static是Spring Boot默认的资源路径。

参考Article-editor样式。

Spring Boot集成CKEditor

index.html中引入ckeditor.js。

<script th:src="@{/ckeditor/ckeditor.js}"></script>

config.js是默认导入的,参考ckeditor.js。

Spring Boot集成CKEditor

如果想定制样式在config.js中就可以,另外写一个js也可以,不过需要html中需要引入,会覆盖掉config.js中的配置。

集成后的效果:

Spring Boot集成CKEditor

还有一种最简单的使用方式,直接在textarea的class里面添加CKEditor。只是效果没官网给的好看。

<textarea cols="80" class="ckeditor" id="editor1" name="comments" rows="10">
</textarea>

Spring Boot集成CKEditor

接下来就用这种简洁的方式。

上传

1.上传按钮

默认是没有上传按钮的。

Spring Boot集成CKEditor

config.js中配置config.filebrowserImageUploadUrl。

config.filebrowserImageUploadUrl= '/files/upload/image'。

/files/upload/image这个是后台配置的@RequestMapping里面的值。

上传tab出来了。。。

Spring Boot集成CKEditor

2.代码实现

1.application.properties

application.properties中配置存储路径和访问URL

Spring Boot集成CKEditor

2.资源路径配置

把本地的绝对路径加到spring boot的静态资源路径里,作为资源服务器使用。

Spring Boot集成CKEditor

3.上传处理


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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
1@Controller
2@RequestMapping(&quot;/files&quot;)
3public class FilesController {
4
5    Logger logger = org.apache.log4j.Logger.getLogger(FilesController.class);
6
7    @Value(value = &quot;${ckeditor.storage.image.path}&quot;)
8    private String ckeditorStorageImagePath;
9
10    @Value(value = &quot;${ckeditor.access.image.url}&quot;)
11    private String ckeditorAccessImageUrl;
12
13    @RequestMapping(value = &quot;/upload/image&quot;, method = RequestMethod.POST)
14    @ResponseBody
15    public String uploadImage(@RequestParam(&quot;upload&quot;) MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
16        String name = &quot;&quot;;
17        if (!file.isEmpty()) {
18            try {
19                response.setContentType(&quot;text/html; charset=UTF-8&quot;);
20                response.setHeader(&quot;Cache-Control&quot;, &quot;no-cache&quot;);
21                //解决跨域问题
22                //Refused to display &#x27;http://localhost:8080/upload/mgmt/img?CKEditor=practice_content&amp;CKEditorFuncNum=1&amp;langCode=zh-cn&#x27; in a frame because it set &#x27;X-Frame-Options&#x27; to &#x27;DENY&#x27;.
23                response.setHeader(&quot;X-Frame-Options&quot;, &quot;SAMEORIGIN&quot;);
24                PrintWriter out = response.getWriter();
25
26                String fileClientName = file.getOriginalFilename();
27                String pathName = ckeditorStorageImagePath + fileClientName;
28                File newfile = new File(pathName);
29                byte[] bytes = file.getBytes();
30                BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(newfile));
31                stream.write(bytes);
32                stream.close();
33
34                // 组装返回url,以便于ckeditor定位图片
35                String fileUrl = ckeditorAccessImageUrl + File.separator + newfile.getName();
36
37                // 将上传的图片的url返回给ckeditor
38                String callback = request.getParameter(&quot;CKEditorFuncNum&quot;);
39                String script = &quot;&lt;script type=\&quot;text/javascript\&quot;&gt;window.parent.CKEDITOR.tools.callFunction(&quot; + callback + &quot;, &#x27;&quot; + fileUrl + &quot;&#x27;);&lt;/script&gt;&quot;;
40
41                out.println(script);
42                out.flush();
43                out.close();
44            } catch (Exception e) {
45                logger.info(&quot;You failed to upload &quot; + name + &quot; =&gt; &quot; + e.getMessage());
46            }
47        } else {
48            logger.info(&quot;You failed to upload &quot; + name + &quot; because the file was empty.&quot;);
49        }
50        return &quot;SUCCESS&quot;;
51    }
52}
53

这里参考基于spring-boot的web应用,ckeditor上传文件图片文件实现的。上传也可以集成CKFinder来实现,问题是CKFinder不是开源的软件,对java的支持也停留在2.6.2.1,所以上传方法自己写一下了。

3.上传效果

Spring Boot集成CKEditor

Spring Boot集成CKEditor

Spring Boot集成CKEditor

本地路径下面的图片

Spring Boot集成CKEditor

后台交互

页面上能够显示了,怎么保存到数据库呢?看官网给的解释Saving Data。

Spring Boot集成CKEditor

上面可以看出,提交到后台的是一段html文本。来验证一下,页面上随便来点文本,加点样式,上传个图片。

Spring Boot集成CKEditor

传过来的是一段文本,数据库在保存的时候,字段的值范围设的大一些或者直接设置字段类型为longtext

Spring Boot集成CKEditor

优化

1.预览优化

预览显示一段英文,这个去掉好看些。

ckeditor/plugins/image/dialogs/image.js,把||后面的那段英文删除。

Spring Boot集成CKEditor

Spring Boot集成CKEditor

Spring Boot集成CKEditor

参考

基于spring-boot的web应用,ckeditor上传文件图片文件

代码示例

给TA打赏
共{{data.count}}人
人已打赏
安全技术

Ubuntu下安装Mysql 以及mysql-query-browser

2022-1-11 12:36:11

安全运维

小米运维动态部署和资源管理实践

2016-12-24 3:56:52

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索