CKEditor implementation Picture Upload

I use the ckeditor version for 4.3 ckeditor configuration and Deployment Reference ckeditor4.x deployment and configuration. The CKEditor Editor's toolbar should be this way initially, no picture upload button


And there's a bunch of Martian text in the preview, you can modify the configuration to remove it. The first of these methods: Open ckeditor/plugins/image/dialogs/image.js file, search "B.config.image_previewtext", (b.config.image_previewtext| | ") The contents of the single quotation mark are all deleted, and do not delete much. (as a result of ckeditor many JS files are compressed, the format is difficult to see, it is easy to delete errors, so do not recommend such a method) The second method:Open config.js file, add the following sentence config.image_previewtext= '; Preview Area Display Content

The following research image upload to want to appear upload button, the first of two methods: or just that image.js
Search "Upload" to find this section ID: ' Upload ', hidden:true, and I use the 4.3 is
ID: "Upload", hidden:!0, anyway instead of false, (unfortunately this method does not work for my version) the second: Open config.js file, add the following words Config.filebrowserimageuploadurl= "Admin/userarticlefileupload.do"; Action or servlet to be uploaded later

OK, this is basically the way it is now.




The above is just an upload page. It is also equivalent to an HTML form, which is to configure the action requested after clicking on the "Upload to Server" button. has been configured in Ckeditor/config.js. is the above Config.filebrowserimageuploadurl = "admin/userarticlefileupload.do"; You can use the chrome review element to view your code


The next step is the upload method in action:

Import Java.io.File;
Import Java.io.FileInputStream;
Import Java.io.FileOutputStream;
Import java.io.IOException;
Import Java.io.InputStream;
Import Java.io.OutputStream;

Import Java.io.PrintWriter;
Import Javax.servlet.http.HttpServletRequest;

Import Javax.servlet.http.HttpServletResponse;

Import Org.apache.struts2.ServletActionContext; public class Imguploadaction {private file upload//files private string Uploadcontenttype//file type private string Uplo Adfilename; FileName/** * Image upload * * @return * @throws ioexception/public String imgupload () throws IOException {//
		Obtain response,request httpservletresponse response = Servletactioncontext.getresponse ();

		HttpServletRequest request = Servletactioncontext.getrequest ();
		Response.setcharacterencoding ("Utf-8");
		PrintWriter out = Response.getwriter ();
		CKEditor commits a very important parameter String callback = Request.getparameter ("Ckeditorfuncnum"); String expandedname = ""; File name extension if (uploadcontenttype.equals ("image/pJPEG ") | | Uploadcontenttype.equals ("Image/jpeg")) {//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")) {//IE6 uploaded png picture Headi
		Magecontenttype 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 (" + Callback + ",", "+") file format is not correct (must be. jpg/.gif/.bmp/.png file)
			;");
			Out.println ("</script>");
		return null;
			} if (Upload.length () > 1024) {out.println ("<script type=\" text/javascript\ ">");
			Out.println ("window.parent.CKEDITOR.tools.callFunction (" + Callback + ",", "+" ' file size not greater than 600k '); ");
			Out.println ("</script>");return null;
		} InputStream is = new FileInputStream (upload);
		Picture upload path String Uploadpath = Servletactioncontext.getservletcontext (). Getrealpath ("/img/uploadimg"); String fileName = Java.util.UUID.randomUUID (). toString ();
		Use the time +uuid way immediately named FileName = = Expandedname;
		File File = new file (Uploadpath);
		if (!file.exists ()) {//If the path does not exist, create file.mkdirs ();
		File ToFile = new file (Uploadpath, fileName);
		OutputStream OS = new FileOutputStream (tofile);
		byte[] buffer = new byte[1024];
		int length = 0;
		while (length = is.read (buffer) > 0) {os.write (buffer, 0, length);
		} is.close ();

		Os.close ();
		Return to the Image tab and display the picture Request.getcontextpath () as the Web project name Out.println ("<script type=\" text/javascript\ ">"); Out.println ("Window.parent.CKEDITOR.tools.callFunction" + callback + "," "+ request.getcontextpath () +"/img/uploadim
		g/"+ fileName +" ', ') ";
		Out.println ("</script>");
	return null;
	Public File Getupload () {return upload;

}	public void Setupload (File upload) {this.upload = upload;
	Public String Getuploadcontenttype () {return uploadcontenttype;
	} public void Setuploadcontenttype (String uploadcontenttype) {this.uploadcontenttype = Uploadcontenttype;
	Public String Getuploadfilename () {return uploadfilename;
	} public void Setuploadfilename (String uploadfilename) {this.uploadfilename = Uploadfilename; }
}

Config.js

Ckeditor.editorconfig = function (config) {
     config.image_previewtext= ';//preview area display content
     Config.filebrowserimageuploadurl= "Imgupload.action"; The action or servlet to upload 
;

Finally upload the picture successfully


PS: Different versions of the implementation of the method and effect may not be the same, only for reference.


Project Complete source Download: http://download.csdn.net/detail/itmyhome/7851265