富文本編輯器:KindEditor+Struts2 筆記之環境搭建

背景:你的 strut2 框架能夠跑的起來。

  1. 添加kindeditor插件。這是我的存放位置
  2. 寫一個自己的jsp文件,引入kindeditor相關文件。這是我jsp 文件的代碼。
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<base href="<%=basePath%>">
    
    		<title>Dynamic Load Examples</title>
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="This is my page">
    		<style>
    form {
    	margin: 0;
    }
    
    textarea {
    	display: block;
    }
    </style>
    
    		<script src="<%=path%>/js/jquery-1.8.0.min.js">
    </script>
    		<script>
    $(function() {
    	$('input[name=load]').click(function() {
    		$.getScript('<%=path%>/plugins/kindeditor/kindeditor-min.js', function() {
    			KindEditor.basePath = '<%=path%>/plugins/kindeditor/';
    			KindEditor.create('textarea[name=content]');
    		});
    	});
    	$('input[name=remove]').click(function() {
    		KindEditor.remove('textarea[name=content]');
    	});
    });
    </script>
    
    
    	<body>
    		<h3>
    			異步加載
    		</h3>
    		<div>
    			<img src="<%=path%>/test/img/1.png"></img>
    			<img src="<%=path%>/test/img/2.png"></img>
    			<img src="<%=path%>/test/img/3.png"></img>
    		</div>
    		<form>
    			<textarea name="content" style="width: 800px; height: 200px;"></textarea>
    			<p>
    				<input type="button" name="load" value="加載JS並創建編輯器" />
    				<input type="button" name="remove" value="刪除編輯器" />
    			</p>
    		</form>
    	</body>
    </html>
    

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章