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,这样就能够做到数据提交后,能进行保存、更新等操作,页面上也会正确显示提交后的数据。

你可能感兴趣的:(jquery,kindeditor,数据提交,kindeditor版本升级)