Kindeditor富文本使用

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。

1、在KindEditor的官网上 http://kindeditor.net/demo.php，下载所需要的js。安装到项目目录下：

2、引导到页面中，调整宽和高

3、代码支持

package com.vix.diandoc.user.action;import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Random;import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper;
import org.json.simple.JSONObject;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;import com.vix.common.base.action.VixAction;@Controller
@Scope("prototype")
public class KindEditorAction extends VixAction  {private static final long serialVersionUID = 1L;@SuppressWarnings("unchecked")
public String uploadFile(){//文件保存目录路径    img_upload是服务器存储上传图片的目录名String savePath = getServletContext().getRealPath("/") + "/resources/attached/kindeditor/";//文件保存目录URLString saveUrl = getRequest().getContextPath() + "/resources/attached/kindeditor/";//定义允许上传的文件扩展名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 = 5000000;//Struts2 请求 包装过滤器MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper)ServletActionContext.getRequest();//获得上传的文件名String fileName = wrapper.getFileNames("imgFile")[0];//获得文件过滤器File file = wrapper.getFiles("imgFile")[0];//得到上传文件的扩展名String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();//获得文件上传的类型String dirName = getRequest().getParameter("dir");if (dirName == null) {dirName = "image";}if(!extMap.containsKey(dirName)){setMessage("目录名不正确。");return UPDATE;}//创建文件夹savePath += dirName + "/";saveUrl += dirName + "/";File saveDirFile = new File(savePath);if (!saveDirFile.exists()) {saveDirFile.mkdirs();}//检查扩展名if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {setMessage("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");return UPDATE;}//检查文件大小if (file.length() > maxSize) {setMessage("上传文件大小超过限制，上传的文件不能超过2M。");return UPDATE;} //检查目录SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");String dir = sdf.format(new Date());File uploadDir = new File(savePath + dir);uploadDir.mkdirs();if (!uploadDir.isDirectory()) {setMessage("上传目录不存在 。");return UPDATE;}//检查目录写入权限if (!uploadDir.canWrite()) {setMessage("上传目录没有写入权限。");return UPDATE;}//重构上传图片的名称 SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSS");String newImgName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;byte[] buffer = new byte[1024];//获取文件输出流FileOutputStream fos = null;//获取内存中当前文件输入流InputStream in = null;try {fos = new FileOutputStream(savePath + dir + "/" + newImgName);in = new FileInputStream(file);int num = 0;while ((num = in.read(buffer)) > 0) {fos.write(buffer, 0, num);}} catch (Exception e) {e.printStackTrace(System.err);} finally {try{in.close();fos.close();}catch(Exception ex){ex.printStackTrace();}}//发送给 KE JSONObject obj = new JSONObject();obj.put("error", 0);obj.put("url", saveUrl + dir + "/" + newImgName);setMessage(obj.toJSONString());return UPDATE;}
}

4、页面获取富文本里内容:

var content = KindEditor.instances[0].html().trim();

Kindeditor富文本使用相关推荐

easyui有没有html编辑器,【easyui】kindeditor富文本（html编辑器）的使用
1.下载kindeditor 本人使用4.1.10版本百度云下载:点击打开链接 2.放入项目中 3.我是用的jsp前台网页,(前台为easyui) 在jsp中引入kindeditor的js和css样式 ...
（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
kindeditor富文本编译器
kindeditor富文本编译器 1.引入js文件 <script src="~/assets/plugins/kindeditor/kindeditor-all.js"/& ...
Java实现多文件上传下载，kindeditor富文本保存为word文件,文件列表分页显示
介绍 SpringBoot+Thymeleaf+Mybaits项目部分功能, 实现文件的多文件上传和下载,以及将kindeditor富文本内容保存为.doc文件文件上传/创建后以列表形式显示,并且可 ...
学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...
KindEditor富文本编辑器，从客户端中检测到有潜在危险的 Request.Form 值
在用富文本编辑器时经常会遇到的问题是asp.net报的"检测到有潜在危险的 Request.Form 值"一般的解法是在aspx页面 page 标签中加上 validater ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...

Kindeditor富文本使用

Kindeditor富文本使用相关推荐

最新文章

热门文章