给web项目整合富文本编辑器

最新推荐文章于 2024-11-26 22:48:15 发布

转载最新推荐文章于 2024-11-26 22:48:15 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/StephenChowcai/p/7396594.html

文章标签：

#java

本文详细介绍如何在JSP项目中整合KindEditor富文本编辑器，包括下载、配置及使用等关键步骤。通过具体示例代码展示如何设置样式表、脚本及配置项。

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

给jsp页面整合富文本编辑器
下载——删除多余的组件——加入到项目中——参照案例来完成整合
步骤：
1. 解压zip文件，将所有文件复制到Tomcat的webapps/kindeditor目录下。

2. 将kindeditor/jsp/lib目录下的3个jar文件复制到Tomcat的lib目录下，并重新启动Tomcat。
* commons-fileupload-1.2.1.jar
* commons-io-1.4.jar
* json_simple-1.1.jar
以下用我下载的副文本编辑器为例
3.把下边的集成代表粘贴到目标文件中（记得修改必要的数据）
代码如下：
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>
<script>
  KindEditor.ready(function(K) {
  //这里名字是富文本域的name，后台取数据时用的name
   var editor1 = K.create('textarea[name="context"]', {
    cssPath : '<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css',
    uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',
    fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',
    allowFileManager : true,
    afterCreate : function() {
     var self = this;
     K.ctrl(document, 13, function() {
      self.sync();
      //注意修改这里的form表单的名字
      document.forms['nameForm'].submit();
     });
     K.ctrl(self.edit.doc, 13, function() {
      self.sync();
      document.forms['nameForm'].submit();
     });
    }
   });
   prettyPrint();
  });
</script
4.运行项目，效果就出来了。