IT北瓜

    今天无意中看到的一个JS UI框架，背光JS框架，做得很漂亮，请看下图：

      kindeditor一款我很喜欢的国产轻量级富文本编辑器，但在结合jQuery UI Dialog组件使用时却发现一种奇怪的现象——利用表单中的按钮可以正确提交编辑器中输入的数据，但是通过Dialog组件的按钮事件却得不到编辑器中输入的数据，具体情况阐述如下：

      第一步：配置kindeditor和创建Dialog

      1.主页面中引入kindeditor.js并做初始化工作（PS：这里leeo使用的是jQuery的load()方法来载入放置编辑器的页面kindeditorTest.html的，因此不能直接利用KE.show()方法创建编辑器），代码如下：

<script type="text/javascript" charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script type="text/javascript">
  KE.init({
      id : 'content',
      cssPath : 'kindeditor/customer.css'
  });
</script>

      2.制作kindeditorTest.html页面，（PS：这里kindeditorTest.html只是作为一个html片段载入到主页面中，所以省去了不必要的html标签）代码如下：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" rel="stylesheet">
  form {
      margin: 5px;
  }
  .editor {
      margin-top: 5px;
      margin-bottom: 5px;
  }
</style>
<form id="kindeditorTest" name="kindeditorTest" method="post" action="">
  <div>
      <label>标题：</label><input name="title" value="" />
  </div>
  <div>
      <textarea name="test" style="width:650px;height:50px;"></textarea>
  </div>
  <div class="editor">
     <textarea id="content" name="content" style="width:650px;height:200px;"></textarea>
  </div>
  <input type="submit" id="submitBtn" name="button" value="提交内容" />
</form>

      3.javascript代码：

function kindeditorFun(){
	$('#dialogTest').dialog({
		title: 'kindeditor测试窗口',
		bgiframe: true,
		width: 680,
		heighe: 440,
		modal: true,
		autoOpen: false,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'关 闭': function(){
				hideDialog();
			},
			'提 交': function(){
				$('#kindeditorTest').submit();
			}
		},
		open: function(){
			$('#dialog-content').html('<div id=\"loading-msg\"><img src=\"images/ajax-loader.gif\" />加载中...</div>')
								.load('kindeditorTest.html', function(){
									KE.create('content');
									ajaxForm('kindeditorTest');
								});
		}
    });
	$('#dialogTest').dialog('open');
}
function ajaxForm(_formid){
	var options = {
    		url: 'jsonFilm!kindeditorTest.action',
		    dataType: 'json'//,
		    //beforeSubmit: validateAddFilm,
		    //success: showResponseAddFilm
	    };
    $('#' + _formid).submit(function() {
	    $(this).ajaxSubmit(options);
	    return false;
	});
}

      4.java代码：

private transient String title;
private transient String test;
private transient String content;

public String kindeditorTest() throws Exception{
	System.out.println("标题: " + title);
	System.out.println("无编辑器textarea: " + test);
	System.out.println("有编辑器textarea: " + content);
	return SUCCESS;
}

public String getTitle() {
	return title;
}

public void setTitle(String title) {
	this.title = title;
}

public String getTest() {
	return test;
}

public void setTest(String test) {
	this.test = test;
}

public String getContent() {
	return content;
}

public void setContent(String content) {
	this.content = content;
}

      5.Dialog窗口如下图：

      第二步:开始测试

      1.点击“提交”按钮，控制台输出结果如下：

      2.点击“提交内容”按钮，控制台输出结果如下：

    3.比较以上两个结果，发现利用表单中的按钮可以正确提交编辑器中输入的数据，但是通过Dialog组件的按钮事件却得不到编辑器中输入的数据。从以上所有实现代码来看这两个按钮的功能是一样的，但怎么会出现不同的结果呢？很让leeo我无法理解。于是便又到kindeditor网站看相关文档和实例，这回实例5——手动添加Onsubmit事件，引起了我的注意，难道是手动加载和自动加载导致出现以上不同的结果？

      第三步：开始测试“手动添加Onsubmit事件”

      1.修改相应代码：

      1）第一步1.中的KE.init()设置autoOnsubmitMode : false

      2）第一步3.中的$(’#’ + _formid).submit添加编辑器赋值方法KE.util.setData(’content’)

      2.再次测试结果，发现这回第二步中的2种方式都能正确获得相关数据。问题总算得以解决，这个问题真的困扰了我许久，花了不少时间去调式。在这里记录下来希望对遇到同样问题的coder们有所帮助。。。

jQuery UI.Layout Plug-in是jQuery世界中少有的布局插件中做得最好的一个，该插件可以用少量代码实现类似Extjs的界面布局。今天用这个插件做了一个后台界面，自我感觉效果还可以，⊙﹏⊙，leeo我不懂美工，所以就将就着吧，亮个相：

点这里查看原图

2009年10月28日0:29:13：整理源代码

之前说过有时间会把这个框架的代码整理发布出来，可是由于有些忙，其实也是比较懒，哈哈。。。所以一直没有花时间去整理，今天又有访客问我要源码，也觉得不好意思再拖了，说过的话还是要算数的，于是今晚整理出来给大家，由于要从整个后台框架抽取出来同时还要转化为静态页面的方式进行模拟，所以还是花了不少时间的。。。

点击这里看演示页面

点击这里下载源代码

部分人反应说源代码下载不了，现在提供另一个下载地址：

从RayFile下载源代码