淘宝开源编辑器Kissy Editor和简易留言编辑器【转】
原来也写过一篇关于百度Ueditor编辑器的介绍:百度Ueditor编辑器的使用,ASP.NET也可上传图片
最开始是使用CuteEditor控件,需要好几mb的空间,因为刚开始学习ASP.NET的时候,觉得简单就是拉控件上去,后来自己发现了百度Ueditor编辑器,再后来看见热心人的评论也知道了KindEditor编辑器,后来也改用了这个 KindEditor编辑器 ,因为它比百度编辑器占的空间小,感觉也好一点,后来做网站,有时站内留言或者发贴子,我觉得这类编辑器功能太多了点,总感觉只适合新闻类编辑器,后来就网上不停的百度和Google查找,找了很久看见了淘宝开源的Kissy Editor编辑器,感觉很好,后来不小心在博客园又发现了一个简易的编辑器,感觉更容易看懂,也方便修改,只是界面没有淘宝的好看,但是对于简易的留言板还是够用了,两编辑器界面如下所示:
Kissy Editor编辑器

简易编辑器,是查看了博客园http://www.cnblogs.com/lexus/archive/2010/09/12/1824214.html这篇博客

kissy editor目录结构如下图所示:

kissy editor可以根据个人需求,ToolBar可以控制显示哪些,可输入字符个数,等等都可以在editor-aio.js脚本文件中修改,由于此脚本只显示一行,找到相应修改的位置有点困难,你可以先查看editor.js脚本文件,找到需要修改的地方,然后在editor-aio.js中查找,如下修改字符个数的操作,如图所示:

kissy editor 的工具条也可以找到相应的editor-aio.js 文件进行修改,如下图所示:

淘宝上下载,会有一个demo的例子,由于我不想在此目录下面,因为我写的一个小例子,不在此目录下方,我就修改了路径,原有的那个demo.html中图像选择会显示不出图片,如下图所示:

需要按照自己的项目需求而修改,这里只是举了一个简单的例子。
kissy editor 的使用代码如下所示:
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <link href="kissy_editor/themes/default/editor-min.css" rel="stylesheet" type="text/css" />
6 <style type="text/css">
7 #Submit1{ padding:5px 5px 5px 5px;}
8 </style>
9 </head>
10 <body>
11 <form action="data.aspx" method="post">
12 <textarea id="demo" name="code" cols="142" rows="15">
13 <p>欢迎使用 KISSY Editor!</p>
14 </textarea>
15 <p><input id="Submit1" type="submit" value="提交" /></p>
16 </form>
17 <script src="kissy_editor/editor-aio.js" type="text/javascript"></script>
18 <script type="text/javascript">KISSY.Editor("demo");</script>
19 </body>
20 </html>
下面说一下简易HTMl编辑器,使用方式如下代码所示:

3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
7 <script src="ebox/ebox.js" type="text/javascript"></script>
8 </head>
9 <body>
10 <form action="data.aspx" method="post">
11 <textarea name="code" id="ebox">欢迎使用简易编辑器</textarea>
12 <p><input type="submit" value="submit" /></p>
13 </form>
14 <div style=" margin:0 auto; text-align:center;"></div>
15 <script type="text/javascript">
16 $("#ebox").css("height", "350px").css("width", "100%").htmlbox({
17 toolbars: [
18 [
19 "undo", "redo", "removeformat", "bold",
20 "underline", "strike", "italic", "sup", "sub",
21 "left", "center", "right", "indent", "outdent",
22 "link", "unlink", "image", "quote", "striptags", "code",
23 "fontcolor", "highlight", "fontsize", "fontfamily", "styles"
24 ]
25 ]
26 });
27 </script>
28 </body>
29 </html>

相信你看见了代码,就知道可以更改ToolBar显示哪些已有的功能,很简单吧。
写了有些凌乱,不要见怪,在此分享,那些需要简易编辑器的,下载使用,还是不错的选择。
下载地址:点击这里下载
版权所有,转载请注明出处!
一切伟大的行动和思想,都有一个微不足道的开始。微不足道的我,正在吸取知识的土壤,希望能取得成功!不嫌弃我微不足道的,愿交天下好友!
本文完全引用自: 作者xu_happy_you 的 http://www.cnblogs.com/cmsdn/archive/2012/04/17/2451893.html
淘宝开源编辑器Kissy Editor和简易留言编辑器【转】的更多相关文章
- 淘宝开源Key/Value结构数据存储系统Tair技术剖析
摘要: Tair的功能 Tair是一个Key/Value结构数据的解决方案,它默认支持基于内存和文件的两种存储方式,分别和我们通常所说的缓存和持久化存储对应. Tair除了普通Key/Value系统提 ...
- 基于淘宝开源Tair分布式KV存储引擎的整合部署
一.前言 Tair支撑了淘宝几乎所有系统的缓存信息(Tair = Taobao Pair,Pair即Key-Value键值对),内置了三个存储引擎:mdb(默认,类似于Memcache).rdb(类似 ...
- 淘宝开源Web服务器Tengine安装教程
简介Tengine是由淘宝核心系统部基于Nginx开发的Web服务器,它在Nginx的基础上,针对大访问量网站的需求,添加了很多功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,淘宝商 ...
- 淘宝开源Web服务器Tengine基本安装步骤
Tengine 是由淘宝核心系统部基于Nginx开发的Web服务器,它在Nginx的基础上,针对大访问量 网站的需求,添加了很多功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,淘宝商 ...
- 超级强大的淘宝开源平台(taobao-code)
今天发现了一个免费又高级的开源SVN服务器,taobao,阿里云CODE.迫不及待的注册了一个.感觉不错,分享给大家. 先说说我们用过的几个SVN服务器吧: google code oksvn(感觉不 ...
- 淘宝开源系统监控工具Tsar
Tsar是淘宝开发的一个非常好用的系统监控工具,在淘宝内部大量使用 它不仅可以监控CPU.IO.内存.TCP等系统状态,也可以监控Apache,Nginx/Tengine,Squid等服务器状态 ...
- 淘宝开源项目之Tsar
软件介绍: Tsar是淘宝开发的一个非常好用的系统监控工具,在淘宝内部大量使用,它不仅可以监控CPU.IO.内存.TCP等系统状态,也可以监控Apache,Nginx/Tengine,Squid等服务 ...
- 淘宝开源平台(taobao-code)使用
偶尔之下翻到的这个东西,瞬间觉得足以解决自己在开发过程中的版本控制问题.就注册了一个试试.先是在度娘上搜寻“淘code”,进入官网之后直接注册.然后构建自己的项目,上传代码就OK了. 一.搜寻“淘co ...
- 淘宝开源任务调度框架tbschedule
背景 分布式任务调度是非常常见的一种应用场景,一般对可用性和性能要求不高的任务,采用单点即可,例如linux的crontab,spring的quarz,但是如果要求部署多个节点,达到高可用的效果,上面 ...
随机推荐
- [BUAA_SE_2017]个人项目-Sudoku
个人项目作业-数独 Github项目地址 时间预估 PSP2.1 Personal Software Process Stages 预估时间(分钟) 实际耗时(分钟) Planning 计划 60 · ...
- CI框架--数据库Query_Builder中的方法
下面是DB_Query_Builder.php中,各个方法的声明: 选择字段(select) public function select($select = '*', $escape = NULL) ...
- remove()与empty()的区别
1.empty() - 从被选元素中删除子元素: 2.remove() - 删除被选元素(及其子元素): 3.remove() 方法也可接受一个参数,允许您对被删元素进行过滤.
- mysql的主主复制详解
Mysql双主部署 解释: 所谓双主备份,其实也就是互做主从复制,每台master既是master,又是另一台服务器的slave.这样,任何一方所做的变更,都会通过复制应用到另外一方的数据库中. 要求 ...
- chart.js & canvas
chart.js & canvas https://www.chartjs.org/samples/latest/ https://www.chartjs.org/samples/latest ...
- Java DateUtils 的实用
Java DateUtils的实用可以很方便的对日期进行对年,月,日,时,分,秒的相加和相减,能很好的解决日期的运算 可以不用必须调用Oracle等数据库本地函数进行运算,相比之下更为简洁方便. pa ...
- BZOJ3420[POI2013]Triumphal arch&BZOJ5174[Jsoi2013]哈利波特与死亡圣器——树形DP+二分答案
题目大意: 给一颗树,1号节点已经被染黑,其余是白的,两个人轮流操作,一开始B在1号节点,A选择k个点染黑,然后B走一步,如果B能走到A没染的节点则B胜,否则当A染完全部的点时,A胜.求能让A获胜的最 ...
- BZOJ2793[Poi2012]Vouchers——枚举
题目描述 考虑正整数集合,现在有n组人依次来取数,假设第i组来了x人,他们每个取的数一定是x的倍数,并且是还剩下的最小的x个.正整数中有m个数被标成了幸运数,问有哪些人取到了幸运数. 输入 第一行一个 ...
- MT【242】图像几何意义
设函数$f(x)=x^2+ax+b$,已知函数$f(x)$在$[-1,1]$上存在零点,若$0\le b-2a\le 1$,求$b$的范围 (2015浙江文科高考20(2)) 分析:理解成$g(x)= ...
- 自学Linux Shell18.1-sed编辑器基础特性
点击返回 自学Linux命令行与Shell脚本之路 18.1-sed编辑器基础特性 linux世界中最广泛使用的两个命令行编辑器: sed gawk 1. sed概念 sed是stream edito ...