2019獨角獸企業重金招聘Python工程師標準>>>

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.

我是參考的Article-editor，感覺這個就不錯。

2.搭建工程

Spring Boot工程先搞起來，工程目錄如下：

工程使用了Spring data jpa，還有thymeleaf。啟動后的效果。

頁面上的輸入框有數據，就說明天前后臺交互沒問題。

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

3.集成CKEditor

把下載后的文件夾ckeditor放到static目錄下面，static是Spring Boot默認的資源路徑。

參考Article-editor樣式。

index.html中引入ckeditor.js。
<script th:src="@{/ckeditor/ckeditor.js}"></script>

config.js是默認導入的，參考ckeditor.js。

如果想定制樣式在config.js中就可以，另外寫一個js也可以，不過需要html中需要引入，會覆蓋掉config.js中的配置。

集成后的效果：

還有一種最簡單的使用方式，直接在textarea的class里面添加CKEditor。只是效果沒官網給的好看。
<textarea cols="80" class="ckeditor" id="editor1" name="comments" rows="10">
</textarea>

接下來就用這種簡潔的方式。

上傳

1.上傳按鈕

默認是沒有上傳按鈕的。

config.js中配置config.filebrowserImageUploadUrl。

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

/files/upload/image這個是后臺配置的@RequestMapping里面的值。

上傳tab出來了。。。

2.代碼實現

1.application.properties

application.properties中配置存儲路徑和訪問URL

2.資源路徑配置

把本地的絕對路徑加到spring boot的靜態資源路徑里，作為資源服務器使用。

3.上傳處理

@Controller @RequestMapping("/files") public class FilesController {Logger logger = org.apache.log4j.Logger.getLogger(FilesController.class);@Value(value = "${ckeditor.storage.image.path}")private String ckeditorStorageImagePath;@Value(value = "${ckeditor.access.image.url}")private String ckeditorAccessImageUrl;@RequestMapping(value = "/upload/image", method = RequestMethod.POST)@ResponseBodypublic String uploadImage(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {String name = "";if (!file.isEmpty()) {try {response.setContentType("text/html; charset=UTF-8");response.setHeader("Cache-Control", "no-cache");//解決跨域問題//Refused to display 'http://localhost:8080/upload/mgmt/img?CKEditor=practice_content&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.response.setHeader("X-Frame-Options", "SAMEORIGIN");PrintWriter out = response.getWriter();String fileClientName = file.getOriginalFilename();String pathName = ckeditorStorageImagePath + fileClientName;File newfile = new File(pathName);byte[] bytes = file.getBytes();BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(newfile));stream.write(bytes);stream.close();// 組裝返回url，以便于ckeditor定位圖片String fileUrl = ckeditorAccessImageUrl + File.separator + newfile.getName();// 將上傳的圖片的url返回給ckeditorString callback = request.getParameter("CKEditorFuncNum");String script = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ", '" + fileUrl + "');</script>";out.println(script);out.flush();out.close();} catch (Exception e) {logger.info("You failed to upload " + name + " => " + e.getMessage());}} else {logger.info("You failed to upload " + name + " because the file was empty.");}return "SUCCESS";} }

這里參考基于spring-boot的web應用，ckeditor上傳文件圖片文件實現的。上傳也可以集成CKFinder來實現，問題是CKFinder不是開源的軟件，對java的支持也停留在2.6.2.1，所以上傳方法自己寫一下了。

3.上傳效果

本地路徑下面的圖片

后臺交互

頁面上能夠顯示了，怎么保存到數據庫呢？看官網給的解釋Saving Data。

上面可以看出，提交到后臺的是一段html文本。來驗證一下，頁面上隨便來點文本，加點樣式，上傳個圖片。

傳過來的是一段文本，數據庫在保存的時候，字段的值范圍設的大一些或者直接設置字段類型為longtext

優化

1.預覽優化

預覽顯示一段英文，這個去掉好看些。

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

參考

基于spring-boot的web應用，ckeditor上傳文件圖片文件

代碼示例

轉載于:https://my.oschina.net/wuxinshui/blog/967674

總結

以上是生活随笔為你收集整理的Spring Boot集成CKEditor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。