前段時間一直忙於各種事，今天有點空也不是很困，就來寫寫文章吧，寫的東西如題

那麼我就按順序進行說明一下吧

先廢話一句吧，什麼ueditor?

UEditor是由百度web前端研發部開發所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點

那好，我們就來使用一下它

下載：

[javascript]
<!-- 配置檔案 -->  
<script type="text/javascript" src="admin/ueditor/ueditor.config.js"></script
 
>  
<!-- 編輯器原始碼檔案 -->  
<script type="text/javascript" src="admin/ueditor/ueditor.all.js"></script>  

然後我們開始使用並且定製我們要的功能

[html] 
<script id="container" name="content" type="text/plain"></script>  

[javascript]
<!-- 例項化編輯器 -->  
    <script type="text/javascript"
 
>  
        var ue = UE.getEditor('container', {  
            toolbars: [  
                       ['fullscreen', 'source', '|', 'undo', 'redo', '|',  
                        'bold', 'italic', 'underline', 'autotypeset', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|'
 
,  
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',  
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',  
                        'indent', '|',  
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',  
                        'link', 'unlink', 'anchor', '|',  
                        'simpleupload', 'emotion', 'scrawl', 'insertvideo', 'attachment', '|',  
                        'spechars', '|',  
                        'inserttable', 'deletetable', 'charts', '|',  
                        'print', 'preview', 'searchreplace',]  
                   ],  
                   autoHeightEnabled: true,  
                   autoFloatEnabled: true  
               });  

    </script>  

[java] 
ImgUtil.java  

package com.test.util;  

import java.util.ArrayList;  
import java.util.List;  
import java.util.regex.Matcher;  
import java.util.regex.Pattern;  

public class ImgUtil {  
    /** 
     * 從HTML原始碼中提取圖片路徑，最後以一個 String 型別的 List 返回，如果不包含任何圖片，則返回一個 size=0　的List 
     * 需要注意的是，此方法只會提取以下格式的圖片：.jpg|.bmp|.eps|.gif|.mif|.miff|.png|.tif|.tiff|.svg|.wmf|.jpe|.jpeg|.dib|.ico|.tga|.cut|.pic 
     * @param htmlCode HTML原始碼 
     * @return <img>標籤 src 屬性指向的圖片地址的List集合 
     * @author Carl He 
     */  
    public static List<String> getImageSrc(String htmlCode) {  
        List<String> imageSrcList = new ArrayList<String>();  
        Pattern p = Pattern.compile("<img\\b[^>]*\\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;  
    }  

}  

然後藉助這個工具類進行正則匹配，但是內容中可能包含多張圖片，所以我獲取的肯定是一個list，但是我用的關係型資料庫mysql，不能直接插入list，所以我只能將list轉成
字串插入，所以這裡藉助另一個工具類,完成list轉成字串，這裡使用StringBuilder不用String是因為String是不可變的，自己下去查查

[java] 
StringUtil.java  

package 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);  
    }  

}  

然後控制器action或者servlet中這樣寫

[java]
List list = ImgUtil.getImageSrc(request.getParameter("content"));  
String picturePath = StringUtil.listToString(list, ',');  

這樣就可以插入地址到資料了，當然資料庫picturePath欄位是String型別的，要設長一點，用varchar，否則可能不夠用，當我們需要用圖片時，再把字串取出來同理
轉成list，然後進行相應的顯示使用就可以了