富文本编辑器汇总

        富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。

      它的原理其实很简单,就是设置 document 的 designMode 属性为 on 后,再通过执行 document.execCommand ('commane mand Name'[, UIFlag[, value]]) 即可。commandName 和 value 可以在MSDN 上和MDC 上找到,它们就是我们创建各种格式的命令,比方说,我们要加粗字体,执行 document.execCom mand('bold', false) 即可。通常是选中了文本后才执行命令,被选中的文本才被格式化。对于未选中的文本进行这个命令,各浏览器有不同的处理方式,比方 IE 可能是对位于光标中的标签内容进行格式化,而其它浏览器不做任何处理,这超出本文的内容,不细述。同时需要注意的是,UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName中才有。为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素,然后对这个 iframe 内的 document(通过 iframe.contentWindow.document 获得)进行操作。

       下面是几款常见的富文本编辑器的介绍:

1、wangEditor

      优点:基于javascript和css开发的 Web富文本编辑器,轻量、简洁、易用、开源免费,中文文档齐全,样式可自定义,菜单栏可以自定义配置。设计的UI漂亮,插件基本能满足需求。源码注释很详细,感兴趣的可以参考源码。

                 与国产编辑器 百度ueditor 和 kindeditor 相比,它轻量、易用、UI设计精致漂亮。 国外编辑器 bootstrap-wysiwyg 和 simditor 相比,它文档易读、交流方便,更接地气。它还会根据使用者的反馈不断完善,未来将支持移动版。 支持IE6+浏览器。 

        缺点:没有强大的后台,案例不是很多,文档中说明了“从编辑器中获取的 html 代码是不包含任何样式的纯 html”,就是说需要自己编写样式。

        官网地址:wangEditor - 轻量级web富文本编辑器

2、UEditor

         优点:由百度web前端研发部开发,开源基于MIT协议,支持商业和非商业用户的免费使用和任意修改,具有轻量,可定制,注重用户体验,插件多等特点。它的功能是非常全面、非常强大的,不仅包含丰富的文本样式编辑,还有强大的表格编辑功能,插入功能,而且接入十分简单。

         缺点:比较庞大,对于网页的加载来说,会相对影响速度 ,界面不太美观。并且现在不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办。

         官网地址:UEditorMINI

3、KindEditor

       优点: 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。文档齐全,界面类似百度UEditor。

       缺点:存在图片上传问题,如果上传历史过多,会全部加载,导致浏览器卡,反应慢 。界面不太美观,还是老式的传统图标。

        官网地址:在线HTML编辑器

4、bootstrap-wysiwyg

          优点:外观简洁大方,使用方便,支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性,没有强制规定的样式。

          缺点:没有表情包 , 没有开发文档不便于阅读使用,无字体变色,无视频上传功能 。需要一定的浏览器支持,毕竟需要bootstrap。

           官网地址:微型、开源的Bootstrap所见即所得(WYSIWYG)富文本编辑器 -- 由MindMup贡献

5、simditor

          优点:样式比较清新好看,插件不多,基本满足需求,github上面开源,维护较好。

           缺点:英文文档,如果英文水平不好的话,使用较为吃力。

            官网地址:Simditor

6、CKEditor

       优点:国外开源,功能强大,使用较多,编辑能力极强,基本和word差不多了。看起来界面极其优秀的一款。它有行内编辑功能,编辑内容更加直观,仿佛是在编辑网页一样。

        缺点:网站访问速度一般,文档英文,需要花时间开发,没有字体变色和视频上传功能,需要另外配置。

        官网地址:CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor

7、tinymce

      优点:支持图片在线处理,插件多,功能强,编辑能力优秀,界面好看。

     缺点:同样文档为英文,开发需要花时间,少了字体颜色的设置,代码高亮也不甚理想

     官网地址:The Most Advanced WYSIWYG HTML Editor | TinyMCE

8、Froala

       一个JavaScript WYSIWYG编辑器,主要特点是能轻松地与主流开发框架进行集成。目前,可以将Froala与React.js,Aurelia,Angular,Ionic,Django和其他框架一起使用。

       易于添加新功能。大量易于使用的插件(其中有30多个)无需进行复杂的操作便可添加新功能。 该编辑器具有编写良好的代码,并具有结构化和文档化的特点,非常易于理解、维护和扩展。

9、Textbox.io

        一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外,该工具还实现了屏幕阅读器等辅助技术,并符合WAI-ARIA可访问性标准。

         移动设备支持用户使用适合移动设备的用户界面,从相机或图库上传图像,使用Siri或Cortana处理文本等。可以通过应用标准和自定义类或样式来更改Textbox.io的外观。

       Textbox.io支持与ASP.NET,Knockout,XPage和Angular的集成。

10、DHTMLX富文本编辑器

         一个完全可自定义的JavaScript文本编辑器,支持HTML和Markdown以及纯文本作为输入和输出格式。在Angular,React和Vue.js项目中可以使用此文本编辑器进行集成。

        使用基于DHTMLX富文本编辑器的在线应用程序的用户可以在简洁的经典模式和文档模式之间切换。全屏模式对于使用小屏幕设备的用户非常有用。这种文本编辑器具有完全可自定义的外观,使得用户可以创造独一无二的外观和感觉。,通过使用任何所需的图标、字体或颜色,你可以开发具有识别度的设计。此外,还可以更改可用控件的性能,并根据需要添加自己的控件。

        还有一些有用的功能,如计算单词、字符和其他自定义元素的数量。DHTMLX富文本编辑器支持块引用、链接以及所有必要的格式和编辑功能。

11、 Imperavi Redactor

         一个基于Web的文本编辑器,提供流畅、干净的设计,具有可扩展性和无限的灵活性,其高效的API和惊人的用户体验更是别具特色。其模块化架构允许使用者快速扩展应用程序的功能。清晰的代码和简洁的UI为开发人员和用户创造了极好的体验。

         目前,这款编辑器拥有22个插件来完成常规工作。此外,使用者还可以轻松地创建自己的插件。没有必要作为技术专家来安装和配置这个文本编辑器。在这个编辑器内文档很好写且不会造成任何麻烦。

12、Syncfusion富文本编辑器

        一个轻量级JavaScript工具,支持HTML和Markdown。可以使用它来创建Web和移动应用程序,如博客编辑器、信使、在线论坛等。内联模式使内联编辑器在用户单击可编辑区域中的内容后显示。

        工具栏配置有很多可选性。例如,可以根据项目的要求向应用添加多行工具栏、展开工具栏、快速工具栏或浮动工具栏。此外,还可以根据类别配置工具栏按钮和组命令。用户可以在文本中插入图像和超链接。并且,可以插入HTML表格来简化财务数据的工作。所有功能都可以动态操作。

        在撰写本文时,Syncfusion富文本编辑器提供了与Angular、React和Vue.js的集成。库的列表所展示的内容不是很多,但它包含了最受欢迎的选项,这是一个加分项。

13、Quill

        代码高亮是最完美的,因为它本身就支持了hignlight.js,同样支持行内编辑模式,可自定义。不限制框架,但是需要定制,理念很先进。

     打个广告,本人博客地址是:风吟个人博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容