今天测试了后台发布文章使用Ueditor插件

但是我后台使用的是LigerUI框架

这就涉及到LigerUI和Ueditor的整合

整合之前大家可以先看看这篇文章，以帮助您如何实现SpringMVC与Ueditor的整合

SpringMVC与Ueditor编辑器整合

下面我们开始LigerUI的表单验证与Ueditor整合

1、根据文档，我们获得表单验证的源码文件

如我这里的地址是这个

file:///D:/Program%20Files/jQuery%20LigerUI%20V1.3.2/Source/demos/form/validator/form2.htm

2、将这个文件进行处理

如重新处理为jsp文件等，就是将后缀改为jsp，等

jsp里面的内容就是这个htm的内容

只是在jsp的文件开头加上如下代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

3、导入Ueditor的资源文件

在jsp文件中添加如下代码

<script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>

4、在jsp文件的末尾的body后面添加Ueditor的初始代码

<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用ue就能拿到相关的实例
	var ue = new UE.ui.Editor({
		initialFrameWidth:900,
		initialFrameHeight:200,
		toolbars: [[
					'fullscreen', 'source', '|', 'undo', 'redo', '|',
					'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
					'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
					'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
					'directionalityltr', 'directionalityrtl', 'indent', '|',
					'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
					'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
					'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
					'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
					'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
					'print', 'preview', 'searchreplace', 'drafts', 'help'
		        ]]	
	});
    ue.render("addtext");

    function isFocus(e){
        alert(ue.isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        ue.blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        ue.execCommand('insertHtml', value)
    }
    function createEditor() {
    	enableBtn();
        UE.getEditor('object');
    }
    function getAllHtml() {
        alert(ue.getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(ue.getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(ue.getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        ue.setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        ue.setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        ue.setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = ue.selection.getRange();
        range.select();
        var txt = ue.selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(ue.getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(ue.hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        ue.focus();
    }
    function deleteEditor() {
        disableBtn();
        ue.destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        alert(ue.execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        ue.execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
</script>

以上代码中

initialFrameWidth:900,

initialFrameHeight:200,

表示重新设置了编辑器的宽和高

toolbars:表示重写定义了编辑器的功能

ue.render("addtext"); addtext表示 textarea标签的id

而后面就是编辑器的方法

如果您需要，可以在适当的位置添加如下代码

<button onclick="getAllHtml()">获得整个html的内容</button>

这代码是个按钮，点击这个按钮显示这个编辑器的内容

5、需要注意的是，LigerUI的表单验证里面的textarea标签是没有name属性的，请一定添加，不然后台获取不到数据

6、关于LigerUI的表单验证

他有两个按钮

一个按钮是提交，表示如果这个表单没有问题就可以执行submitHandler方法

一个按钮是测试，它表示测试当前表单是否合法

7、关于LigerUI的表单验证的提交

LigerUI的表单验证提交是执行了以下代码，代码大家可以在

file:///D:/Program%20Files/jQuery%20LigerUI%20V1.3.2/Source/demos/form/validator/form2.htm

查看到

submitHandler: function ()
       {
                $("form .l-text,.l-textarea").ligerHideTip();
                alert("Submitted!")
        }

以上代码是源码中的例子，很多不知道提交，其实我一开始也不知道。

后来我就直接写了一个ajax来提交

如下代码

submitHandler: function ()
               {
                   $("form .l-text,.l-textarea").ligerHideTip();
                   var serStr = $("#form1").serialize();//序列化表单
				alert(serialStr);
                   var myurl = 'update/addar'; //请求的url 
                   $.ajax({  
                       type:'post',  
                       url:myurl,  
                       data:serStr,  
                       success:function(redata){  
                           if  (redata ==1) {  
                               alert( '操作成功!');  
                           }else{  
                               alert('失败提示', '操作失败!');  
                               return;  
                           }  
                       }  
                   });  
               }

点击提交后，就会执行这个action，本例已经测试正常了