淘宝开源编辑器Kissy Editor和简易留言编辑器
2012-04-17 09:22
253 查看
原来也写过一篇关于百度Ueditor编辑器的介绍:百度Ueditor编辑器的使用,ASP.NET也可上传图片
最开始是使用CuteEditor控件,需要好几mb的空间,因为刚开始学习ASP.NET的时候,觉得简单就是拉控件上去,后来自己发现了百度Ueditor编辑器,再后来看见热心人的评论也知道了KindEditor编辑器,后来也改用了这个
KindEditor编辑器 ,因为它比百度编辑器占的空间小,感觉也好一点,后来做网站,有时站内留言或者发贴子,我觉得这类编辑器功能太多了点,总感觉只适合新闻类编辑器,后来就网上不停的百度和Google查找,找了很久看见了淘宝开源的Kissy Editor编辑器,感觉很好,后来不小心在博客园又发现了一个简易的编辑器,感觉更容易看懂,也方便修改,只是界面没有淘宝的好看,但是对于简易的留言板还是够用了,两编辑器界面如下所示:
Kissy Editor编辑器
简易编辑器,是查看了博客园/article/4618573.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>
<body>
<form action="data.aspx" method="post">
<textarea id="demo" name="code" cols="142" rows="15">
<p>欢迎使用 KISSY Editor!</p>
</textarea>
<p><input id="Submit1" type="submit" value="提交" /></p>
</form>
<script src="kissy_editor/editor-aio.js" type="text/javascript"></script>
<script type="text/javascript">KISSY.Editor("demo");</script>
</body>
</html>
下面说一下简易HTMl编辑器,使用方式如下代码所示:
2
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>
<form action="data.aspx" method="post">
<textarea name="code" id="ebox">欢迎使用简易编辑器</textarea>
<p><input type="submit" value="submit" /></p>
</form>
<div style=" margin:0 auto; text-align:center;"></div>
<script type="text/javascript">
$("#ebox").css("height", "350px").css("width", "100%").htmlbox({
toolbars: [
[
"undo", "redo", "removeformat", "bold",
"underline", "strike", "italic", "sup", "sub",
"left", "center", "right", "indent", "outdent",
"link", "unlink", "image", "quote", "striptags", "code",
"fontcolor", "highlight", "fontsize", "fontfamily", "styles"
]
]
});
</script>
</body>
</html>
相信你看见了代码,就知道可以更改ToolBar显示哪些已有的功能,很简单吧。
写了有些凌乱,不要见怪,在此分享,那些需要简易编辑器的,下载使用,还是不错的选择。
下载地址:点击这里下载
版权所有,转载请注明出处!
一切伟大的行动和思想,都有一个微不足道的开始。微不足道的我,正在吸取知识的土壤,希望能取得成功!不嫌弃我微不足道的,愿交天下好友!
最开始是使用CuteEditor控件,需要好几mb的空间,因为刚开始学习ASP.NET的时候,觉得简单就是拉控件上去,后来自己发现了百度Ueditor编辑器,再后来看见热心人的评论也知道了KindEditor编辑器,后来也改用了这个
KindEditor编辑器 ,因为它比百度编辑器占的空间小,感觉也好一点,后来做网站,有时站内留言或者发贴子,我觉得这类编辑器功能太多了点,总感觉只适合新闻类编辑器,后来就网上不停的百度和Google查找,找了很久看见了淘宝开源的Kissy Editor编辑器,感觉很好,后来不小心在博客园又发现了一个简易的编辑器,感觉更容易看懂,也方便修改,只是界面没有淘宝的好看,但是对于简易的留言板还是够用了,两编辑器界面如下所示:
Kissy Editor编辑器
简易编辑器,是查看了博客园/article/4618573.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>
<body>
<form action="data.aspx" method="post">
<textarea id="demo" name="code" cols="142" rows="15">
<p>欢迎使用 KISSY Editor!</p>
</textarea>
<p><input id="Submit1" type="submit" value="提交" /></p>
</form>
<script src="kissy_editor/editor-aio.js" type="text/javascript"></script>
<script type="text/javascript">KISSY.Editor("demo");</script>
</body>
</html>
下面说一下简易HTMl编辑器,使用方式如下代码所示:
2
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>
<form action="data.aspx" method="post">
<textarea name="code" id="ebox">欢迎使用简易编辑器</textarea>
<p><input type="submit" value="submit" /></p>
</form>
<div style=" margin:0 auto; text-align:center;"></div>
<script type="text/javascript">
$("#ebox").css("height", "350px").css("width", "100%").htmlbox({
toolbars: [
[
"undo", "redo", "removeformat", "bold",
"underline", "strike", "italic", "sup", "sub",
"left", "center", "right", "indent", "outdent",
"link", "unlink", "image", "quote", "striptags", "code",
"fontcolor", "highlight", "fontsize", "fontfamily", "styles"
]
]
});
</script>
</body>
</html>
相信你看见了代码,就知道可以更改ToolBar显示哪些已有的功能,很简单吧。
写了有些凌乱,不要见怪,在此分享,那些需要简易编辑器的,下载使用,还是不错的选择。
下载地址:点击这里下载
版权所有,转载请注明出处!
一切伟大的行动和思想,都有一个微不足道的开始。微不足道的我,正在吸取知识的土壤,希望能取得成功!不嫌弃我微不足道的,愿交天下好友!
相关文章推荐
- 淘宝开源编辑器Kissy Editor和简易留言编辑器【转】
- 开源CEGUI编辑器之一(MFC重写的LayoutEditor)
- Unity3D Editor 编辑器简易教程
- 最近要用到cuteeditor编辑器,先转一篇留言着看
- 淘宝自己的前端框架KISSY(类似jquery) - 简易指南
- 我的第一个开源作品:jUEditor - 基于jQuery的轻量级UBB可视化编辑器
- 【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器(B/S架构)
- Unity3D Editor 编辑器简易教程
- 开源cocos2d-x编辑器 qco-editor
- 【Editor】 Unity3D Editor 编辑器简易教程
- Unity3D Editor 编辑器简易教程
- lua调试器与编辑器开源项目luacode(源自decoda)
- 淘宝在数据处理领域的项目及开源产品介绍 | 岭南六少 - 一朵在LAMP架构下挣扎的云
- QT开源编辑器CuteMarkEd
- 在vs.net2008中使用CuteEditor编辑器时,当发布网站时,生成的CuteSoft_Client\CuteEditor 目录中会缺少ditor.cep文件。
- 淘宝开源项目TbSchedule的部署和使用
- 淘宝的开源产品,你不行就别开源
- 让eWebEditor编辑器支持IE6.IE7.IE8傲游的办法
- syWebEditor编辑器最新0day