Editor富文本编辑器（图片上传）

小咪咪 2022-01-12 15:33 489阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXBlbmdxcQ_size_16_color_FFFFFF_t_70][]

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXBlbmdxcQ_size_16_color_FFFFFF_t_70 1][]

下面是页面index.jsp

<%@ page language="java" import="java.util.*"  contentType="text/html;charset=gb2312"%>   
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
    <link rel="stylesheet" href="<%=basePath %>editor/themes/default/default.css" />
    	<link rel="stylesheet" href="<%=basePath %>editor/plugins/code/prettify.css" />
    	<script charset="utf-8" src="<%=basePath %>editor/kindeditor.js"></script>
    	<script charset="utf-8" src="<%=basePath %>editor/lang/zh_CN.js"></script>
    	<script charset="utf-8" src="<%=basePath %>editor/plugins/code/prettify.js"></script>
    	<script>
    		KindEditor.ready(function(K) {
    			var editor1 = K.create('textarea[name="content1"]', {
    				cssPath : '<%=basePath %>editor/plugins/code/prettify.css',
    				uploadJson : '<%=basePath %>editor/jsp/upload_json.jsp',
    				fileManagerJson : '<%=basePath %>editor/jsp/file_manager_json.jsp',
    				allowFileManager : true,
    				afterCreate : function() {
    					var self = this;
    					K.ctrl(document, 13, function() {
    						self.sync();
    						document.forms['form1'].submit();
    					});
    					K.ctrl(self.edit.doc, 13, function() {
    						self.sync();
    						document.forms['form1'].submit();
    					});
    				}
    			});
    			prettyPrint();
    		});
    	</script>
    </head>
    
    <body>
    <div class="right_cont">
    <div class="title_right"><strong>租赁信息管理</strong></div>  
    <div style="width:900px;margin:auto;">
    <form action="<%=basePath %>ComServlet" method="post" name="form1">
    <table class="table table-bordered"> 
         <tr><input type="hidden" name="method" value="33" /><input type="hidden" name="id" value="22" />
         <td width="40%" align="right" nowrap="nowrap" bgcolor="#f1f1f1">信息标题：</td>
         <td><input type="text" name="bt" class="span6" value="11" required/></td> 
         </tr>
         <tr>
         <td width="40%" align="right" nowrap="nowrap" bgcolor="#f1f1f1">信息内容：</td>
         <td><textarea name="content1" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea></td> 
         </tr> 
         <tr>
         	<td class="text-center" colspan="2"><input type="submit" value="确定" class="btn btn-info  " style="width:80px;" /></td>
         </tr>
         </table> 
    </form>
       </div>  
     </div>  
    </body>
    
    <%!
    private String htmlspecialchars(String str) {
    	str = str.replaceAll("&", "&");
    	str = str.replaceAll("<", "<");
    	str = str.replaceAll(">", ">");
    	str = str.replaceAll("\"", """);
    	return str;
    }
    %>

下载地址 [https://pan.baidu.com/s/1M\_MjvpwJhZjlMPH7K5K5UA][https_pan.baidu.com_s_1M_MjvpwJhZjlMPH7K5K5UA] 提取码 k8mc

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXBlbmdxcQ_size_16_color_FFFFFF_t_70]: /images/20220112/e4df7f2c83994136b133923eecb86442.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXBlbmdxcQ_size_16_color_FFFFFF_t_70 1]: /images/20220112/ad6dd0de631f4498a55677704821bd4a.png
[https_pan.baidu.com_s_1M_MjvpwJhZjlMPH7K5K5UA]: https://pan.baidu.com/s/1M_MjvpwJhZjlMPH7K5K5UA