Kindeditor文本编辑器基本配置

最新推荐文章于 2022-10-31 12:00:54 发布

Jeremy Ning

最新推荐文章于 2022-10-31 12:00:54 发布

阅读量381

点赞数

分类专栏： web Java 文章标签： jsp 配置文本编辑器 kindeditor

Java 同时被 2 个专栏收录

2 篇文章

订阅专栏

web

1 篇文章

订阅专栏

本文介绍如何在JSP页面中使用KindEditor实现富文本编辑功能，包括下载、配置、引入相关资源及代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载kindeditor 地址：http://kindeditor.net/down.php
下载解压后：标记的必须要。再根据你所选的语言保留相应的文件夹，我用的是jsp。将这个文件夹放入到项目的根目录中，即WebRoot下面
jsp页面，引入js和css

<%@ 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") : "";
%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>KindEditor JSP</title>
    <link rel="stylesheet" href="../themes/default/default.css" />
    <link rel="stylesheet" href="../plugins/code/prettify.css" />
    <script charset="utf-8" src="../kindeditor.js"></script>
    <script charset="utf-8" src="../lang/zh_CN.js"></script>
    <script charset="utf-8" src="../plugins/code/prettify.js"></script>
    <script>
        KindEditor.ready(function(K) {
            var editor1 = K.create('textarea[name="content1"]', {
                cssPath : '../plugins/code/prettify.css',
                uploadJson : '../jsp/upload_json.jsp',
                fileManagerJson : '../jsp/file_manager_json.jsp',
                allowFileManager : true,
                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>
</head>
<body>
    <%=htmlData%>
    <form name="example" method="post" action="demo.jsp">
        <textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
        <br />
        <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
    </form>
</body>
</html>
<%!
private String htmlspecialchars(String str) {
    str = str.replaceAll("&", "&amp;");
    str = str.replaceAll("<", "&lt;");
    str = str.replaceAll(">", "&gt;");
    str = str.replaceAll("\"", "&quot;");
    return str;
}
%>