代码改变世界

我的第一个开源作品:jUEditor - 基于jQuery的轻量级UBB可视化编辑器

2008-12-21 20:20  JimLiu  阅读(8283)  评论(54编辑  收藏  举报

  UBB代码是一种广泛用于论坛的代码格式,使用类似于[b]粗体[/b]的格式而不是使用(X)HTML标签,可以有效地进行tag安全性过滤,目前几乎所有的成熟论坛系统都支持UBB代码。

  由于要做论坛,需要用UBB编辑器,目前能找到的比较广泛的一个版本是Discuz!用的可视化UBB编辑器,其他基本上都是只能文本编辑的。由于Discuz! UBB编辑器的功能比较强,有些功能我用不上,而且那个版本用起来独立性相对比较弱,有很多全局变量。所以我便萌生了自己做一个的念头。

  UBB编辑器不同于一般的HTML编辑器,虽然都需要有在线可视化编辑的功能,但是一个的目标代码是(X)HTML,一个的目标是UBB代码。所以首先需要的是这二者的转换问题,我编写了ubbutils.js负责这方面的工作。另一方面就是它们的共同点——可视化编辑,参考了Discuz! UBB编辑器的代码和网上很多编辑器的代码下,我编写了editor.js来做编辑器功能性相关的内容。

  为了让程序的独立性更高,我极力避免全局变量的存在,使用prototype写法来实现JavaScript对OO的模拟,同时简化公开参数,使用增强textarea而不是独立载入的方法,是一种装饰者模式的应用,使得可以在原有的应用上扩展UBB可视化编辑功能。

  经过3~4天的编码总算让第一个非常简陋的版本可以使用了,经我自己测试在IE6/7、Firefox 3、Chrome 1.0下可以正常使用(IE6在用户体验上会欠缺一点)。

  截图预览

截图

  它最大的特点就是非常简洁和小巧——首先是简洁:可以通过一句javascript完成对textarea的扩展。其次是小巧:除了jquery.js,源文件只有不到30k,压缩后仅仅不到20k,如果经过了gzip就是个位数了。如果应用中本身采用了jQuery就很划算了。

  这个编辑器是完全开源和免费的——真的是免费!没有任何License的限制!(不要骂我没知识产权意识- -),需要的朋友可以自由下载使用,压缩包内包含src(源文件)、build(使用YUI Compressor压缩后的文件)、demo和jquery.js 1.2.6。有兴趣的朋友也可以阅读src一起探讨。

  下载链接

  希望用了的朋友能多多向我反映其中的BUG,毕竟一人之力嘛,呵呵!

  与诸君共勉。