kindeditor富文本编辑器的使用 入门

kindeditor富文本编辑器的使用

Kindeditor编辑器很好用，可以所见即所得，可以拷贝word内容到编辑框。
支持本地附件上传。。。

一、创建dynamic web project 项目名称test_kindeditor
下载kindeditor.zip并解压，将kindeditor文件夹拷贝到WebContent目录
拷贝WebContent/kindeditor/jsp/lib下的jar包到WebContent/WEB-INF/lib下
jar包包括：commons-fileupload.jar、commons-io.jar、json_simple.jar

二、创建WebContent/index.jsp文件
将WebContent/kindeditor/jsp/demo.jsp内容拷贝进index.jsp

三、修改js和css的引用路径，推荐使用相对路径。
添加java语句：<%String path = request.getContextPath(); %>
path代表的就是项目根路径。即http://localhost:端口/项目名称
注意项目名称之后没有"/"，根据这个相对路径将css和js的路径修正。
使用相对路径的好处：可以一次成功后，直接拷贝到任意地方使用，不受路径约束。
修改后的index.jsp内容如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
String path = request.getContextPath();
%>











<%=htmlData%>

<%=htmlspecialchars(htmlData)%>


(提交快捷键: Ctrl + Enter)

<%!
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>

四、解决本地上传图片，“上传目录不存在”的问题
在WebContent目录下添加一个attached文件夹。
原理：根据index.jsp的配置可以知道，图片文件的上传用到了WebContent/kindeditor/jsp/file_manager_json.jsp
这个文件中的有一个rootPath参数，此参数指定的就是“上传目录”
pageContext.getServletContext().getRealPath("/") + "attached/";
表示查找的是项目根路径下的attached目录