kindeditor3.X升级至kindeditor4.X数据提交的心得

最近，项目中需要把kindeditor3.2版本升级到kindeditor4.0.6版本，就版本升级的数据提交问题，发表自己的一点小心得。

在kindeditor3.X版本中，编辑器的初始化及创建，以及数据的提交的代码如下：

KE.show({
id : 'content1',
cssPath : '${rootPath}/Common/kindeditor/index.css',
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
KE.util.setData(id);
document.forms['webForm'].submit();
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
KE.util.setData(id);
document.forms['webForm'].submit();
});
}
});

其中，afterCreate函数内的内容就是做数据同步，具体参看kindeditor官网3.X的API，这里不做过多阐述。

而在升级到4.X版本时，编辑器的创建代码如下：

var clinicalDiagnosis;
KindEditor.ready(function(K) {
clinicalDiagnosis = K.create('textarea[name="object.clinicalDiagnosis"]',{
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'selectall','cut','copy','paste','plainpaste','wordpaste','|','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull','insertorderedlist',
'insertunorderedlist']
});

});

首先，定义一个全局变量，然后根据API创建一个编辑器，里面的参数也不再详细阐述。接下来是最关键的数据同步和提交的问题了。在3.X中我们知道使用了KE.util.setData(id);来把编辑器里面的值设置到textarea中做提交，而在4.X版本中，需要单独定义一个数据同步的函数做提交，具体代码如下：

function dataSync(){
clinical = clinicalDiagnosis.html();
clinicalDiagnosis.sync();
clinical = document.getElementById("clinicalDiagnosis").value;
clinicalDiagnosis.html(clinical);

｝

clinicalDiagnosis是你创建的编辑器对象，document.getElementById("clinicalDiagnosis").value获取的是ID为clinicalDiagnosis的文本域的值。

最后，在submit按钮上加个click事件，先做数据同步，然后再将表单内容提交，代码如下：

<input type="submit" onclick="save();">

function save(){

dataSync();

document.getElementById("webForm").submit();

}

这里的ID是表单的ID，这样就能够做到数据提交后，能进行保存、更新等操作，页面上也会正确显示提交后的数据。