码迷,mamicode.com
首页 > 其他好文 > 详细

kindeditor使用入门-张国红

时间:2016-12-29 20:42:38      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:在线编辑器   asp.net   文件夹   图片   工程   

kindeditor是在线编辑器,比较好用,以下是提供的使用这个插件的步骤。

下载kindeditor-4.1.10.zip

解压

技术分享 

aspasp.net,php对于jsp开发没有用,可以删除

新建web工程,拷贝文件

WebRoot目录下新建一个文件夹

技术分享 

这个文件夹是将来上传图片时用的,这是kindeditor默认的,当然也可以改,建议先按照这个文档入了门后,再行修改。

attached一样,在WebRoot目录下新建目录kindeditor目录,把上面解压后的文件拷贝到这个目录下。

技术分享 

需要把jsp目录下的lib目录下的jar包拷贝到WEB-INF/lib目录下

技术分享 

修改index.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>My JSP ‘index.jsp‘ starting page</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">

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />

<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />

<script charset="utf-8" src="kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>

<script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>

<script>

KindEditor.ready(function(K) {

var editor1 = K.create(‘textarea[name="article.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>

</head>

<body>

<div id="container">

<div id="header">

</div>

<div id="mainContent">

<form name="example" method="post" action="servlet/MyServlet">

题目:

<input type="text" name="article.title">

<br />

内容:

<textarea name="article.content1" cols="100" rows="8"></textarea>

<br />

<input type="submit" name="button" value="提交" />

</form>

</div>

</div>

</body>

</html>

技术分享 

新增servlet,接收index.jsp的提交

技术分享 

新增index2.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>My JSP ‘index.jsp‘ starting page</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">

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />

<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />

<script charset="utf-8" src="kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>

<script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>

<script>

KindEditor.ready(function(K) {

var editor1 = K.create(‘textarea[name="article.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>

</head>

<body>

<div id="container">

<div id="header">

</div>

<div id="mainContent">

<form name="example" method="post" action="servlet/MyServlet">

题目:

<input type="text" name="article.title" value="${title }">

<br />

内容:

<textarea name="article.content1" cols="100" rows="8">${content }</textarea>

<br />

<input type="submit" name="button" value="提交" />

</form>

</div>

</div>

</body>

</html>

 

技术分享 

以上是简单的入门测试。

 


kindeditor使用入门-张国红

标签:在线编辑器   asp.net   文件夹   图片   工程   

原文地址:http://12405195.blog.51cto.com/12395195/1887318

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!