Ueditor 1.4.3 Picture Upload configuration

1. Introduction of Ueditor in the project

Ueditor is actually a JS plug-in, so it is generally put in the project JS directory below

As shown in the directory, directly download the Ueditor sent to the JS directory, especially to note that at this time, the JSP in the Lib in the several packages are copied to

In the Lib directory under Web-inf, it is important to note that the first 4 jar packages may already exist in the project at the time of replication, so do not introduce duplicate jar packages, or they will cause jar package conflicts, so be sure to carefully

2. Using Ueditor in a JSP file

2.1 Introducing Ueditor in the page

<script type= "Text/javascript" charset= "Utf-8" src= "<%=path%>/js/ueditor/ueditor.config.js" ></ Script><script type= "Text/javascript" charset= "Utf-8" src= "<%=path%>/js/ueditor/ueditor.all.min.js" > </script><script type= "text/javascript" charset= "Utf-8" src= "<%=path%>/js/ueditor/lang/zh-cn/ Zh-cn.js "></script>

2.2 Creating Ueditor in forms

1 <inputname= "Contents"type= "hidden"ID= "Contents">2 <Divstyle= "PADDING-TOP:4PX;">3 <ScriptID= "Editor"type= "Text/plain"style= "width:935px;height:500px;"></Script>4 </Div>5 <Scripttype= "Text/javascript">6//Instantiation Editor7  //We recommend that you use the factory method Geteditor to create and reference the editor instance, and if you refer to the editor under a closure, call Ue.geteditor (' editor ') directly to get the relevant instance8  varUE=Ue.geteditor ('Editor');9  </Script>

The purpose of using hidden fields in the first line is to set the content of the UE through the Ueditor SetContent method to which you can submit content through the form.

2.3 Set the content in the form, in the Modify mode, the page opens with the content

1 <inputname= "Contents"type= "hidden"ID= "Contents">2 <Divstyle= "PADDING-TOP:4PX;">3 <ScriptID= "Editor"type= "Text/plain"style= "width:935px;height:500px;">4 ${content.contents}5 </Script>6 </Div>7 <Scripttype= "Text/javascript">8 //Instantiation Editor9 //We recommend that you use the factory method Geteditor to create and reference the editor instance, and if you refer to the editor under a closure, call Ue.geteditor (' editor ') directly to get the relevant instanceTen varUE=Ue.geteditor ('Editor'); One </Script>

To set the existing content to ueditor this way, there is another way to use the SetContent method provided by Ueditor, but when using this method it is important to note that we cannot use it directly, but that the editor is created so that the method can be called. So we use the event provided by Ueditor to invoke this method. The code is as follows:

1 function () {2//  editor ready to use 3 ue.setcontent (' ${content.contents} '); 4 }); 　　

Note that this call can be added after the UE creation is complete, or, after the entire file is loaded, after the completion:

1     $ (function() {2         function  () {3            alert (${ Content.contents}); 4             // Editor is ready before you can use it. 5             Ue.setcontent (' Hello,world '); 6             }); 7     

So far, the Ueditor editor has been integrated into our JSP page. We can use some of the basic features of Ueditor. However, at this time the picture, file upload can not be used, it is necessary to

The Ueditor is configured.

3. Configure image Upload

For picture upload configuration in file

is the JSP folder under the Config.json this file,

1   /*Uploading picture Configuration items*/2"Imageactionname": "Uploadimage",/*execute the action name of the upload picture*/3"Imagefieldname": "Upfile",/*name of the submitted picture form*/4"Imagemaxsize": 2048000,/*Upload size limit, Unit B*/5"Imageallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/*upload image format display*/6"Imagecompressenable":true,/*whether to compress the picture, the default is True*/7"Imagecompressborder": 1600,/*picture compression maximum edge limit*/8"Imageinsertalign": "None",/*How to insert a picture floating*/9"Imageurlprefix": "/siteurl",/*Picture access Path prefix*/Ten"Imagepathformat": "/upload/contentsimage/{yyyy}{mm}{dd}/{time}{rand:6}",/*upload save path, can customize save path and file name format*/ One                                 /*{filename} will be replaced with the original file name, configuring this requires attention to the Chinese garbled problem*/ A                                 /*{Rand:6} will be replaced by random number, followed by the number of digits of the random number*/ -                                 /*{time} is replaced with a timestamp*/ -                                 /*{yyyy} will be replaced by four-digit year*/ the                                 /*{yy} will be replaced by two-digit year*/ -                                 /*{mm} will be replaced by two-digit month*/ -                                 /*{DD} will be replaced with two-bit date*/ -                                 /*{hh} will be replaced by two-bit hours*/ +                                 /*{II} will be replaced by two-bit minutes*/ -                                 /*{SS} will be replaced with two-bit seconds*/ +                                 /*illegal characters \: *? "< > |*/ A                                 /*See the online document: fex.baidu.com/ueditor/#use-format_upload_filename*/

With this configuration, we need to configure just the Imagepathformat parameter for line 10th. This parameter is used to configure the upload save path, you can customize the save path and file name format

Configure it as an upload path on the server. You can also customize the name of the uploaded picture. Also note that sometimes we may have configuration Imageurlprefix this parameter, otherwise the picture will not be accessed normally. If the two parameters are configured, we can use the Ueditor upload image function. For the configuration upload video, upload files, similar configuration.

Ueditor 1.4.3 Picture Upload configuration