百度富文本编辑器ueditor的使用、非空校验、引用预定义模板

最近用到百度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  
        });
    });
}

百度富文本编辑器ueditor的使用、非空校验、引用预定义模板

猜你喜欢