最近,项目中需要把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,这样就能够做到数据提交后,能进行保存、更新等操作,页面上也会正确显示提交后的数据。
分享到:
相关推荐
kindeditor从3.x升级到4.x版本
极品开源免费在线文本forasp.net_kindeditor插入文本图片视频flash等,已经配置完毕,直接使用。大的文件等先ftp上传到相关目录
KindEditor4.x 官方帮助文档.官方最新的web编辑器. 官方没有下载的帮助文档。只有在线浏览的。本人下载出来做成了chm格式的。给大家下载。方便查阅!!!!!!
KDE是Linux上最好的桌面环境,KindEditor 3.x的工具栏图标来自KDE4。 2. CHEditor http://www.chcode.com/ CHEditor是一款韩国人开发的收费编辑器,KindEditor 2.x参考了CHEditor的UI和部分代码。 3. TinyMCE ...
kindeditor 4.x JSP Eclipse 项目 上传FLASH与图片 本项目是eclipse 3.4 java 1.6.31 Tomcat6.0.35 能通过linux测试。 这个是dome版本,仅供学习,请勿用在商业用途。 并通过测试。 如果有问题,请E-mail到 ...
KindEditor 4_x Documentation
kindeditor4.1.11.rar
Kindeditor的使用方法,你可能会用到的哦
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。
要修改默认后台程序处理文件,修改plugins(插件文件夹)下的JavaScript内容fileManagerJson改为自己使用程序语言
Kindeditor-3.5-project很实用的 很简单 大家看看例子。
7. 修改了目录名为kindeditor时getScriptPath取路径不正确的问题。 8. 修改了增加缩进和减少缩进两个图标的提示文本。 9. 修改了IE下没有指定DOCTYPE时显示有问题。 10. 代码统一用4个空格缩进。 11. 增加了几个demo...
kindeditor-3.4.2.zip
GitHub天天抽风,我就把资源贴这了,免得下次要的时候又裂开
1 在head中引入kindeditor的js代码,注意kindeditor.js的路径 <script type="text/javascript" charset="utf-8" src="kindEditor/kindeditor.js"> 2在要显示编辑器的地方加下面代码 <jsp:include page="...
在线HTML编辑器 KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化...KindEditor最新版!
非常有用的编辑器,各大网址都在用,里面包含有简易版
从剪帖板,本地硬盘,第三方软件或Word文档中复制图片,然后点击编辑器工具栏中的”粘贴图片”按钮。图片将自动上传到Web服务器中.
kindeditor改造支持上传图片,修复iframe跨域出现的问题,,提供给用户进行下载,防止用户以为使用了kindEditor造成的图片上传不了,发生报错
kindeditor33lc.com.rar