一、下載富文本插件kindeditor
下載地址：https://pan.baidu.com/s/16NRQdUlHki4ZgKwBH3tgvQ
提取碼：h98z
二、解壓
1、將解壓后的“kindeditor”文件夾直接復制到項目根目錄下。
2、將“kindeditor/jsp/lib”下的3個jar包復制到tomcat的lib目錄下，如下圖所示：
三、設計表單頁面demo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>kindeditor測試</title> <link rel="stylesheet" href="kindeditor/themes/default/default.css" > <script type="text/javascript" src="kindeditor/kindeditor-all-min.js"></script> <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script> </head> <body> <!-- 表單的name(example)一定要和下面js代碼中document.forms['example'].submit()保持一致 --> <form name="example" action="result.jsp" method="post"> <!-- 多行文本框的name(content1)要和下面js中的textarea[name="content1"]保持一致 --> <textarea cols="100" rows="5" name="content1"></textarea> <input type="submit" > </form> <script> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="content1"]', { cssPath : 'kindeditor/plugins/code/prettify.css', uploadJson : 'kindeditor/jsp/upload_json.jsp', fileManagerJson : 'kindeditor/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> </body> </html>
四、設計結果頁面result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% request.setCharacterEncoding("utf-8"); %> <%= request.getParameter("content1") %> </body> </html>
五、程序運行結果
圖片上傳到發布項目下的目錄下，如下圖所示。
