Using CKEditor in JSP and using SPRINGMVC for uploading pictures

Source: Internet
Author: User



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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.