Spring boot 集成ckeditor
阿新 • • 發佈：2018-06-17
manager .html cstyle 引入 correct display zh-cn eset tags
1:下載ckeditor 4.4.2 full package ,官網沒有顯示， 需要在最新版本的ckeditor download右鍵，復制鏈接， 輸入到導航欄，將版本號改為自己想要的版本號。
https://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.2/ckeditor_4.4.2_full.zip
2：修改 config.js，加載圖片上傳 插件
/** * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.html or http://ckeditor.com/license*/ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = ‘fr‘; // config.uiColor = ‘#AADC6E‘; // Define changes to default configuration here. // For complete reference see: // http://docs.ckeditor.com/#!/api/CKEDITOR.config// The toolbar groups arrangement, optimized for two toolbar rows. config.toolbarGroups = [ { name: ‘clipboard‘, groups: [ ‘clipboard‘, ‘undo‘ ] }, { name: ‘editing‘, groups: [ ‘find‘, ‘selection‘, ‘spellchecker‘ ] }, { name: ‘links‘ }, { name: ‘insert‘ }, { name:‘forms‘ }, { name: ‘tools‘ }, { name: ‘document‘, groups: [ ‘mode‘, ‘document‘, ‘doctools‘ ] }, { name: ‘others‘ }, ‘/‘, { name: ‘basicstyles‘, groups: [ ‘basicstyles‘, ‘cleanup‘ ] }, { name: ‘paragraph‘, groups: [ ‘list‘, ‘indent‘, ‘blocks‘, ‘align‘, ‘bidi‘ ] }, { name: ‘styles‘ }, { name: ‘colors‘ }, { name: ‘about‘ } ]; // Remove some buttons provided by the standard plugins, which are // not needed in the Standard(s) toolbar. config.removeButtons = ‘Underline,Subscript,Superscript‘; // Set the most common block elements. config.format_tags = ‘p;h1;h2;h3;pre‘; // Simplify the dialog windows. config.removeDialogTabs = ‘image:advanced;link:advanced‘; config.filebrowserImageUploadUrl= ‘/upload/image‘; //上傳圖片後臺接口 };
3：index.html 裏面引入ckeditor編輯框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Simple Page with CKEditor</title> <!-- Make sure the path to CKEditor is correct. --> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="/ckeditor/config.js"></script> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea> <script> // Replace the <textarea id="editor1"> with a CKEditor // instance, using default configuration. CKEDITOR.replace( ‘editor1‘ ); </script> </form> </body> </html>
4：搭建spring boot 框架，提供後臺上傳 圖片接口
@Controller public class CKEditorController { Logger logger = LogManager.getLogger(CKEditorController.class); @RequestMapping("/") public String ckeditor(Model model) { System.out.println("進入"); // Student student=new Student("AA","1","abcdljaldf"); // model.addAttribute("status","Hello"); // model.addAttribute("page",student); return "/index.html"; } @Value(value = "${cbs.imagesPath}") //配置的圖片路徑 private String ckeditorStorageImagePath; @Value(value = "${cbs.imagesPath}") private String ckeditorAccessImageUrl; @RequestMapping(value = "/upload/image", method = RequestMethod.POST) @ResponseBody public String uploadImage1(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response) { logger.debug("上傳"); String name = ""; if (!file.isEmpty()) { try { response.reset(); // response.setContentType("text/html; charset=ISO-8859-1"); 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(); // 提示 getWriter has already exists ServletOutputStream out = response.getOutputStream(); 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"); logger.debug("callback"+callback+"fileUrl"+fileUrl); 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()); e.printStackTrace(); } } else { // logger.info("You failed to upload " + name + " because the file was empty."); } return "SUCCESS"; } }
5:前臺訪問，http://localhost:8080 ,上傳圖片，返回圖片路徑成功
Spring boot 集成ckeditor