Java Web Introduction wangeditor Editor

Recent projects need me to do some front-end things, which makes me this dabbler front end is very painful. Project needs an editor, before looking for a ueditor, plug-ins are more, need to change the source and so on, and finally finished, found to need Flash plug-ins. No way, only push to re-search in the internet after the comparison, the final decision to use Wangeditor, first of all it is simple, lightweight, basic can meet my needs, the bad Place is the online demo is not a lot, not the big company's open source products, do not know whether can persist in updating, But ueditor are not updated, there is no need to insist.

First affixed to the official address: https://www.kancloud.cn/wangfupeng/wangeditor3/335771.

Nothing to say, is concise, light weight, official online example has been written in detail, the main record of my practice.

 <DivID= "Div1">        </Div>    <textareaname= "Ueditorcontent"ID= "Ueditorcontent"style= "width:100%; Height:200px;display:none" ></textarea>    <Scripttype= "Text/javascript">        varE=Window.wangeditor; varEditor= NewE ('#div1'); var$ueditorContent= $('#ueditorContent'); Editor.customConfig.onchange= function(HTML) {//monitor changes, synchronize updates to textarea$ueditorContent. val (HTML);        }; Editor.customConfig.uploadImgServer= '/bhym/systemcontroller/fileup.do' ; //upload images to the server,        //Hide "Network pictures" tab       //editor.customConfig.showLinkImg = false;Editor.customConfig.uploadImgHooks= {                //(however, the server side must return a JSON format string!!!) Otherwise it will be an error)Custominsert:function(insertimg, result, editor) {//Insertimg is a function that inserts a picture, editor is the object of the compiler, and result is the results returned by the server side:                    varURL=Result.obj;                Insertimg (URL);        },}, Editor.create (); //Initializes the value of the textarea, submits the value in the textarea to the background$ueditorContent. Val (editor.txt.html ())</Script>

Because the front-end parameters are more, do not want to write an AJAX request to send a request. So in order to steal the lazy, just below the editor, define a textarea, hide it, and update the contents of the editor to textarea. Then by submitting the content in the textarea to the form

Form submission. The front end of this, and then to see the background of the picture processing, the idea is: according to the normal file upload method to upload the image to the server, return a URL (virtual path) and then configure the virtual path to access the picture, there is an article on how to configure the virtual path:/http Www.cnblogs.com/magic101/p/7756402.html.

/*** * @Title: Fileup * @Description: wangeditor upload image *@param     * @return     */@RequestMapping ("/fileup") @ResponseBody PublicAjaxjson Fileup (httpservletrequest request) {Ajaxjson J=NewAjaxjson (); Multiparthttpservletrequest multipartrequest=(multiparthttpservletrequest) request; Try{multipartrequest.setcharacterencoding ("UTF-8"); Map<string, multipartfile> filemap =Multipartrequest.getfilemap (); //path saved by the file databaseString Path =NULL; //relative path of file saved on hard diskString Realpath =NULL; Realpath= Resourceutil.getconfigbyname ("Webuploadpath") + "/"; Path= Resourceutil.getconfigbyname ("Http_url") + "/"; File File=NewFile (Realpath); if(!file.exists ()) {file.mkdirs ();//creating the root directory} Realpath+ = Dateutils.getdatastring (DATEUTILS.YYYYMMDD) + "/"; Path+ = Dateutils.getdatastring (DATEUTILS.YYYYMMDD) + "/"; File=NewFile (Realpath); if(!file.exists ()) {File.mkdir ();//Create a file time sub-directory} String fileName= ""; //String swfname = "";             for(Map.entry<string, multipartfile>Entity:fileMap.entrySet ()) {multipartfile MF= Entity.getvalue ();//Get upload File ObjectFileName = Mf.getoriginalfilename ();//Get file name//Swfname =//Pinyinutil.getpinyinheadchar (Oconvertutils.replaceblank (Fileutils.getfileprefix (FileName));//                //take the first letter of the filename as the SWF file nameString extend = Fileutils.getextend (fileName);//get file name extensionString myFileName = ""; String Noextfilename= "";//with no extensionNoextfilename= Dateutils.getdatastring (DATEUTILS.YYYYMMDDHHMMSS) + stringutil.random (8);//Custom file namemyFileName = Noextfilename + "." + Extend;//Custom file nameString Savepath= Realpath + myfilename;//file Save full pathFile SaveFile=NewFile (Savepath); if(Entity.getkey ()! =NULL) {                    //set the physical path of the file databaseString FilePath = path +myFileName;                J.setobj (FilePath); }                //copy files to the specified hard disk directory                if("TXT". Equals (Extend)) {                    //a fixed first-line hidden coding principle using the Utf-8 character set//unicode:ff FE utf-8:ef BB                    byte[] Allbytes =mf.getbytes (); Try{String Head1= Tohexstring (allbytes[0]); //System.out.println (head1);String head2 = tohexstring (allbytes[1]); //System.out.println (head2);                        if("EF". Equals (head1) && "BB". Equals (head2)) {                            //UTF-8String contents =NewString (Mf.getbytes (), "UTF-8"); if(Stringutils.isnotblank (contents)) {OutputStream out=NewFileOutputStream (Savepath);                                Out.write (Contents.getbytes ());                            Out.close (); }                        } Else {                            //GBKString contents =NewString (Mf.getbytes (), "GBK"); OutputStream out=NewFileOutputStream (Savepath);                            Out.write (Contents.getbytes ());                        Out.close (); }                    } Catch(Exception e) {String contents=NewString (Mf.getbytes (), "UTF-8"); if(Stringutils.isnotblank (contents)) {OutputStream out=NewFileOutputStream (Savepath);                            Out.write (Contents.getbytes ());                        Out.close (); }                    }                } Else{filecopyutils.copy (Mf.getbytes (), savefile); }            }        } Catch(Exception e) {j.setsuccess (false);        E.printstacktrace (); }        returnJ; }    PrivateString tohexstring (intindex) {String hexstring=integer.tohexstring (index); //1 bytes into 16 binary, only 2 bits can be represented, take the back two bits, remove the preceding symbol fillhexstring = hexstring.substring (Hexstring.length ()-2); returnhexstring; }

Finally, let's test it again:

Then visit the database again. The discovery has indeed been deposited.

Java Web Introduction wangeditor Editor