文档章节

kindeditor使用入门-张国红

 蓝神100
发布于 2017/03/31 15:14
字数 620
阅读 5
收藏 0

kindeditor是在线编辑器,比较好用,以下是提供的使用这个插件的步骤。 下载kindeditor-4.1.10.zip 解压

输入图片说明

asp,asp.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>

![输入图片说明]

以上是简单的入门测试。

© 著作权归作者所有

上一篇: 软件测试行业
下一篇: 论MyBatis日志
粉丝 0
博文 23
码字总数 23824
作品 0
东城
程序员
私信 提问
kindeditor使用入门-张国红

kindeditor是在线编辑器,比较好用,以下是提供的使用这个插件的步骤。 下载kindeditor-4.1.10.zip 解压 asp,asp.net,php对于jsp开发没有用,可以删除 新建web工程,拷贝文件 在WebRoot目录...

蓝神100
2018/06/28
0
0
KindEditor在thinkphp上的使用方法

KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,且兼容主流浏览器。与ueditor这样的大块头相比,KindEditor的优点是不言而喻的--它体积小,加载速...

网菠萝果
2012/11/20
0
0
kindeditor增加了一个商业授权,可能需要调整概述

KindEditor 默认在 LGPL 开源授权协议下发布,免费使用 KindEditor 必须遵守 LGPL 开源授权协议。 同时,KindEditor 为商业用户准备了 商业授权协议,获得商业授权之后,不受 LGPL 开源授权协...

戴威
2011/04/26
665
6
kindeditor php修改上传文件的保存路径

Kindeditor 是一款开源的html编辑器。 我使用的是php版本,修改路径的文件在/kindeditor/php/下的upload_json.php中。 第17行这: //文件保存目录路径$savepath = $phppath . '../attached/'...

Jceee
2014/04/10
0
1
.NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件

  KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无...

80368704
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部