kindEditer富文本编辑器从前端到后台完整经验

最新推荐文章于 2024-08-01 13:55:48 发布

哈哈是龙啊

最新推荐文章于 2024-08-01 13:55:48 发布

阅读量7.9k

点赞数 2

分类专栏： kindEditer 文章标签：插件 kindEditer 富文本编辑器图片 upload

本文链接：https://blog.csdn.net/qq_28912317/article/details/73867335

版权

本文介绍了如何选择并使用kindEditer作为富文本编辑器，详细步骤包括从下载、导入项目到进行测试。在导入过程中，可以选择性保留必要组件以保持轻量级。在测试阶段，通过运行demo.jsp确保编辑器正常显示。值得注意的是，kindEditer的upload_json.jsp文件用于处理图片上传逻辑，可能需要根据个人业务需求进行调整。

摘要由CSDN通过智能技术生成

引言：kindEditer是现在免费开源的富文本编辑器中很轻巧和实用的，所以在比较之后决定使用它来满足项目的需求。

下载：http://kindeditor.net/demo.php

导入：由于官方没有完整项目jar包，所以把整个项目都导入到自己项目中，大小大约600多KB，导入位置随意，建议在根目录webapp下面就可以了。

测试：把kindEditer解压之后导入到项目中，过程中可以选择性的保留和去掉一些不需要的包，以达到更轻巧的目的，笔者后台为javaweb项目，所以保留了，jsp包，把其他三种类型的都删掉了。然后看下demo.jsp，这个是测试页，在浏览器上输入地址(http://localhost:8082/kindeditor/jsp/demo.jsp)看下能否出现效果，能的话就表示导入成功。

效果展示：

注意，upload_json.jsp这个jsp文件是kindEditer提供的图片上传的程序，这里面比较详细的写明了上传的逻辑代码，不过可能因为每个人的业务不同，所以需要修改一下路径。

<%@ 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.json.simple.*" %>
<%

/**
 * KindEditor JSP
 * 
 * 本JSP程序是演示程序，建议不要直接在实际项目中使用。
 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
 * 
 */

//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";

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

//定义允许上传的文件扩展名
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