Ckeditor uploads images

For ckeditor 4.3 configuration and deployment, see ckeditor4.x deployment and configuration. In the ckeditor editor toolbar, this should be the first time, and there is no image upload button.


In addition, there are a bunch of Mars in the preview. You can modify the corresponding configuration to delete it. Method 1: Open ckeditor/plugins/image/dialogs/image. search for "B. config. image_previewtext ", (B. config. image_previewtext | '') All content in single quotes is deleted. Do not delete more. (This method is not recommended because many JS files in ckeditor are compressed, the format is ugly, and it is easy to delete errors) Method 2:Open the config. js file and add the following sentence: Config. image_previewtext = ''; // content displayed in the preview area

Next, we will study the first two methods for uploading images with the upload button:
Search for "Upload" to find the ID: 'upload', hidden: True, and what I use 4.3 is
ID: "Upload", hidden :! 0. Change it to false. (unfortunately, this method does not work for my version.) 2. Open config. add the following statement to the JS file: config. filebrowserimageuploadurl = "admin/userarticlefileupload. do "; // action or servlet to be uploaded

Okay. Now it's basically like this.



The above is just an upload page. It is equivalent to an HTML form. You need to configure the action requested after clicking the "upload to server" button. It has been configured in ckeditor/config. js. Is the above config. filebrowserimageuploadurl = "admin/userarticlefileupload. Do"; you can view the code using the chrome review element.
The next step is the upload method in action:

Public class imageupload extends websupport {private file upload; // file private string uploadcontenttype; // file type private string uploadfilename; // file name/*** Image Upload ** @ return * @ throws ioexception */Public String fileupload () throws ioexception {// httpservletresponse response = servletactioncontext. getresponse (); getresponse (). setcharacterencoding ("UTF-8"); printwriter out = getresponse (). getwriter (); // A very important parameter submitted by ckeditor: String callback = getrequest (). getparameter ("ckeditorfuncnum"); string expandedname = ""; // file extension if (uploadcontenttype. equals ("image/pjpeg") | uploadcontenttype. equals ("image/JPEG") {// The headimagecontenttype of the jpg image uploaded by IE6 is image/pjpeg, while the jpg image uploaded by ie9 and Firefox is image/JPEG expandedname = ". jpg ";} else if (uploadcontenttype. equals ("image/PNG") | uploadcontenttype. equals ("image/X-PNG ")){ // The headimagecontenttype of the PNG image uploaded by IE6 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 +", ''," + "'is not formatted (.jpg /. GIF /. BMP /. PNG file) '); "); out. PR Intln ("</SCRIPT>"); return NULL;} If (upload. duration ()> 600*1024) {out. println ("<SCRIPT type = \" text/JavaScript \ ">"); out. println ("window. parent. ckeditor. tools. callfunction ("+ callback +", ''," + "'file size must not be greater than 600k');"); out. println ("</SCRIPT>"); return NULL;} inputstream is = new fileinputstream (upload); string uploadpath = servletactioncontext. getservletcontext (). getrealpath ("/img/uploadimg"); stri Ng filename = Java. util. UUID. randomuuid (). tostring (); // use the time + UUID method to name filename + = expandedname; file = new file (uploadpath); If (! File. exists () {// if the path does not exist, create a 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 out. println ("<SCRIPT type = \" text/JavaScript \ ">"); out. println ("window. parent. ckeditor. tools. callfunction ("+ callback +", '"+"/ehomeplus/img/uploadimg "+ 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. filebrowserimageuploadurl = "admin/userarticlefileupload. Do"; // fixed path config. image_previewtext = ''; // content displayed in the preview area };

The image is uploaded successfully.
This article is transferred from: Workshop

Ckeditor uploads images