kindeditor用法简单介绍
最近做毕业设计用了一个叫做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了。
相关推荐
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得...2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
一怒之下,我自己进行了修改和配置,搞成了一个网站示例.下载解压后,可以直接运行!!完全无问题.! Kindeditor版本好像官方2012年之后就不更新了,官方最新的为 KindEditor 4.1.1 (2012-06-10), ,我这个网站里的是从qq群...
1. **跨浏览器兼容性**:KindEditor设计之初就考虑了多种浏览器的兼容性,支持包括IE6+、Firefox、Chrome、Safari和Opera在内的主流浏览器,确保用户在不同的环境下都能获得一致的编辑体验。 2. **丰富的编辑功能**...
2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。 主要特点 1. 体积小,加载速度快,但功能十分丰富。2. 内置自定义...
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得...2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得...2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
- **路径问题**:这是最常出现的问题之一。确保路径是正确的,尤其是相对路径和绝对路径的区分。在上述示例中,路径是以服务器根目录为基准的相对路径。 - **权限问题**:确保服务器端已为kindEditor控件提供了...
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见...2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一
总的来说,KindEditor HTML在线编辑器以其强大的功能、友好的用户体验和灵活的定制性,成为了网页开发中不可或缺的工具之一。无论是在博客、论坛、CMS系统还是其他需要用户输入文本的场合,都有其发挥价值的空间。...
版本4.1.2是其历史版本之一,可能包含了该编辑器在当时稳定且完善的功能集。 KindEditor的核心特性包括: 1. **所见即所得**:用户在编辑区域输入的内容能够实时预览,与最终发布效果一致。 2. **多语言支持**:...
KindEditor是一款功能强大的富文本编辑器,主要用于网页中的文本编辑任务。它是由JavaScript编写而成,因此...其丰富的功能、良好的扩展性和易用性,使得它在众多富文本编辑器中脱颖而出,成为开发者们的首选工具之一。
KindEditor是一款广泛应用于PHP开发中的开源富文本编辑器,它为用户提供了一个在网页上进行文本编辑的便捷界面,类似于Microsoft Word的功能。这款编辑器支持多种格式的文本输入,包括图片、视频、链接等多媒体元素...
自2006年首次发布以来,它凭借其优秀的用户体验和技术优势,在CMS、商城、论坛、博客等众多互联网应用中得到广泛应用,并逐渐成为国内最受欢迎的编辑器之一。 #### 二、主要特点 - **快速加载**:体积小巧,加载...
4.1.10版本是其历史版本之一,可能包含了一些特定的修复和改进。 在使用KindEditor时,首先需要在服务器端部署相关文件,通常包括js和css资源。例如,将kindeditor-4.1.10-zh-CN目录中的所有文件上传到Web服务器的...
其次,其特色功能之一是地图的在线查找和插入。这通常通过集成地图API(如Google Maps或Bing Maps)实现,允许用户在编辑器内直接搜索地理位置并插入地图图片,这对于编写包含地理信息的内容非常实用。 除此之外,...
综上所述,KindEditor作为一款优秀的中文在线编辑器,不仅具备全面的功能,还具有良好的扩展性和易用性,是Web开发中不可或缺的工具之一。无论你是初学者还是经验丰富的开发者,都能在KindEditor中找到满足需求的...
2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。 主要特点 1. 体积小,加载速度快,但功能十分丰富。2. 内置自定义...
这篇博客“Kindeditor插件开发之-弹出下拉列表”主要探讨的是如何在KindEditor中自定义一个弹出的下拉列表功能,这对于扩展编辑器的功能和提升用户体验具有重要意义。 在开发这个插件时,首先需要理解KindEditor的...
* 第一步: 需要把kindeditor全部加入到项目中,本实例已经加入中 * 第二步: 在新添加的页面<head>..................中加入以下代码 ------------------------------------------------------------------------...
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得...2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。