1: Download CKEditor 4.4.2 Full package, the official website does not show, need in the latest version of the CKEditor download right-click, copy the link, enter the navigation bar, the version number to the version number you want.
Https://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.2/ckeditor_4.4.2_full.zip
2: Modify config.js, load image upload Plugin
/** * @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 the default configuration here. For example: //config.language = ' fr '; //config.uicolor = ' #AADC6E '; //Define changes to the default configuration here. //For complete reference see: //Http://docs.ckeditor.com/#!/api/CKEDITOR.config //the toolbar groups arrangement, optimized for the 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 is //Not needed in the (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 '; Upload image Background Interface};
3:index.html introduced ckeditor edit box
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>A Simple Page with CKEditor</title> <!--Make sure the path to CKEditor is correct. - <Scripttype= "Text/javascript"src= "/ckeditor/ckeditor.js"></Script> <Scripttype= "Text/javascript"src= "/ckeditor/config.js"></Script></Head><Body><form> <textareaname= "Editor1"ID= "Editor1"rows= "Ten"cols= "a">This is the my textarea to being replaced with CKEditor. </textarea> <Script> //Replace the <textarea id= "Editor1" > with a ckeditor //instance, using the default configuration.Ckeditor.replace ('Editor1' ); </Script></form></Body></HTML>
4: Build Spring boot frame, provide background upload image interface
@Controller Public classCkeditorcontroller {Logger Logger= Logmanager.getlogger (Ckeditorcontroller.class); @RequestMapping ("/") PublicString CKEditor (model model) {SYSTEM.OUT.PRINTLN (Into);//Student student=new Student ("AA", "1", "Abcdljaldf");//Model.addattribute ("status", "Hello");//model.addattribute ("page", student); return"/index.html"; } @Value (Value= "${cbs.imagespath}")//The picture path of the configurationPrivateString Ckeditorstorageimagepath; @Value (Value= "${cbs.imagespath}") PrivateString Ckeditoraccessimageurl; @RequestMapping (Value= "/upload/image", method =requestmethod.post) @ResponseBody PublicString UploadImage1 (@RequestParam ("Upload") multipartfile file, httpservletrequest request, httpservletresponse response) {Logger.debug (Upload); 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"); //troubleshoot cross-domain issues//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 (); Tip Getwriter has already existsServletoutputstream out =Response.getoutputstream (); String Fileclientname=File.getoriginalfilename (); String PathName= Ckeditorstorageimagepath +Fileclientname; File NewFile=NewFile (pathName); byte[] bytes =file.getbytes (); Bufferedoutputstream Stream=NewBufferedoutputstream (NewFileOutputStream (NewFile)); Stream.Write (bytes); Stream.Close (); //assemble the return URL for CKEditor to position the pictureString FILEURL = ckeditoraccessimageurl + File.separator +Newfile.getname (); //returns the URL of the uploaded picture to CKEditorString 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 ("failed to upload" + name + "= +" + e.getmessage ());E.printstacktrace (); } } Else {//Logger.info ("failed to upload" + name + "because the file is empty."); } return"SUCCESS"; }}
5: Foreground access, http://localhost:8080, upload picture, return picture path successful
Spring Boot Integrated CKEditor
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
