前端有哪些常用的富文本编辑器

绝地灬酷狼 2024-03-24 14:52 21阅读 0赞

### 前言 ###

> 富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。
> 
> 作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开发上讲，每个富文本编辑器的用法都是有区别的。
> 
> 下面是我收集的一些业界比较受欢迎的富文本编辑器，喜欢的朋友、用过的朋友可以一起看看，一起探讨。

### 正文 ###

**1、TinyMCE**

TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。

而且这么好的东西还是开源免费的，目前一直有人维护，这款编辑器使用的人非常多。

更多介绍及下载：[/link?link=https://www.tiny.cloud/docs/demo/full-featured/][link_link_https_www.tiny.cloud_docs_demo_full-featured]

**2、CKEditor**  
　Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。

Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

更多介绍及下载：[/link?link=https://ckeditor.com/][link_link_https_ckeditor.com]

**3、UEditor**  
　UEditor 是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。

16年之后百度没有怎么更新了，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版），大家可以根据自己使用环境选择不同的版本。

更多介绍及下载：[/link?link=http://ueditor.baidu.com/website/][link_link_http_ueditor.baidu.com_website]

**4、wangEditor**  
　wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。

更多介绍及下载：[/link?link=http://www.wangeditor.com/][link_link_http_www.wangeditor.com]

**5、kindeditor**  
　KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。

更多介绍及下载：[/link?link=http://kindeditor.net/demo.php][link_link_http_kindeditor.net_demo.php]

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

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

更多介绍及下载：[/link?link=https://simditor.tower.im/][link_link_https_simditor.tower.im]

**7、bootstrap-wysiwyg**

bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器，界面简洁大方。使用需要先引入bootstrap。

个人觉得bootstrap-wysiwyg这一长串像乱码一样的名字影响了它的推广和使用~ ~毕竟轻型使用环境还是很多的。

更多介绍及下载：[/link?link=http://mindmup.github.io/bootstrap-wysiwyg/][link_link_http_mindmup.github.io_bootstrap-wysiwyg]

**8、summernote**  
　summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。

summernote同样依赖于jquery和bootstrap，使用前先引入这两项。

更多介绍及下载：[/link?link=https://summernote.org/][link_link_https_summernote.org]

**9、Froala**  
　Froala是一款功能丰富的富文本编辑器，界面分类清晰，容易集成，容易升级，支持主流浏览器，具有行内编辑功能。Froala代码示例很多，可以集成在很多js框架里如React.js，Aurelia，Angular，Ionic，Django等。插件很多，易于扩充功能。

Froala是收费的，不过前端是开源的，如果要使用后台是要交费的（如果你使用国人强大的crack技能那就是另外一回事了~ ~）。目前有三个定价方式：基础版（239美元）、专业版（1199美元）和企业版（1999美元）。

更多介绍及下载：[/link?link=https://www.froala.com/wysiwyg-editor][link_link_https_www.froala.com_wysiwyg-editor]

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

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

更多介绍及下载：[/link?link=https://quilljs.com/][link_link_https_quilljs.com]

**11、FreeTextBox**  
　FreeTextBox功能强大，前端支持主流浏览器，但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制，运行速度一般。FreeTextBox分为免费版和pro收费版，一般情况免费版本功能已经足够用了。

更多介绍及下载：[/link?link=http://freetextbox.com/][link_link_http_freetextbox.com]

**12、dhtmlxEditor**

DHTMLX组件是一整套基于JS的UI库，功能强大，其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular，React和Vue.js框架中，该编辑器还同时支持Markdown和富文本。

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

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

更多介绍及下载：[/link?link=https://dhtmlx.com/docs/products/dhtmlxRichText/][link_link_https_dhtmlx.com_docs_products_dhtmlxRichText]

**13、eWebEditor**

eWebEditor外观和使用风格都和微软 Word很类似，功能很多。工具条可以定制，运行速度很快。导入文件接口很多，支持word、excel、pdf、ppt直接导入，目前版本不支持代码高亮，不适合纯技术平台使用，适合内容编辑人员使用。

eWebEditor有很长的历史了，是典型的传统富文本编辑器，不论是界面，还是功能都比较传统。

eWebEditor是收费的，但也有免费的精简版，精简版没有后台功能。

更多介绍及下载：[/link?link=http://www.ewebeditor.net/demo/][link_link_http_www.ewebeditor.net_demo]

### 最后 ###

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

[link_link_https_www.tiny.cloud_docs_demo_full-featured]: https://www.swvq.com/link?link=https://www.tiny.cloud/docs/demo/full-featured/
[link_link_https_ckeditor.com]: https://www.swvq.com/link?link=https://ckeditor.com/
[link_link_http_ueditor.baidu.com_website]: https://www.swvq.com/link?link=http://ueditor.baidu.com/website/
[link_link_http_www.wangeditor.com]: https://www.swvq.com/link?link=http://www.wangeditor.com/
[link_link_http_kindeditor.net_demo.php]: https://www.swvq.com/link?link=http://kindeditor.net/demo.php
[link_link_https_simditor.tower.im]: https://www.swvq.com/link?link=https://simditor.tower.im/
[link_link_http_mindmup.github.io_bootstrap-wysiwyg]: https://www.swvq.com/link?link=http://mindmup.github.io/bootstrap-wysiwyg/
[link_link_https_summernote.org]: https://www.swvq.com/link?link=https://summernote.org/
[link_link_https_www.froala.com_wysiwyg-editor]: https://www.swvq.com/link?link=https://www.froala.com/wysiwyg-editor
[link_link_https_quilljs.com]: https://www.swvq.com/link?link=https://quilljs.com/
[link_link_http_freetextbox.com]: https://www.swvq.com/link?link=http://freetextbox.com/
[link_link_https_dhtmlx.com_docs_products_dhtmlxRichText]: https://www.swvq.com/link?link=https://dhtmlx.com/docs/products/dhtmlxRichText/
[link_link_http_www.ewebeditor.net_demo]: https://www.swvq.com/link?link=http://www.ewebeditor.net/demo/