最近用到百度ueditor編輯器，遇到了很多問題，總結一下ueditor的使用、非空校驗、引用預先寫好的模板。
一、百度ueditor編輯器簡單使用：
1.在百度官網http://ueditor.baidu.com/website/download.html下載壓縮包，解壓之後整體拷到專案目錄下。
2.在頁面上引入兩個js檔案

<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.min.js"></script>

3.頁面中使用
HTML中程式碼如下

<textarea id="myEditor"name="content"></textarea>

在js中引入ueditor

<script>
    //ueditor檔案的路徑
    UEDITOR_CONFIG.UEDITOR_HOME_URL = '${ctx}/ueditor/';  
    //括號中的值是HTML中 textarea的id
    UE.getEditor('myEditor');
</script>

二、jquery 的validate方法校驗ueditor非空
頁面將ueditor放在了form表單裡，簡單的html介面如下,因為使用了ajax，所以form中的action寫成了空：

<form id="form" method="post" action="" class="form-horizontal">
    <table>
        <tr height="60px">      
            <td class="label_1">內容</td>
            <td class="label_2" colspan="3">
                <textarea id="myEditor" name="content" style="width:100%;height:200px;"
 
>
                </textarea>
            </td>       
        </tr>
    </table>
    <div class="form-group">
         <div>
             <button type="submit">儲存</button>
             <button type="button">取消</button>
         </div>
</form>

JS中驗證編輯器內容非空

<script>
    $(function(){
        var validate = $("#form").submit(function(){
            UE.getEditor('myEditor').sync();
        }).validate({
            debug: true, //除錯模式取消submit的預設提交功能   
            focusInvalid: false, //當為false時，驗證無效時，沒有焦點響應  
            onkeyup: false,   
            submitHandler: function(form){
                $.ajax({
                     type:"post",
                     url:"${ctx}/blockwork/publishnotice/save",
                     data: $("form").serialize(),//表單資料
                     success:function(data){
                         var dataObj=eval("("+data+")")
                         if(dataObj.data=="success"){
                              layer.msg('儲存成功！',function(){
                                 layer_close();
                                 layer.close(index);     
                                 location.reload();
                              });//儲存成功提示
                          }
                          if(dataObj.data=="fail"){
                             layer.msg('儲存失敗！',function(){
                                 layer_close();
                              });
                          }
                     },
                  }) ;
            },
            rules:{          
            },
            messages:{
            }
        });
    });
</script>

三、在編輯器中引用預定義模板
我的需求是當我從select框中選擇一個數據，需要放在ueditor模板內容中相應的資料發生改變。
1.在select標籤中使用onchange()事件，在頁面中寫入一個隱藏的div用來存放預定義模板的內容。

<select name="title" onchange="test(this.value)">
    <option value="">請選擇</option>
    <option value="1">水果</option>
    <option value="0">蔬菜</option>
</select>
<div id="loadContent" style="display:none;"></div>

2.新建一個新的jsp頁面，取名為load_content，後臺使用了nutz框架，在後臺根據選中的select值，查詢相應資訊返回到load_content頁面

@At
@Ok("jsp:jsp.blockwork.publishnotice.load_content")
public Map<String, Object> select(String noticeNo) throws UnsupportedEncodingException{
    if (!Strings.isEmpty(noticeNo)) {
        noticeNo = URLDecoder.decode(noticeNo, "UTF-8");
    }
    Map<String, Object> result = new HashMap<String, Object>();
    //查選select選中內容的詳細資訊
    TdscBlockTranApp noticeClearInfo = dao.fetch(TdscBlockTranApp.class, Cnd.where("noticeNo", "=", noticeNo)); 
    result.put("noticeClearInfo", noticeClearInfo);
    return result;
    }

3.在ueditor需要載入的頁面通過js方法來載入load_content頁面中的模板資訊，最後那個function為將頁面中隱藏域的資訊複製給ueditor

function test(id){
    //${ctx}/blockwork/publishnotice/select為第二步中寫的select方法
    $("#loadContent").load("${ctx}/blockwork/publishnotice/select?noticeNo="+encodeURI(encodeURI(id)),function(){
        //templet為ueditor預設，頁面上沒有這個id
        var proinfo=$("#templet").html();
        var ue = UE.getEditor('myEditor');  
        ue.ready(function() {//編輯器初始化完成再賦值  
            ue.setContent(proinfo);  //賦值給UEditor  
        });
    });
}