最近在使用Kindeditor,但是出现了些问题,不过最终都解决了,所以在此分享下也记录下
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="answer"]', {
cssPath : '<%=request.getContextPath()%>/kindeditor/plugins/code/prettify.css',
uploadJson : '<%=request.getContextPath()%>/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['problemForm'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['problemForm'].submit();
});
}
});
prettyPrint();
});
1、显示正常,但是无法获取到焦点的问题
解:由于我的项目当中有ligerUI框架,所以在页面加载的时候就会去查询数据,而且我这里是要点击编辑按钮后,才弹出一个层,里面包含有Kindeditor,而Kindeditor也是在页面加载的时候初始化,所以在弹出层后点击Kindeditor无反应,获取不到焦点,也编辑不了,点击全屏后就可以,所以我在点击编辑的时间后加全屏的代码
如下:
editor.fullscreen();
liger = $.ligerDialog.open({target: $("#editInfo") , title: '编辑', width: 720, height: 600 ,buttons: [{ text: '确定', onclick: function (item, dialog) { sub(); } }] });
editor.fullscreen();
2、焦点获取到能编辑后,新问题又出现了,提交的时候后台获取不到Kindeditor的值,由于我的是通过js提交,所以在提交之前添加一句赋值的代码就OK了如下:
[color=red]$("#answer").val(editor.html());[/color]
$("#problemForm").submit();
3、到这里文字的修改已经没问题,但是还缺少图片的上传,我试了下本地上传图片,结果报错500,后来发现没有将Kindeditor下载下来的jsp文件目录下的三个jar包导入都项目,导入后就不报错了!
4、500的错是不报了,却提示我"文件目录不存在!",后来我打开Kindeditor下载下来的jsp文件目录下的upload_json.jsp文件,看到有个savePath变量,这个是保存图片的目录,他在后面加了一个"attached/",这个目录在我项目当中确实是不存在的,我手动建了一个就OK了,记得在“attached/”前面也价格斜杠才可以,不然也会报目录不存在,如下:
String savePath = pageContext.getServletContext().getRealPath("/") + "/attached/";
分享到:
相关推荐
【KINDEditor使用手册】是一份非常实用的文档,主要涵盖了如何有效使用KINDEditor这个富文本编辑器的详细步骤和配置方法。KINDEditor是一个功能强大的在线编辑工具,广泛应用于网页内容编辑、文章发布等场景。 1、...
本教程将详细介绍如何配置和使用 KindEditor 的最新版本,以及如何处理数据库的读写操作,并解决常见的错误问题。 首先,你需要下载 KindEditor 的最新版本并解压缩。将解压后的文件夹复制到你的项目目录下的 `...
在IT行业中,图片上传功能是网站和应用程序中常见的需求,特别是在内容编辑器如KindEditor这样的富文本编辑器中。KindEditor是一款开源的JavaScript在线编辑器,它提供了丰富的API和插件,使得用户能够方便地在网页...
在使用KindEditor进行图片上传时,可能会遇到"服务器发生错误"或"拒绝访问"这样的提示。这通常是因为服务器配置不正确或者权限设置不足。确保你已经正确设置了上传目录的读写权限,并且在.NET中配置了正确的MIME类型...
其中一个常见问题是当KindEditor与表单验证插件结合使用时,用户需要点击提交按钮两次才能成功提交表单。这种现象不仅影响用户体验,还可能导致数据提交错误或遗漏。 #### 原理分析 此问题的根源在于KindEditor与...
KindEditor是一款开源的JavaScript富文本编辑器,广泛应用于网页内容编辑和发布,它提供了丰富的API接口,支持多种浏览器环境,包括IE6+、Firefox、Chrome、Safari和...希望本文对你在使用KindEditor的过程中有所帮助。
本说明将详细介绍KindEditor的安装、配置、使用以及常见问题解决,帮助开发者更好地集成到自己的项目中。 **1. 安装与引入** 在开始使用KindEditor前,首先需要从官方网站(http://kindeditor.net/download.html)...
本文档主要介绍如何安装、部署及使用KindEditor,并提供了一些常见配置选项的说明。 #### 二、安装与部署 ##### 1. 下载编辑器 首先访问KindEditor官方网站 (http://www.kindsoft.net/down.php) 下载最新版本的...
KindEditor的使用方式与CKEditor类似,但也有一些不同之处。KindEditor通常以独立的JavaScript库形式引入,然后通过JavaScript代码创建编辑器实例。它的配置和API略有差异,但同样提供了丰富的定制选项和插件支持。...
这篇文档将详细介绍如何在Spring MVC项目中集成并使用KindEditor。 首先,理解KindEditor是什么至关重要。KindEditor是一款开源的、基于JavaScript的富文本编辑器,提供了一套完整的文本编辑功能,包括字体样式、...
在Java开发中,实现在线编辑文档的功能是一项常见需求,例如在论坛、博客或者知识分享平台。KindEditor是一款流行的开源富文本编辑器,它提供了一种简单而强大的方式来实现这样的功能。本文将深入探讨如何在Java环境...
3. **在线表单**:在需要用户填写大量文本的在线表单中,使用KindEditor可以方便用户添加格式化内容。 4. **企业内部系统**:在企业内部的文档编辑、知识库管理等系统中,也可以利用KindEditor提高工作效率。 四、...
通过以上步骤,我们可以构建一个完整的图片和视频上传功能,使用户在使用KindEditor编辑内容时能够方便地添加多媒体资源。注意,实际项目中,还需要考虑性能、扩展性和维护性,以满足不同场景的需求。
一种常见的做法是使用正则表达式匹配并替换掉所有的HTML标签,只保留纯文本。例如,我们可以先将粘贴的内容转换为纯文本字符串,然后再插入到编辑器中。这可能涉及到的JavaScript代码如下: ```javascript function...
在ASP环境中使用KindEditor编辑器时,可能会遇到一个常见问题:无法正确获取编辑器内用户提交的数据。这通常发生在需要将编辑器内的HTML内容作为表单的一部分提交给服务器端处理的情况下。为了解决这个问题,我们...
在使用kindEditor进行富文本编辑时,批量上传图片是一项非常实用的功能。然而,在实际应用过程中,很多开发者都会遇到一些配置上的难题,尤其是在多图上传方面。本文将详细介绍如何正确配置kindEditor实现多图上传...
然而,原始的KindEditor可能并不直接支持图片上传后的压缩,这可能导致用户上传大尺寸图片时,服务器存储空间消耗过大,网页加载速度变慢等问题。 描述中提到的“带压缩图片功能”,意味着这个版本的KindEditor已经...
在使用KindEditor的过程中,我们需要了解以下几个核心知识点: 1. **安装与引入**:首先,你需要从官方仓库或第三方资源站点下载KindEditor的压缩包。解压后,将包含的JavaScript和CSS文件引入到你的HTML页面中。...
在IT行业中,网页内容的编辑是一个常见的需求,比如博客、论坛或者CMS系统等。JSP(JavaServer Pages)是一种动态网页技术,而KindEditor是一款强大的HTML在线编辑器,常用于创建富文本输入区域,使用户可以像在Word...
而KindEditor则是一个轻量级的在线文本编辑器,常用于网页中的富文本输入框,支持图片上传、链接插入等常见编辑功能。 在这个"Extjs+Kindeditor的例子"中,我们可以预期看到如何将这两个工具结合使用,为用户提供一...