富文本编辑器kindEditor简单教程

最近需求用到了富文本编辑器。kindEditor一直是我的首选，简单好用，功能挺全。

首先下载kindEdtor资源包。

我这里使用的是jsp,只需要把下列包拷贝到kindEditor文件夹下（WebRoot新建文件夹kindEditor）：

jsp,lang,plugins,thems主要的是这四个包。把kindeditro-all.js也拷贝到kindEditor文件夹下。

在jsp中引入所需要的文件

head:
<script src="js/jquery-1.4.2.js"></script>
<link rel="stylesheet" href="kindEditor/themes/default/default.css" />
<link rel="stylesheet" href="kindEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="kindEditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindEditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="kindEditor/plugins/code/prettify.js"></script><script type="text/javascript">KindEditor.ready(function(K) {var  editor1 = K.create('textarea[name="名字"]', {cssPath : 'kindEditor/plugins/code/prettify.css',uploadJson : 'kindEditor/jsp/upload_json.jsp',fileManagerJson : 'kindEditor/jsp/file_manager_json.jsp',allowFileManager : true,afterCreate : function() {var self = this;K.ctrl(document, 13, function() {self.sync();document.forms['froForm'].submit();});K.ctrl(self.edit.doc, 13, function() {self.sync();document.forms['froForm'].submit();});}});prettyPrint();});
</script> body:<textarea name="名字" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea> //与上面名字保持一致

这里需要注意的是：

jsp中只需要这两个文件，并且这两个文件中可以修改上传本地图片的保存地址
file_manager_json.jsp中

//根目录路径，可以指定绝对路径，比如 /var/www/attached/
//这里指定为WebRoot下自建的upload文件夹
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl  = request.getContextPath() + "/upload/";

upload_json.jsp中

//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";  //文件保存目录URL
String saveUrl  = request.getContextPath() + "/upload/";

如果出现上传本地图片错误，请以下面代码完全替换upload_json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.struts2.dispatcher.multipart.*" %>
<%@ page import="org.json.simple.*" %>
<%  /**  * KindEditor JSP  *   * 本JSP程序是演示程序，建议不要直接在实际项目中使用。  * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。  *   */
//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";  

//文件保存目录URL
String saveUrl  = request.getContextPath() + "/upload/";  

//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");  

//最大文件大小
long maxSize = 1000000;  response.setContentType("text/html; charset=UTF-8");  if(!ServletFileUpload.isMultipartContent(request)){  out.println(getError("请选择文件。"));  return;
}
//检查目录
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){  out.println(getError("上传目录不存在。"));  return;
}
//检查目录写权限
if(!uploadDir.canWrite()){  out.println(getError("上传目录没有写权限。"));  return;
}  String dirName = request.getParameter("dir");
if (dirName == null) {  dirName = "image";
}
if(!extMap.containsKey(dirName)){  out.println(getError("目录名不正确。"));  return;
}
//创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {  saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {  dirFile.mkdirs();
}  MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;
File file = wrapper.getFiles("imgFile")[0];
String fileName = wrapper.getFileNames("imgFile")[0];
//检查文件大小  if(file.length() > maxSize){  String temStr= "上传文件大小超过限制。";  out.println(getError(temStr));  return;  }
//检查扩展名  String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();  if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){  String temStr= "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。";  out.println(getError(temStr));  return;  }  SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");  String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;  try {    InputStream in = new FileInputStream(file);    File uploadFile = new File(savePath, newFileName);    OutputStream outFile = new FileOutputStream(uploadFile);    byte[] buffer = new byte[1024 * 1024];    int length;    while ((length = in.read(buffer)) > 0) {    outFile.write(buffer, 0, length);    }    in.close();    outFile.close();    } catch (FileNotFoundException ex) {    ex.printStackTrace();    } catch (IOException ex) {    ex.printStackTrace();    }    JSONObject obj = new JSONObject();  obj.put("error", 0);  obj.put("url", saveUrl + newFileName);  out.println(obj.toJSONString());
%>
<%!
private String getError(String message) {  JSONObject obj = new JSONObject();  obj.put("error", 1);  obj.put("message", message);  return obj.toJSONString();
}
%>

这个方法转自解决kindeditor上传图片、文件的错误这个博客。

富文本编辑器kindEditor简单教程相关推荐

easyUI整合富文本编辑器KindEditor详细教程
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
Markdown富文本编辑器（数学公式教程）
Markdown富文本编辑器(数学公式教程) 简单分类行内公式示例如下行间公式实例如下希腊字母上标与下标括号小括号与方括号大括号尖括号上取整下取整求和与积分求和积分连乘其 ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
yii2 html编辑器,浅析Yii2集成富文本编辑器redactor实例教程
在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Red ...
富文本编辑器 Kindeditor 的使用和常见错误
富文本编辑器 Kindeditor 的使用和常见错误错误一问题描述:批量图片上传弹窗中没有添加图片按钮原因以及解决:按钮资源(.swf)被拦截错误二问题描述:图片上传失败原因分析:批量 ...
kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...
php 富文本编辑器,开发php接入富文本编辑器KindEditor笔记 | 小灰灰博客
在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人 ...
Python入门自学进阶-Web框架——34、富文本编辑器KindEditor、爬虫初步
KindEditor是一个轻量级的富文本编辑器,应用于浏览器客户端. 一.首先是下载:http://kindeditor.net/down.php,如下图下载后是解压缩后: 红框选中的都可以删除到 ...

富文本编辑器kindEditor简单教程

最近需求用到了富文本编辑器。kindEditor一直是我的首选，简单好用，功能挺全。

首先下载kindEdtor资源包。

在jsp中引入所需要的文件

富文本编辑器kindEditor简单教程相关推荐

最新文章

热门文章