现在位置首页 / 前端开发 /正文

推荐基于bootstrap的富文本框-wangEditor

作者: IT小兵 | 2014年11月13日| 热度:℃ | 评论: |参与:

先来一张效果图:

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、加入更多的功能、支持更多浏览器,可能还有会面向商用的定制开发工作,到时候可以挣一点外块!哈哈,不过这是后话啦。


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询