首页 > 代码库 > 基于bootstrap的富文本框——wangEditor【欢迎加入开发】

基于bootstrap的富文本框——wangEditor【欢迎加入开发】

 先来一张效果图:

01. 引言

老早就开始研究富文本框的东西,在写完《深入理解javascript原型与闭包》之后,就想着要去做一个富文本框的插件的例子。

现在网络上开源的富文本框插件非常多,一搜索一大堆,但是基于bootstrap的还不多,现在只有一个“bootstrap-wysiwyg”,老外写的,没有一个汉字,大家可以fork一下源码看看,写的非常简洁,压缩之后不到10KB,非常厉害!我也还没来得及研究,一定要看一下。

02. wangEditor

老外的东西,满地英文,给程序猿用着还可以,但是做到页面上让网民、用户去使用,这就太惨无人道了。于是乎我自己做了一个基于bootstrap的富文本编辑器——wangEditor。现已开源,大家可以去【https://github.com/wangfupeng1988/wangEditor/】fork源码

现在只是一个简单的测试版,如果大家用着有啥问题,可以直接给我留言或者给我发邮件(wangfupeng1988#(#->@)163.com),在此感谢先!

03. 简单易用,两步搞定

wangEditor的应用非常简单,两步搞定!且看以下代码:

<div id="divEditor"></div><textarea id="txtCode" rows="5" cols="50" style="width:100%"></textarea><script src="javascript/wangEditor-1.0.0.js" type="text/javascript"></script><script type="text/javascript">        $(function () {            $(#divEditor).wangEditor({                codeTargetId: txtCode,              //将源码存储到txtCode                frameHeight: 300px,                 //默认值为“300px”                initWords: 欢迎使用!请输入文字...,  //默认值为“请输入...”                showInfo: true                        //是否显示“关于”菜单,默认显示            });        });</script>

定义一个div、一个textarea,然后执行$(‘#divEditor‘).wangEditor({...})即可。

由于wangEditor是基于bootstrap和jquery,所以要引用相应的文件。(其中,font-awesome.min.css是bootstrap的图标库,里面包含丰富的图标,不了解的搜一下,非常简单)

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet" /><script src="javascript/jquery-1.10.2.min.js" type="text/javascript"></script><script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

就这两步,页面中就可以呈现出wangEditor编辑界面。编辑内容的源代码在textarea中,通过js获取即可。

04. 如何应对低版本浏览器?

众所周知,bootstrap是不支持IE低版本浏览器的,但是万一遇到低版本浏览器该怎么办?我的原则就是四个字——至少能用

于是我相处一个比较巧妙的解决方案:针对IE8以下浏览器,部提供富文本编辑功能,只显示一个输入框,并且给出提示。如图:

虽然bootstrap不支持IE8以下浏览器,但是我也不能让用户看到乱码、无法操作。我给用户呈现什么,用户就一定能操作什么

05. 继续升级

我会继续为wangEditor升级。第一,我会参考bootstrap-wysiwyg优化、精简代码;第二,我想加入一个代码编辑器的功能

其实现在我已经做了一部分工作——代码格式化、以及代码高亮,还没有来得及整合到wangEditor中。

虽然js富文本框有很多,但是带有代码编辑、显示功能的却没大有,反正我是没找到。所以,这个功能加进去之后,应该还可以算作一个特色。

06. 欢迎加入!

如果你也有兴趣和我共同开发、升级、维护这一款wangEditor编辑器,不妨联系我(发站内消息即可)一起合作开发,可以通过github来协同工作。

其实接下来的工作还有很多,例如排查BUG、加入更多的功能、支持更多浏览器,可能还有会面向商用的定制开发工作,到时候可以挣一点外块!哈哈,不过这是后话啦。

最后,推荐大家用“Github for windows”来管理自己的源代码,最简单的方式使用git,免去了繁冗的命令操作,很赞!

-------------------------------------------------------------------------------------------------------------

欢迎关注我的微博。

也欢迎关注我的教程:

《从设计到模式》深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

-------------------------------------------------------------------------------------------------------------

 

基于bootstrap的富文本框——wangEditor【欢迎加入开发】