官方用法介绍:
http://www.kindsoft.net/docs/usage.html
参考:
http://www.cnblogs.com/rason2008/archive/2012/03/10/2389593.html
其中提到的报错,我也遇到。
虽然不影响,但是报错看着总是不爽,是里面的/plugins/code/prettify.js报错,
曾试着修改一些,但是太过复杂,就没有修改完全,于是下定决心将它删了。。。
同时在demo.jsp 将引用的prettyPrint();js删除,项目正常运行。
从其字面意思来讲,应该是美化什么的js.
项目中将其 demo.jsp 改为了 freeMarker模板文件 ftl,但是上传图片和文件上传依然用的是jsp,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ftl demo</title>
<link rel="stylesheet" href="
${root}/themes/default/default.css" />
<link rel="stylesheet" href="${root}/plugins/code/prettify.css" />
<script language="javascript" type="text/javascript" src="${root}/js/jquery.min.js"></script>
<script charset="utf-8" src="${root}/js/kindeditor.js"></script>
<script charset="utf-8" src="${root}/lang/zh_CN.js"></script>
<script type="text/javascript">
var editor1;
KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content1"]', {
cssPath : '${root}/plugins/code/prettify.css',
uploadJson : '${root}/jsp/upload_json.jsp',
fileManagerJson : '${root}/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['form1'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['form1'].submit();
});
}
});
});
</script>
</head>
<body>
<form action="***.htm" method="post" name="form1" id="form1">
<table align="center">
<tr>
<td>文字编辑区</td>
</tr>
<tr>
<td>
<textarea id="content1" name="content1" cols="100" rows="8" style="width:700px; height:200px;visibility:hidden;">此处输入文字并编辑</textarea>
</td>
</tr>
<tr>
<input type="submit" value="提交"/>
</tr>
</table>
</form>
</body>
</html>
页面代码中的 ${root}为 配置文件设置的全局路径
<bean id="freemarkerConfiguration" class="org.springframework.ui.freemarker.FreeMarkerConfigurationFactoryBean">
<!-- 模板加载路径 -->
<property name="templateLoaderPaths">
<list>
<value>/WEB-INF/freemarker/</value>
</list>
</property>
<property name="configLocation">
<value>freemarker.properties</value>
</property>
<!--全局变量部分 -->
<property name="freemarkerVariables">
<map>
<entry key="root" value="你要设置的根路径" />
</map>
</property>
<property name="defaultEncoding" value="utf-8" />
</bean>
KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要将HTML数据同步到原来的textarea,editor.sync()函数会完成这个动作。
KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。
用button的js提交表单前 需同步一下数据到原来的textarea
demo:
function sava(){
//条件判断,验证
editor1.sync();
//editor1,为 K.create创建的KindEditor实例,如上述所写,是全局变量,此处可以获取
$("#form1").submit();//jquery
}
用jquery获取文本框中数据,并用ajax提交
function(){
editor1.sync();//先同步,才能拿到值
var content1=$("#content1").val();
$.ajax( {
url:'demo.htm',
type: "POST",
dataType: "text",
data: "content=" + content1
sync: false,
cache:false,
success: function(msg) {
//to do something
}
});
}
经测试,基本没有问题,但用ajax提交表单时,在html编辑器里输入表格时有问题,用form直接submit没有问题,不知是不是一个bug.
下面来自网上的参考:
//取得HTML内容
html = KE.html('editor_id');
//同步数据后可以直接取得textarea的value
KE.sync('editor_id');
html = document.getElementById('editor_id').value;
html = $('#editor_id').val(); //jQuery
//设置HTML内容
KE.html('editor_id', 'HTML内容');
参考文章:
http://hi.baidu.com/l245319872/blog/item/6cd63cab46bf8ee4faed50cd.html
http://codeigniter.org.cn/forums/thread-10904-1-1.html
如果时间充足的话,最后看一下KindEditor的API
项目中jar包用maven管理:
pom.xml相关配置如下:
<!--html编辑器所需依赖-->
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.1</version>
</dependency>
分享到:
相关推荐
3. 在 JavaScript 中,使用 KindEditor.ready 函数来实例化编辑器,並将其绑定到文本域上。 4. 最后,可以使用 KindEditor 提供的各种方法和事件来实现编辑器的功能,如上传图片、保存内容等。 KindEditor 的插件 ...
2. 声明一个Ext文本域控件,文本域控件嵌入kindEditor var kindEditor_are = new Ext.form.TextArea({ id: 'infoContent', name: 'infoContent', listeners: { "render": function (f) { content = KindEditor...
- `visibility` 设置为`hidden`是因为实际显示的是KindEditor编辑器,而不是原始的`<textarea>`。 #### CSS样式设置 为了让KindEditor与页面设计更好地融合,通常需要定义一些CSS样式。例如,`common.css`文件可以...
Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
SAE AS85049F+Connector Accessories, Electrical General Specification for+2021-04(1).pdf
NAVMAT P-9492 .pdf
内容概要:《有货App》产品立项说明书详细阐述了有货App的产品定位、目标用户、主要功能及市场分析。有货App隶属于YOHO!集团,起初为潮流杂志,逐渐转型为集媒体、零售、活动于一体的潮流营销平台。其核心定位为时尚穿搭,面向20~39岁追求潮流的年轻群体,提供正品国际潮牌、明星潮牌的一站式购买服务,并设有时尚潮流穿搭社区、正品鉴定和二手买卖平台。市场分析表明,全球潮牌市场呈两位数增长,尤其是中国市场增速显著,国潮崛起,95后成消费主力,推动潮牌需求上升。有货App的优势在于丰富的潮牌种类和内容基础,但社区互动少、存在假货现象、物流时效差是其劣势。产品规划分为四个版本迭代,逐步完善电商、正品鉴定、社区互动及二手买卖功能。 适合人群:20~39岁追求时尚穿搭、潮流生活的年轻群体,包括上班族、学生及时尚爱好者。 使用场景及目标:①满足用户一站式购买全球潮流品牌的需求;②提供时尚潮流穿搭社区,供用户分享交流穿搭心得;③确保用户购买正品,提供专业的正品鉴定服务;④搭建二手交易平台,方便用户出售或购买二手潮牌服饰。 阅读建议:此文档详细介绍了有货App的市场背景、产品定位及功能规划,适合产品经理、市场分析师及相关从业人员阅读,以了解潮牌电商市场的发展趋势及有货App的竞争策略。
内容概要:本文介绍了一款基于C#编写的485转Web API服务器框架,该框架集成了IoT技术和高性能高并发特性。框架主要特点包括强大的数据库支持(EF6+mssql),独立的WEB API服务,丰富的协议扩展性(支持Modbus、Modbus RTU等),便捷的MVC服务与硬件驱动,创新的设备轮询机制,灵活的API任务管理和便捷的运行与配置。此外,框架提供了完备的文档和技术支持,并进行了多项升级,如自适应服务规则、一键启动与自动配置、修复数据读取问题、设备标识增强和开放数据事件接口等。 适合人群:具备一定编程基础,尤其是熟悉C#和IoT技术的开发人员,适用于工业物联网系统的集成和开发。 使用场景及目标:该框架主要用于工业物联网项目的快速落地,特别是在需要高性能和灵活扩展的应用场景中。它可以用于构建能够处理大量并发连接的物联网后端系统,支持多种数据库和协议,简化设备连接管理和任务调度。 其他说明:框架不仅提供了详细的使用说明和技术支持,还在性能优化和资源管理方面做了很多改进,使得开发者可以更加专注于业务逻辑的实现。
一文了解 MCP、A2A、ANP
内容概要:本文详细介绍了如何使用Comsol多物理场仿真软件构建煤层瓦斯汽固耦合模型。文章首先解释了煤层瓦斯的基本概念及其重要性,随后逐步展示了如何在Comsol中定义几何结构、设置材料属性、添加物理场(如达西流和Langmuir吸附)、进行求解及结果分析。特别强调了渗透率动态变化、吸附解吸机制、耦合求解技巧以及模型验证方法。通过这些步骤,可以精确模拟瓦斯在煤层内的运移规律,为煤矿的安全开采提供科学依据。 适合人群:从事煤矿工程、地质勘探、能源开发等领域研究人员和技术人员,尤其是那些希望深入了解煤层瓦斯行为并对现有开采工艺进行优化的人群。 使用场景及目标:适用于需要评估煤层瓦斯风险、优化瓦斯抽采方案、提高煤炭资源利用率的实际工程项目。通过对煤层瓦斯汽固耦合模型的研究,可以帮助企业更好地规划开采活动,确保生产安全的同时最大化经济效益。 其他说明:文中提供的代码片段和建模思路不仅有助于初学者快速入门Comsol仿真工具,也为有经验的用户提供了一些实用的小贴士,如避免常见错误、提升求解效率等。此外,还提到了一些高级特性,如参数扫描界面开发、集群计算等功能的应用。
系统名称:数据结构课堂考勤管理系统 技术栈:JSP技术、MySQL数据库、SSM框架 系统功能:管理员可以通过系统后台录入学生及教师信息,包括学号、工号以及个人基础资料,同时可以通过课程管理添加课程信息,查看学生请假及签到信息;学生用户可以修改个人资料,结合课程信息实现在线签到提交,提交请假申请;教师用户可以通过管理界面查看学生请假信息并进行在线审批,查看学生签到信息及课程安排。 摘要:高校的不断扩张让在校学生数量不断增加,传统的人工点名签到的考勤管理模式已无法满足需求,同时手动录入的考勤管理模式浪费大量人力物力,也不便于考勤数据信息的管理和查询。考勤管理是高校教务管理工作的重点内容之一,通过考勤管理可以及时了解大学生在校的学习状态,培养学生自律自强的学习品格。结合高校内考勤管理的需求和重要性,利用互联网平台开发设计一款针对校内考勤管理的系统是非常有需求空间的。本文利用JSP技术开发设计了一款在线考勤管理系统,实现了学生与教师之间的信息互通,具备在线签到、在线请假以及课程信息查看等功能。同时结合国内外研究现状以及可行性分析,通过数据库结构的搭建以及系统的测试环节,实现了考勤管理系统的开发设计。
Java在线教育学习平台LW PPT
674222850524759拷貝漫畫-2.2.5(1).apk
内容概要:本文详细介绍了如何使用Simulink封装NXP MPC5634芯片的底层驱动,将复杂的寄存器配置转化为可视化的模块操作。文章通过具体实例展示了GPIO、PWM、ADC、CAN等常见外设的封装方法及其优势,如简化配置流程、提高开发效率、增强代码可读性和维护性。文中还分享了许多实践经验,如寄存器冲突检测、代码优化技巧以及调试工具的选择。 适合人群:从事汽车电子开发的技术人员,尤其是熟悉NXP MPC5634芯片并希望提高开发效率的研发人员。 使用场景及目标:适用于需要快速开发和调试汽车电子控制系统(如ECU)的团队。主要目标是减少底层驱动开发的时间成本,降低复杂度,提高系统的稳定性和可靠性。 其他说明:文章强调了Simulink封装库的实际应用价值,提供了大量代码片段和调试建议,帮助开发者更好地理解和掌握这一技术。此外,作者还提到了一些常见的陷阱和解决办法,有助于新手少走弯路。
内容概要:本文详细介绍了在MATLAB/Simulink环境下,针对微电网储能系统的锂电池SOC均衡问题提出的一种创新性的分段下垂控制策略。传统下垂控制存在收敛速度慢和充放电切换时母线电压波动大的问题。为解决这些问题,作者提出了将下垂曲线分为三个区域的方法:当SOC差超过5%时采用指数型下垂系数,2%-5%间使用二次曲线过渡,小于等于2%则保持线性控制。此外,引入了电压补偿机制以抑制母线电压波动,并通过仿真验证了该方法的有效性。结果显示,新的控制策略显著提高了SOC均衡的速度和平滑度,同时有效减少了母线电压波动。 适用人群:从事电力电子、微电网研究的技术人员以及对储能系统优化感兴趣的科研工作者。 使用场景及目标:适用于需要高效管理锂电池组SOC均衡并确保系统稳定的微电网项目。主要目标是在保证系统稳定性的同时提高SOC均衡效率,减少充放电切换时的电压波动。 其他说明:文中提供了详细的MATLAB/Simulink建模步骤和部分源代码片段,有助于读者理解和复现实验结果。
疫情控制途径.pptx
系统名称:基于SSM健身系统 技术栈:SSM框架、JSP技术、MySQL数据库 系统功能:管理员功能:系统用户信息管理、首页变幻图管理、课程信息管理、健身卡管理、健身器材管理、教练信息管理、购买及报名管理。用户功能:用户注册、健身卡信息查看及在线购买、健身教练信息查看、健身课程信息查看及在线报名、个人后台管理(包括健身卡办理信息管理、健身课程报名信息管理、个人资料维护和管理)。 摘要:随着人们对健康的重视度越来越高,健身经济的不断发展加速推动了健身房的扩张,与此同时多元化和便捷的健身方式也获得越来越多人的青睐,健身房的营销手段也逐渐从现在的宣传彩页推广逐渐转移到了线上平台,人们借助互联网平台实现了健身房健身设施、健身课程、教练信息以及健身卡优惠活动内容的查看和获取,通过线上平台实现了健身卡的办理以及健身课程的预约。相比传统的健身房管理模式,利用系统平台可以为用户提供更加便捷的在线报名及办卡服务,同时也提升健身房办卡及课程预约的管理效率。
内容概要:《10天精通DeepSeek实操手册》旨在帮助零基础用户在10天内掌握DeepSeek的使用方法,通过分阶段的学习目标逐步深入,涵盖AI认知、核心技能应用和实战变现。手册详细介绍了如何利用DeepSeek进行知识检索、内容生成、数据分析、创意设计等任务,并提供了具体的实操任务和案例,如生成论文大纲、优化会议纪要、处理合同审查等。此外,手册还提供了40个优质提示词库,覆盖学习提升、职场效率、生活助手等多个场景,以及学术资源导航和变现路径案例,帮助用户更好地应用DeepSeek解决实际问题。 适合人群:适合希望快速上手DeepSeek的零基础用户,尤其是希望通过AI工具提升工作效率、内容创作能力或寻求创收途径的人士。 使用场景及目标:①帮助用户破除对AI的恐惧,建立科学认知,了解AI的应用边界;②通过具体场景和任务,如论文写作、会议纪要整理、合同审查等,提高用户的实际操作能力;③提供变现指南,帮助用户通过AI工具开辟副业或优化现有业务,如代写商业计划书、制作AI使用指南、优化电商详情页等。 阅读建议:由于手册内容丰富且实用,建议读者结合自身需求,逐步实践每个阶段的任务,并灵活运用提供的提示词库和案例,确保在学习过程中不断积累经验和技能。同时,注意遵守相关法律法规,避免不当使用工具。
Delphi 12.3控件之ZhuTcp6.0.zip
java+算法+桶排序