重构wangEditor(web富文本编辑器),欢迎指正!

1. 前言

(下载源码、使用说明、demo,请参见:https://github.com/wangfupeng1988/wangEditor

前段时间做过一个基于bootstrap的富文本编辑器——wangEditor,并发布到github上(https://github.com/wangfupeng1988/wangEditor),在博客园写了篇文章(http://www.cnblogs.com/wangfupeng1988/p/4088229.html)也受到了不少关注。

之所以有这次重构,是因以下原因。

  • 第一,bootstrap。做一个小小的web富文本编辑器,就依赖于bootstrap,未免有点小题大做。当时依赖于bootstrap是为了省去我绘制按钮、下拉框和弹出框的时间,有些偷懒。因此,本次重构弃用bootstrap。
  • 第二,浏览器限制。因为本身用了bootstrap,就只考虑了兼容bootstrap的浏览器,IE低版本浏览器就没有考虑,这是一个弊端。因此,本次重构,兼容所有浏览器。
  • 第三,有细心的朋友看了我的代码,对我提出了一些建议(虽然言辞上有些不大善意),他说“代码不够优雅”,其实我的理解就是扩展性差。因此,本次重构,充分考虑了扩展性。可允许用户自定义菜单。

不过,重构后的wangEditor依然很轻量化,一个十几KB的js文件,一个3KB的css文件,搞定!使用起来也非常简单。一行代码搞定:

//其实返回的 $editor 就是一个jquery对象,可以进行任何jquery的操作,例如 $editor.html() , $editor.text()
var $editor = $(‘#txtDiv‘).wangEditor();

2. 弃用bootstrap,自己开发样式和效果

弃用bootstrap后,不得不自己开发样式和效果。

第一,菜单的样式和排版其实非常简单,大家看到效果之后应该都明白。我这里依然采用给了fontawesome作为icon字体库,不明白的可以看看《请用fontAwesome代替网页icon小图标》。

第二,自己制作了一个tooltip的效果,即鼠标放在按钮上之后,弹出小框提示title,如图:

第三,属于下拉框类型的按钮,右侧会显示一个向下的箭头,如。点击之后,会弹出下拉框,blur(失去焦点)之后,下拉框隐藏。

第四,自己制作了弹出框效果,弹出框显示后,下方有遮罩层隐藏页面所有内容,不允许点击。

3. 兼容IE低版本浏览器

首先,非常感谢fontAwesome兼容了IE低版本浏览器,否则我就得再自己去绘制icon图标,那可就麻烦大了。

样式上和效果上兼容IE低版本应该没什么问题,大不了支持html5的可以显示圆角,IE低版本不显示圆角,这个影响不大,也不影响使用。

最主要的兼容在于,IE低版本实现“选择”和“范围”的技术,与W3C不一致,它有自己的一套逻辑。不了解这块的朋友,可以想想IE在事件处理上,无论是绑定事件还是event参数的处理,都和W3C不一样,很是讨厌!

为了实现兼容,就必须要全面考虑两者对“选择”和“范围”的不同实现方法,做浏览器兼容性测试,然后根据不同的情况,编写不同的代码。举个例子:

var supportRange = typeof document.createRange === ‘function‘;

if(supportRange){
            //w3c
            selection = document.getSelection();
            selection.removeAllRanges();
            selection.addRange(currentRange);
        }else{
            //IE8-
            range = document.selection.createRange();
            range.setEndPoint(‘EndToEnd‘, currentRange);
            if(currentRange.text.length === 0){
                range.collapse(false);
            }else{
                range.setEndPoint(‘StartToStart‘, currentRange);
            }
            range.select();
        }

看这段代码,你就能大体明白,两者的实现方式根本就不一样。

4. 考虑系统扩展性

我前半年看了不少设计模式的东西,也做过一个设计模式的教程《从设计到模式》,也研究过jquer的源码,对系统的“扩展性”还是有一定的了解的。重构之前的wangEditor,因为重点放在了实现富文本的功能上,而忽略了扩展性的问题。这一次重构,我彻底的考虑了一下。

其实对于富文本编辑器来说,最基本的扩展性应该考虑以下几点:

  • W3C和IE低版本的兼容性;
  • 菜单如何扩展,如何自定义排序、分组、显示/隐藏;
  • 命令(如加粗、字体颜色等)如何扩展,如何去弥补浏览器不完善的地方;
  • 基本配置(字体、颜色、字号)如何扩展;
  • ……

以上这些扩展性的问题,在本次重构中都考虑到了,并做了相应的实现。扩展性好的系统,会帮助开发人员以更清晰的思路升级、配置等。

5. 下一步……

下一步我想做几个例子,例如上传图片、插入高亮显示的code,来说明如何去使用wangEditor。

再下一步,我会把wangEditor的源码简单介绍一遍,介绍如何实现一个富文本框。

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

欢迎关注我的微博

也欢迎关注我的教程:

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

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

时间: 2024-10-22 07:22:11

重构wangEditor(web富文本编辑器),欢迎指正!的相关文章

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,

Web富文本编辑器---UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 大家可以点进去耍一耍 http://ueditor.baidu.com/website/onlinedemo.html 从官网上下载相关js文件,在页面初始化 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF

轻量级富文本编辑器wangEditor源码结构介绍

1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.com/wangEditor/demo.html 下载(github):https://github.com/wangfupeng1988/wangEditor QQ群:164999061 从我发布wangEditor到现在,大概有七八个月了,随着近期增加的插入视频,表情,地图这三个功能,目前为止基本

轻量级web富文本框——wangEditor——demo演示

wangEditor——轻量级web富文本编辑器——简单易用可扩展,支持所有PC浏览器.代码目前全部在github上开源. 下载地址:https://github.com/wangfupeng1988/wangEditor  (页面中有基本的使用说明) 交流QQ群:164999061 wangEditor demo 欢迎使用wangEditor,当前版本为v1.1.0 请输入内容... 查看html 查看text 隐藏 说明: 点击[查看html]按钮,可查看你编辑的内容的html代码: 点击[

轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能

1. 引言 上一节<轻量级web富文本框——wangEditor使用手册(1)——基本应用>中我们讲解了如何应用wangEditor创建最基本的富文本编辑器,本节继续讲如何扩展一个简单的按钮.本节是继续上一节的内容来的,所使用的代码也是接着上一节的来的,错过的朋友请先看上一节,再看本节. 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508

wangEditor——轻量级web富文本框

1. 介绍 wangEditor--轻量级web富文本编辑器,js+css 不足20kb.简单.易用.可扩展,支持所有PC浏览器(包括IE6). 目前所有代码都在github上开源,下载地址:https://github.com/wangfupeng1988/wangEditor 2. demo demo演示地址:http://www.cnblogs.com/wangfupeng1988/p/4198428.html#demo 3. 文档 3.1 基本应用(demo演示) 3.2 扩展一个"缩进

轻量级web富文本框——wangEditor使用手册(1)——基本应用

1. 介绍&下载 wangEditor是用javascript编写的轻量级web富文本编辑器,依赖于jQuery和fontAwesome字体库,支持所有浏览器.使用wangEditor可以轻松创建web富文本框,并可以自定义扩展菜单功能.wangEditor所有源码都已经在github上开源下载. 下载地址:https://github.com/wangfupeng1988/wangEditor 交流QQ群:164999061 2. 生成富文本框 2.1 下载 从https://github.c

富文本编辑器

1. https://github.com/xing/wysihtml5 2. https://github.com/neilj/Squire 3.可以试试这个wangEditor - 轻量级web富文本编辑器 生成表格还是会有一些样式,不过比百度的要少一些.以下是官方介绍: 与国产编辑器 百度ueditor和 kindeditor相比,它轻量.易用.UI设计精致漂亮. 与国外编辑器 bootstrap-wysiwyg和 simditor相比,它文档易读.交流方便,更接地气. 它还会根据使用者的

Java-Swing中实现富文本编辑器

问题介绍 使用Java-swing技术实现邮件发送功能.(为什么使用Java,因为我们组没学过C#) 邮件编辑使用富文本编辑器,用户可以自定义邮件格式. 支持上传图片. 支持附件发送. 内容支持名字的替换,显得像是单独给某个人发的一样. 功能图片展示 解决过程 开始看到这个需求,也没有什么想法感觉还好,于是百度.谷歌了一堆东西.首先百度Java swing的富文本编辑器组件,虽然确实找到了几个组件但是都是很老的版本,而且是一个独立的弹窗,样式也有点难看.问了一下学长的意见,说:“接受不了独立弹窗