Ueditor image upload, and picture path saved into database

Some time ago have been busy with all kinds of things, today is a bit empty is not very sleepy, to write articles, write things title

Then I'll explain it in order.

Let's just say a word, what ueditor?

Ueditor is developed by Baidu Web front-end development of the WYSIWYG Rich Text web editor, with light weight, customizable, focus on user experience and other characteristics

Well, let's just use it.

A: First we go to the official website Download ueditor (website: http://ueditor.baidu.com/website/download.html), I use Java write here, so choose the JSP version to download, and then extract

Download:

Extract:

Then I like to rename to Ueditor, because this name is too long, I introduced the time to write trouble, and then copy this folder to the project, I use the myeclipse, so I copied directly into the Webroot

Then we introduce it to the JSP page and use it

<!--profile--    <script type= "Text/javascript" src= "Admin/ueditor/ueditor.config.js" ></script>    <!--editor source files--    <script type= "Text/javascript" src= "Admin/ueditor/ueditor.all.js" ></ Script>

And then we started using and customizing the features we wanted.

<script id= "container" name= "content" type= "Text/plain" >     </script>

<!--instantiation Editor--<script type= "Text/javascript" > var UE = ue.geteditor (' container ', {tool Bars: [[' Fullscreen ', ' source ', ' | ', ' undo ', ' Redo ', ' | ', ' bold ', ' Italic ',                        ' Underline ', ' autotypeset ', ' | ', ' ForeColor ', ' BackColor ', ' insertorderedlist ', ' insertunorderedlist ', ' | ', ' Rowspacingtop ', ' rowspacingbottom ', ' lineheight ', ' | ', ' customstyle ', ' paragraph ', ' fontf Amily ', ' fontsize ', ' | ', ' indent ', ' | ', ' justifyleft ', ' justifycenter ', ' jus Tifyright ', ' justifyjustify ', ' | ', ' touppercase ', ' tolowercase ', ' | ', ' link ', ' unlink ', ' anchor ', ' | ', ' simpleupload ', ' emotion ', ' scrawl ', ' insertvideo ', ' attachment ', ' | ', ' Spechars ', ' | ', ' inserttable ', ' deletetable ', ' charts ', ' | ', ' print ', ' Previ  ew ', ' searchreplace ',]                 ], autoheightenabled:true, autofloatenabled:true}); </script>

Customized features specific reference to official documents, here is just my personal custom

Two: Configure the Ueditor configuration file, so that the image upload function to achieve

We open the following file

Configure the picture access path prefix and the save path of the picture

The image access prefix is the address of the image to remove the part of the image name, such as I configured: http://127.0.0.1:8080/project name

Then the picture saves the path I configured is:/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}

So the image upload function is realized, of course, the background to do some processing, such as the foreground data sent to the background, the background to save, and the foreground call background data display

But then I might mix up the picture and the content, and if I want to extract the images from the content separately, what should I do?

Third, using regular expressions to extract the image path in the content

First of all, I get the front desk to submit the content in the Ueditor, and then I use regular expression to get all the images in the content of the address, first look at my regular Expression tool class bar, this I think write good, is the online collection of a

Imgutil.javapackage com.test.util;import java.util.arraylist;import Java.util.list;import java.util.regex.Matcher; 　Import Java.util.regex.pattern;public class Imgutil {/** * Extracts the image path from the HTML source, and finally returns with a String type of list, and returns a size=0 if no picture is included. List * It is important to note that this method only extracts pictures in the following format:. Jpg|. bmp|. eps|. Gif|. Mif|. Miff|. Png|. Tif|. Tiff|. Svg|. Wmf|. jpe|. Jpeg|. dib|. ico|. tga|. Cut|. Pic * @param htmlcode HTML source * @return  tag src attribute point to the List collection of picture addresses * @author Carl He */public static list<string > getimagesrc (String htmlcode) {list<string> imagesrclist = new arraylist<string> (); Pattern p = pattern.compile ("]*\\bsrc\\b\\s*=\\s* (' |\")? ( [^ ' \ ' \n\r\f>]+ (\\.jpg|\\.bmp|\\.eps|\\.gif|\\.mif|\\.miff|\\.png|\\.tif|\\.tiff|\\.svg|\\.wmf|\\.jpe|\\. Jpeg|\\.dib|\\.ico|\\.tga|\\.cut|\\.pic) \\b) [^>]*> ", pattern.case_insensitive); Matcher m = P.matcher (Htmlcode); String quote = NULL; String src = null;while (M.find ()) {quote = M.group (1); src = (quote = = NULL | | Quote.trim (). Length () = = 0)? M.group (2). Split ("\\s+") [0]: M.group (2); Imagesrclist.add (SRC);} return imagesrclist;}}

And then with this tool class for regular matching, but the content may contain more than one picture, so I get is definitely a list, but I use the relational database MySQL, not directly into the list, so I can only turn the list into

string insertion, so here with another tool class, complete the list into a string, here to use StringBuilder not string is because the string is immutable, go down and check

Stringutil.javapackage Com.test.util;import Java.util.list;public class Stringutil {public static String listtostring ( List List, char separator) {StringBuilder sb = new StringBuilder (); for (int i=0; i<list.size (); i++) {Sb.append (list.get (i)). Append (separator);} Return sb.tostring (). substring (0,sb.tostring (). Length ()-1);}}

Then the controller action or Servlet writes this

List List = Imgutil.getimagesrc (Request.getparameter ("content")); String PicturePath = stringutil.listtostring (list, ', ');

So you can insert the address into the data, of course, the Database PicturePath field is a string type, to set a long, with varchar, otherwise it may not be enough, when we need to use the picture, then the string out of the same way

Turn it into a list and then display it accordingly.

If there is anything unclear can give me a message, or communicate with each other, very welcome to exchange feedback

Ueditor image upload, and picture path saved into database