kindeditor用法简单介绍

简介: 最近做毕业设计用了一个叫做kindeditor的文本编辑工具,相信很多人都用过,这货和fckeditor差不多,个人感觉这个的皮肤更好看,而且对中文的支持更好,没那么容易出现中文乱码问题。

最近做毕业设计用了一个叫做kindeditor的文本编辑工具,相信很多人都用过,这货和fckeditor差不多,个人感觉这个的皮肤更好看,而且对中文的支持更好,没那么容易出现中文乱码问题。下次记录一下自己的简单用法:

1,首先去官网下载http://www.kindsoft.net/ 

2,解压之后如图所示:

 


由于本人做的是用的是JSP,所以ASP,PHP什么的就用不上了,直接把那些去掉然后将整个文件夹扔进Myeclipse,如图:

 


里面有个报错,估计是我自己IDE的问题,没有处理照常使用。

3,就可以开工写JSP了,下面把自己的一个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" type="text/css" href="css/layout.css">

<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="menu">

<ul>

<li>

<a href="main.jsp">首页</a>

</li>

<li>

<a href="jsp/update_password.jsp">个人信息</a>

</li>

<li>

<a href="jsp/article_add.jsp">提交论文</a>

</li>

<li>

<a href="article_returnList.action">审批论文</a>

</li>

<li>

<a href="#">后台管理</a>

</li>

</ul>

</div>

<div id="mainContent">

 

<form name="example" method="post" action="article_add.action">

题目:

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

<br />

内容:

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

></textarea>

<br />

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

(提交快捷键: Ctrl + Enter)

</form>

</div>

<div id="footer">

Copyright 2012 by Lai Xuansi.

</div>

</div>

</body>

</html>

 

4,给张上述代码的效果图,本人不太会做界面,凑合看:

 

5,关于数据库和上传本地图片问题

Kindeditor对于上传的图片神马的会默认保存在attached文件夹中,至于数据库字段中存储的只是图片的地址,所以将内容读取出来的时候,只要读取数据库字段中的内容就会自动将文本和图片等一起显示出来了,很好很强大!要注意的就是读取数据库出来之后要将地址转换成HTML代码才能正确显示,这个工作很简单,只要:<s:property value="article.content1" escape="false" />将escape="false" 就OK了。

目录
相关文章
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
JavaScript 前端开发
jQuery $.inArray()方法的用法
在 jQuery 中,我们可以使用$.inArray()方法来判断某个值是否存在于数组中。
640 0
jQuery $.inArray()方法的用法
|
JavaScript
jQuery $.makeArray()方法的用法
jQuery $.makeArray()方法的用法
260 0
jQuery  $.makeArray()方法的用法
|
JavaScript
jQuery的用法
1. jQuery的引入2. jQuery的入口函数3. 小结
166 0
|
JSON 前端开发 JavaScript
|
Web App开发 JavaScript 容器
|
Web App开发 JavaScript
|
JSON JavaScript 前端开发
jQuery基本用法二
一、原生对象和jQuery对象的相互转换 jQuery封装的方法必须是jQuery对象才能用,把原生对象放在“$()”括号里面即可; 通过get()方法可以把jQuery对象转为原生对象。
1404 0
|
Web App开发 前端开发 JavaScript
jQuery基本用法一
简介和下载 1、简介 jQuery是一个轻量级的“写得少,做得多”的JavaScript函数库,并且它兼容所有主流浏览器。 2、下载 下载地址: http://jquery.com 英文网站中下载jQuery库文件。
1339 0