CKEditor is a free, Open Source HTML text editor designed to simplify website content creation.
背景
項目中需要用到富文本編輯器首量，朋友推薦用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor與CKFinder學(xué)習--整合SpringMVC介紹的不錯窟却，內(nèi)容很詳細剖笙，可是我們用的是Spring boot，這就蛋疼了涧窒，加上CKeditor不熟悉心肪，走了一些彎路，搞了好久纠吴，參考一些前輩的文章硬鞍，加上自己的理解，終于run起來了戴已。通過這次搗鼓固该，搞明白了一件事，一步步走糖儡，一步步實現(xiàn)效果伐坏，之前看到網(wǎng)上有現(xiàn)成的，直接搞起握联，到最后灰頭土臉桦沉。
集成
1.官網(wǎng)demo
官網(wǎng)給出了幾種使用樣式每瞒，可以參考一下。Github上有源碼纯露，可以過去玩玩ckeditor-docs-samples.
我是參考的Article-editor剿骨，感覺這個就不錯。
2.搭建工程
Spring Boot工程先搞起來埠褪，工程目錄如下：
工程使用了Spring data jpa浓利，還有thymeleaf。啟動后的效果组橄。
頁面上的輸入框有數(shù)據(jù)荞膘，就說明天前后臺交互沒問題。
@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是默認導(dǎo)入的屠升，參考ckeditor.js。
如果想定制樣式在config.js中就可以狭郑，另外寫一個js也可以腹暖，不過需要html中需要引入，會覆蓋掉config.js中的配置翰萨。
集成后的效果：
還有一種最簡單的使用方式脏答，直接在textarea的class里面添加CKEditor。只是效果沒官網(wǎng)給的好看亩鬼。
<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.代碼實現(xiàn)
1.application.properties
application.properties中配置存儲路徑和訪問URL
2.資源路徑配置
把本地的絕對路徑加到spring boot的靜態(tài)資源路徑里辛蚊，作為資源服務(wù)器使用粤蝎。
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)
@ResponseBody
public 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返回給ckeditor
String 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應(yīng)用，ckeditor上傳文件圖片文件實現(xiàn)的。上傳也可以集成CKFinder來實現(xiàn)贤重，問題是CKFinder不是開源的軟件漾肮，對java的支持也停留在2.6.2.1谤狡，所以上傳方法自己寫一下了。
3.上傳效果
本地路徑下面的圖片
后臺交互
頁面上能夠顯示了卧檐，怎么保存到數(shù)據(jù)庫呢墓懂？看官網(wǎng)給的解釋Saving Data。
上面可以看出霉囚，提交到后臺的是一段html文本捕仔。來驗證一下，頁面上隨便來點文本盈罐，加點樣式榜跌，上傳個圖片。
傳過來的是一段文本盅粪，數(shù)據(jù)庫在保存的時候钓葫，字段的值范圍設(shè)的大一些或者直接設(shè)置字段類型為longtext
優(yōu)化
1.預(yù)覽優(yōu)化
預(yù)覽顯示一段英文，這個去掉好看些票顾。
ckeditor/plugins/image/dialogs/image.js础浮，把||后面的那段英文刪除。
