Release Notes: Ueditor editor 1.4.3JSP, UTF-8 version
Rookie use on the way encountered a lot of difficulties, in the Internet to find solutions, sorting out available for use, there are good suggestions on the better.
My goal:
Steps
First, add the Ueditor Editor on the JSP interface
After downloading the text after decompression, the entire Ueditor1_4_3-utf8-jsp folder pasted into the project/webroot/js , the folder renamed to Ueditor.
1 <script type= "text/ JavaScript "src=" ${ctx}/js/ueditor/ueditor.config.js "></script>2 <script type=" Text/javascript "src=" $ {ctx}/js/ueditor/ueditor.all.min.js "></script>3 <link rel=stylesheet href=" ${ctx}/js/ueditor/themes/ Default/css/ueditor.css " 1 <script id= "editor" type= "Text/plain" style= "width:800px;height:500px;" > content, or read from a database </script>
At the same time, add the following code, instantiate the editor
1 <script type= "Text/javascript" > 2 //instantiation Editor 3 </span>var UE = ue.geteditor (' editor '); 4 </ Script>At this time, you can see the editor in the interface.
Second, the configuration editor, upload pictures and files, etc.
1 "window. Ueditor_home_url =/project name/js/ueditor/";That is, the path to the Ueditor folder while removing the comment.
1 "imageurlprefix": "/Change to Project name",/* Image access Path prefix */2 "Imagepathformat": "/js/ueditor/upload/image/{yyyy}-{mm}-{dd}/{time}_{ Rand:6}_{filename} ",/* picture storage path, and naming method */In the same Config.json, the others are changed, uploading files, listing pictures or files in the specified directory, etc.Third, storage editing content
1 var editortext = $.trim (ue.geteditor (' Editor '). getcontent ());Click Save to trigger the Ajax event, pass the data editortext to the Web layer Xxxxaction.java, and then call the service layer, then to the DAO layer and some other processes.1 Declare v_clob CLOB: = ' big data '; 2 begin INSERT into EDITOR values (' 2 ', V_clob); 3 end;The following paragraphs1 declare2 v_clob clob: = ' Big Data ' 3 begin4 update EDITOR Set editor_text = Editor_text where xxx;5 end;
success.1 declare2 v_clob clob: = ' Big Data ' 3 begin4 update EDITOR Set editor_text = editor_text| | V_clob where Xxx;5 end;
Iv. ueditor Multi-image upload and online management added the ability to delete pictures. Similarly, file deletion is available
1 <script> 2//new online management Delete picture 3 function Uedel (path, id) {4 if (Confirm (' Are you sure you want to delete it? Not recoverable after deletion! ') {5//var url = editor.getopt (' Imagedelurl '); 6 deletefile (path); 7 var u RL = editor.getopt (' Imagedelurl '); 8 $.get (url,{' path ':p ath},function (data) {9 if (data.state = = ' success ') {10 alert (data.message); $ ("#" +id). Parent ("Li"). Remove (); }ELSE{13 alert (data.message),}15}, ' json '); +} + function DeleteFile (path) {$.ajax ({type: ' POST ', 21 Url:editor.getOpt (' imagedelurl ') + ' action path: Method path for your Project Web layer processing!deletefile.action ', data:{pathname:path},23 cache:false,24 timeout:6000,25 error:function (XMLHttpRequest, Textstatus, Errorthrow N) {$ aleRT (' delete failed ');},28 success:function () {alert (' Delete succeeded! Please click Save to see if it is deleted by mistake! '); Location.reload (); 31} 32}); }34 </script>1/* Delete the file or picture under the specified directory */2 "Imagedelurl": "/Project Name",
1 public void DeleteFile () {2 //Picture and file Management Delete 3 String path = Servletactioncontext.getservletcontext () . Getrealpath (""). ReplaceAll ("\\\\", "/"); 4 System.out.println ("========================================path:" +path); 5 httpservletrequest Request = Struts2utils.getrequest (); 6 String pathName = this.getqueryparameter (Request, "PathName"); 7 String FilePath = path + pathName; 8 file file = new file (FilePath); 9 //If the file path file exists and is a file, delete the if (file.exists ()) { One File.delete (); System.out.println ("delete succeeded"); All else { System.out.println ("file does not exist"); }16 }Five, debugging Tips
Chrome browser Ctrl+shift+n into stealth mode, no longer worry about the impact of JS cache.
SSH system, Ueditor1.4.3 Editor configuration, add image deletion function + database storage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
