Using CKEditor in JSP and using SPRINGMVC for uploading pictures

Recently in the personal blog, for this project, the choice of text editor is relatively important, in Baidu Ueditor, Markdown and so on in the end still choose CKEditor, for ckeditor introduction since needless to say,

Online for how to configure the article although a lot, but mostly the same or incomplete, the error is full, for the CKEditor editor of the front desk configuration can follow the official online step by step, here the main want to summarize the upload picture how to operate.

I'm using version 4.47.

CKEditor Editor's toolbar should be the initial time, no image upload button

The first step: Open the Ckeditor/plugins/image/dialogs/image.js file , search for hidden, will all appear ID: "Upload", hidden:!0 ! Remove or change to false

You will see the upload button after this step is complete.

Step Two: Complete the controller to upload the image:

/* *  picture naming format */private static final String Default_sub_folder_format_auto = "Yyyymmddhhmmss"; @Resource (name= " Adminserviceimpl ") Private adminservice adminservice;protected Logger Logger = Logger.getlogger (admincontroller.class );/* * Project absolute path */private static  final String project_path= "c:/users/administrator/workspace/personalblog/"; */* Upload picture folder */private static final String upload_path= "webcontent/upload/img/";

/* * Upload picture */@RequestMapping ("uploadimg") public void Uplodaimg (@RequestParam ("Upload") multipartfile file,// HttpServletRequest request,//httpservletresponse response,//@RequestParam ("Ckeditorfuncnum") String Ckeditorfuncnum)//throws illegalstateexception, ioexception{printwriter out =response.getwriter (); String Filename=file.getoriginalfilename (); String Uploadcontenttype =file.getcontenttype (); String expandedname = "", if (Uploadcontenttype.equals ("Image/pjpeg") | | uploadcontenttype.equals ("IMAGE/JP Eg ")) {//IE6 upload jpg image headimagecontenttype is image/pjpeg, and IE9 and Firefox upload jpg image is Image/jpeg expandedname          = ". jpg";              } else if (Uploadcontenttype.equals ("Image/png") | | | uploadcontenttype.equals ("image/x-png")) {          The headimagecontenttype of IE6 uploaded png images is "image/x-png" Expandedname = ". png";          } else if (Uploadcontenttype.equals ("Image/gif")) {expandedname = ". gif"; } else if (uploadcontentType.equals ("Image/bmp")) {expandedname = ". bmp";              } else {out.println ("<script type=\" text/javascript\ ">"); Out.println ("Window.parent.CKEDITOR.tools.callFunction" ("+ Ckeditorfuncnum +", "", "+" ' file format is incorrect (must be. J              pg/.gif/.bmp/.png file); ");              Out.println ("</script>");          return;              } if (File.getsize () > * 1024x768) {out.println ("<script type=\" text/javascript\ ">"); Out.println ("Window.parent.CKEDITOR.tools.callFunction" ("+ Ckeditorfuncnum +", "", "+" file size must not be greater than 600k              ');");              Out.println ("</script>");  return; }dateformat df = new SimpleDateFormat (default_sub_folder_format_auto); fileName = Df.format (New Date ()) +expandedname;        File.transferto (New File (Project_path+upload_path +filename)); Return to the Image tab and display the picture Request.getcontextpath () for the Web project name Out.println ("<script type=\" Text/javascript\ ">"); Out.println ("Window.parent.CKEDITOR.tools.callFunction" ("+ Ckeditorfuncnum +", ' "+" upload/img/"+ filen          Ame + "', ')");          Out.println ("</script>");  return; }

Step Three: Configure the controller that you requested after clicking "Upload to Server" button, add this piece of code in Ckeditor/config.js

Config.image_previewtext= "; Preview Area Display Content
Config.filebrowserimageuploadurl= "uploadimg.html"; Action or servlet to upload

Note: If you do not see the picture after uploading the picture,

method One: Please refresh the image upload folder, because the picture is uploaded to the absolute path, eclipse need to synchronize to know this behavior,

This behavior generally does not occur after a project is launched

Method Two: Automatically refresh to allow Eclipse to automatically synchronize the file system

Using CKEditor in JSP and using SPRINGMVC for uploading pictures