IT北瓜

      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们有所帮助。。。