一：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现
一：我用的kindeditor版本是4.1.10 下载完成打开目录结构如下：
二：下面是工程目录也很重要，
三： 好了，准备工作已经做好了，现在就直接上代码了。 首先是页面JSP代码比较简单，，基本上就是从下载下来的插件里面有demo页面拷贝的代码稍加改动一下就好了。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'addPost.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript" src="/res/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="${ctx }/res/textEdit/themes/default/default.css" />
<link rel="stylesheet" href="${ctx }/res/textEdit/plugins/code/prettify.css" />
<script charset="utf-8" src="${ctx }/res/textEdit/kindeditor-min.js"></script>
<script charset="utf-8" src="${ctx }/res/textEdit/lang/zh_CN.js"></script>
<script charset="utf-8" src="${ctx }/res/textEdit/plugins/code/prettify.js"></script>
<script type="text/javascript">
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="content1"]', {
cssPath : '${ctx }/res/textEdit/plugins/code/prettify.css',
uploadJson : '${ctx }/test/test',
fileManagerJson : '${ctx }/test/test',
allowFileManager : true, //获取图片上传成功过后返回的图片地址
afterUpload: function (url) {
K('#txtImgPath').val(url);
}, afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}, });
prettyPrint();
});
</script> <body> <hr/>
<br/><br/>
<!--显示图片上传成功过后返回的图片地址 -->
<p>图片地址：<input type="text" id="txtImgPath" style="width:300px;"/></p>
<hr/> <form name="example" action="${ctx }/notice/addNoticetwo" method="post" enctype="multipart/form-data">
选择咨询类型：
<select name="categoryId" id="nl" style="width:155px; height:18px; border:1px solid #ccc; font-size:12px;">
<c:forEach items="${categoryList }" var="item">
<c:if test="${item.sortOrder==1 }">
<option value="${item.id }" selected="selected">${item.name }</option>
</c:if>
<c:if test="${item.sortOrder!=1 }">
<option value="${item.id }" >${item.name }</option>
</c:if>
</c:forEach>
</select>
<p> 上传图片或文件:<input type="file" name="fileName"/></p>
<p>标题：<input type="text" name="title"/></p>
<p>是否允许评论：<input type="text" name="commentsDisallowed"/></p>
<p>摘要<input type="text" name="excerpt"/></p>
<p>
内容：<textarea name="content1" id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea>
</p>
<p>来源：<input type="text" name="source"/></p>
<p>是否已发布： 是：<input type="radio" name="published" value="0" />
否：<input type="radio" name="published" value="1" /></p>
<p><input type="submit" value="走着！！"/></p>
</form>
</body>
<%!
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>
</html>
下面是此文本编译器的页面展示：
下面是Action后台代码：
//注意： @RequestParam("imgFile") MultipartFile idimg 这里面的imgFile 是kindeditor 上传图片的默认名
@RequestMapping(value="/test/test",method=RequestMethod.POST)
public void test(@RequestParam("imgFile") MultipartFile idimg,HttpServletResponse response,HttpServletRequest request) throws IOException{
//ajax 请求处理中文乱码
request.setCharacterEncoding("gb2312");
response.setContentType("text/html;charset=utf-8");
//获取系统的临时路径 C:\Users\admin\AppData\Local\Temp\
String temporaryPath= System.getProperty("java.io.tmpdir");
//获取文件名字 如 :123.JPG
String fileName=idimg.getOriginalFilename();
//获取内容
String content=request.getParameter("content1");
// 转存文件
//transferTo()： 次方方为springMVC框架 保存图片的方法
idimg.transferTo(new File(temporaryPath + fileName));
//现在既然已经将文件写入到了文件夹， 接下来就是把文件的地址存到数据库了，这个我代码没有写，
// temporaryPath + fileName 就是写入文件的全路径
// 代码省略 。。。。。。
//返回ajax内容
PrintWriter pw = response.getWriter();
String img="http://www.baidu.com/img/bd_logo1.png"; //这是一个图片的地址我随便找了一个写死的 只为测试
//下面这行代码才是让我发疯的地方，这个地方返回的事一个json串，之前这个串里的参数我不知道写什么，
//试了好多次好多种都不行，最主要的是不知道是不是这里的错，纠结了好久，最后在一位同行的代码中找到了这
//行代码，拷贝过来就可以了，让我纠结一天不知道哪里出错的地方原来就是这一行代码。。。。。
pw.write("{\"error\":0,\"url\":\"" +img+"\"}");
}
如上这样写的编译器有个致命的弱点，就是返回的图片URL 必须是网络上服务器上的到页面才可以展示， 要是拿的本地图片是展示不出来的，
还有上传多张图片，百度地图等功能还没有写，，哎，，希望得到哪位大神指点吧！
一：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现的更多相关文章
- 二：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现
这和一篇与上一篇的区别在与,上一篇是直接请求到action我们剩下的都是我们全部手动处理, 而这一片篇是由kindeditor内部处理,图片上传到本地,基本上没什么区别,但是有一点一定要注意的就是,这 ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- 后台文本编辑器KindEditor介绍
后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...
- 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传
富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- KindEditor 4.1.10 (2013-11-23)首行空格不能显示在编辑器内
KindEditor版本: KindEditor 4.1.10 (2013-11-23) 一.BUG再现步骤: 1.文章前面插入二个全角空格作为缩进,因为并非所有段落都有缩进故不采用 CSS 的 te ...
- python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- 简易Java文本编译器（C++）
如何使用VS写一个Java的文本"编译器 "? 所需程序: 1.Visual Studio 2.JDK 你是否因为习惯于使用VS编译C/C++程序,在学java的时候改用新编译器而 ...
- Linux下vim（文本编译器）的使用
vim (文本编译器): Vim是从 vi 发展出来的一个文本编辑器. vim的一些命令操作: 插入命令: a 在光标所在字符后插入 A 在光标所在行尾插入 i 在光标所在字符前插入 I 在光标所在行 ...
随机推荐
- [C++] 麻将胡牌算法
麻将的玩法规则众多,核心的玩法是一致的,本文将根据联发科2017年编程挑战赛的复赛题规则来实现. 牌的表示方式 ABCDEFGHI代表一到九萬,abcdefghi代表一到九条,123456789代表一 ...
- ResourceBundle和properties 读取配置文件区别
java.util.ResourceBundle 和java.util.properties 读取配置文件区别 这两个类都是读取properties格式的文件的,而Properties同时还能用来写文 ...
- java基础学习总结——java环境变量配置(转)
只为成功找方法,不为失败找借口! 永不放弃,一切皆有可能!!! java基础学习总结——java环境变量配置 前言 学习java的第一步就要搭建java的学习环境,首先是要安装 JDK,JDK安装好之 ...
- 【P1379】八数码难题(搜索+暴力)
这个题真是... 不想说什么了,及其复杂和烦人的一道题.基础思路就是bfs,用两个队列分别进行0的位置的计算和每一步的状态..然而这个题最重要的一点在于判重,实际上可以康托展开用全排列的个数进行判重, ...
- Nginad广告生成代码分析
大家都知道实时竞价的广告一般会在一个iframe中,这个iframe会有一个复杂的src.那么这个iframe是如何生成的? 这里分析NginAd作为exchange时,如何让媒体网站通过引用一段ad ...
- 数据结构习题 线段树&树状数组
说明:这是去年写了一半的东西,一直存在草稿箱里,今天整理东西的时候才发现,还是把它发表出来吧.. 以下所有题目来自Lrj的<训练指南> LA 2191 单点修改,区间和 Fenwick直 ...
- 直播P2P技术3-伙伴节点质量评估及子流订阅
以上模型,暂且称之为W-P2P吧.
- Codeforces Round #367 (Div. 2) A , B , C
A. Beru-taxi time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- CDH- cdh kafka已经卸载了,但是服务器还有kafka-topics这些命令可用,导致重新安装kafka出现问题
cdh界面删除并不会将 kafka数据删除,需要将kafka集群节点 var/local/kafka/data 清理掉 然后将zk brokers/topics 下的topic也清理掉
- 使用roboware创建工作空间
1.打开终端,启动roboware软件: $roboware-studio 2.在欢迎使用的页面点新建工作区,工作区的名字建议写为:catkin_ws,路径放在home文件夹或者任意你想放的文件夹中. ...