widgEditor:轻量级在线xhtml编辑器
一个比HtmlArea还要轻量级的在线编辑器,除了12个图标和四个样式表外,就一个JS文件,JS文件大小为40.2K,使用也非常地方便、灵活,只需要在 head 中加入一行包含 JavaScript 的代码,然后给你希望使用这个编辑器的那个 textarea 添加一个 class 即可。同时还可以通过 CSS 对界面的外观进行定制。
简单地看了一下她的代码,是完全面向对象的,并且程序的注释非常地全,甚至把函数列表都做出来了,非常易于扩展,其自身也保持了足够的简洁,就是一个字:Cool!
如果你想体验一下,可以去这里下载:
http://www.themaninblue.com/experiment/widgEditor/
看好她的原因,除了轻巧外,更是她的对XHTML的支持,这么小的编辑器竟然对XHTML支持得非常好,并且全对粘入编辑器中的HTML代码进行转换,相信她会发展得更好的。
widgEditor
widgEditor is an easily installed, easily customisable WYSIWYG editor for simple content. It replaces existing textareas with an improved editing pane using JavaScript, therefore if you don't have JavaScript (or your browser doesn't support HTML editing) it degrades gracefully. Try it out by typing below, and submit to see the processed output.
使用方法:
1、下载widgEidtor到本地(废话:-)),是一个zip包,解压到Web项目的目录下
2、在要用到这个编辑器的页面头部加入CSS和JavaScript的链接,例如:
<link href="/widgEditor/css/widgEditor.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" src="/widgEditor/scripts/widgEditor.js"></script>
3、给要转变成widgEditor的任意textarea标签加上 class="widgEditor" 的属性,例如:
<textarea rows="20" cols="55" name="content" class="widgEditor"></textarea>
4、已经可以用了,用浏览器打开相应页面看看
5、要配置显示风格,请编辑css/widgEditor.css文件,要定制功能,编辑scripts/widgEditor.js文件。建议把widgAutoClean设成true,这样编辑时可以得到很好的效果。编辑器里面的内容显示风格由css/widgContent.css控制,最好将它与页面的显示风格保持一致,实现真正的所见即所得
本文主题widgEditor,Editor,编辑器