55

14款web前端常用的富文本编辑器插件

 3 years ago
source link: https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&%3Bmid=2649830830&%3Bidx=1&%3Bsn=2dec08844802bea0a0040a629107fa05
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

qyYfmij.gif!mobile

富文本编辑器是一种可内嵌于 浏览器 ,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂 html 用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

作为一个 技术 人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。

到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

下面是我收集的一些业界比较受欢迎的富文本编辑器,喜欢的朋友、用过的朋友可以一起看看,一起探讨。

1、wangEditor

网址: http://www.wangeditor.com/

基于 JavaScript css 开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。

2、TinyMCE

网址: https://www.tiny.cloud/docs/demo/full-featured/

TinyMCE是一个轻量级的基于 浏览器 的所见即所得编辑器,由 JavaScript 写成。它对IE6+和Firefox1.5+都有着非常良好的支持。

功能齐全,界面美观,就是文档是英文的,对开发人员英文水平有一定要求。

3、百度ueditor

网址: https://github.com/fex-team/ueditor

UEditor是由百度web 前端 研发部开发所见即所得富文本web编辑器,具有轻量,功能齐全,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改 代码 ,缺点是已经没有更新了。

4、kindeditor

网址: http://kindeditor.net/demo.php

KindEditor 是一套开源的在线 html 编辑器,主要用于让用户在 网站 上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、 php 、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。  

5、Textbox

网址: https://www.textbox.io/

Textbox是一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。

此外,该 工具 还实现了屏幕阅读器等辅助 技术 ,并符合WAI-ARIA可访问性标准。

6、CKEditor

网址: https://ckeditor.com/ckeditor-5/demo/

CKEditor官方版是一款专业专业的在线文字编辑器,软件支持各种不同的浏览器,可以让用户们轻松在线编辑,CKEditor5官方版软件体积非常小巧,使用起来也十分方便快捷,还能与不同的编程语言相结合,是大家编辑网页 代码 的必备 工具

7、quill

网址: https://quilljs.com/

Quill是轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。

开源免费,项目活跃,一直有人维护。

8、simditor

网址: https://simditor.tower.im/

simditor是Tower平台使用的富文本编辑器,是一款轻量化的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。

虽然是国内出品,但文档是英文的。开源免费。

9、summernote

网址: https://summernote.org/

summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。

summernote开源免费,该项目一直比较活跃,一直都有人在维护。summernote同样依赖于jquery和bootstrap,使用前先引入这两项。

10、jodit

网址: https://xdsoft.net/jodit/

Jodit是一款使用纯TypeScript编写的(无需使用其他库),美观实用的所见即所得(WYSIWYG)开源富文本编辑器,支持中文,超强自定义。  

11、Editor.md

网址: https://pandao.github.io/editor.md/

功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费。

12、froala Editor

网址: https://www.froala.com/wysiwyg-editor

界面非常好看,功能非常强大,非常好用(非免费,可破解)

13、eWebEditor

网址: http://www.ewebeditor.net/

eWebEditor外观和使用风格都和微软 Word很类似,功能很多。工具条可以定制,运行速度很快。

导入文件接口很多,支持word、excel、pdf、ppt直接导入,目前版本不支持代码高亮,不适合纯技术平台使用,适合内容编辑人员使用。

eWebEditor有很长的历史了,是典型的传统富文本编辑器,不论是界面,还是功能都比较传统。eWebEditor是收费的,但也有免费的精简版,精简版没有后台功能。

14、dhtmlxEditor

网址: https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX组件是一整套基于 js 的UI库,功能强大,其中包含编辑器dhtmlxEditor。

该编辑器可以直接集成到Angular, react vue . js 框架 中,该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图,支持全屏幕,工具支持自定义,包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版,免费版具有绝大多数功能,而且免费版是开源的你可以在代码级别随便扩充。

最后

富文本编辑器产品真的非常多,以上只是本人接触过的一些,相信还有很多很好的富文本存在,其实也没必要全都试一遍,只有最适合自己的,才是最好的。

最后

  • 欢迎加我微信(winty230),拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

i2E7RrU.png!mobile

点个 在看 支持我吧

URNVfq.gif!mobile

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK