kindeditor简单使用

在eclipse中新建kindeditor-demo的maven项目,导入依赖pom.xml如下

<dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    
    <dependency>
	  <groupId>commons-fileupload</groupId>
	  <artifactId>commons-fileupload</artifactId>
	  <version>1.3.1</version>
	</dependency>
    
    <dependency>
	  <groupId>commons-io</groupId>
	  <artifactId>commons-io</artifactId>
	  <version>2.4</version>
	</dependency>

将kindeditor拷贝至webapp下,并创建index.jsp文件内容如下

<%@ page language="java" contentType="text/html; charset=UTF-8" 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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<script type="text/javascript" src="<%=basePath%>kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src="<%=basePath%>kindeditor/lang/zh_CN.js" charset="utf-8"></script>

	<!-- 实例化编辑器 -->
    <script type="text/javascript">
	    var editor;
	    
	    var options = {
	    	filterMode : true,
	    	width : '652px',
	    	items:[
	    	    'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|',
	    	    'insertorderedlist','insertunorderedlist', 'forecolor', 'hilitecolor', 'fontname', 'fontsize', '|',
	    	    'link', 'unlink', 'emoticons', 'code', 'image', 'flash', '|',
	    	    'bockquote', 'baidumap', 'source', 'about'
	    	],
	    	cssPath :[ './kindeditor/plugins/bockquote/bockquote.css'],
	    };
    
	    var editor;
		KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]',options) 
		});
	    
	   //console.info(editor.html());
    </script>
</head>
<body>
    <h3>默认模式</h3>
	<form>
		<textarea name="content" style="visibility:hidden;">KindEditor</textarea>
	</form>
	
	<input type="button" id="btn" value="enter" />
</body>
</html>

具体详细应用,请参考官方api

你可能感兴趣的:(kindeditor)