几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

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

Posted in Javascript onMarch 17, 2021

作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

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

 

1、TinyMCE

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

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

更多介绍及下载:https://www.tiny.cloud/docs/demo/full-featured/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

2、CKEditor

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

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

更多介绍及下载:https://ckeditor.com/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

3、UEditor

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

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

更多介绍及下载:http://ueditor.baidu.com/website/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

4、wangEditor

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

更多介绍及下载:http://www.wangeditor.com/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

5、kindeditor

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

更多介绍及下载:http://kindeditor.net/demo.php

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

6、simditor

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

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

更多介绍及下载:https://simditor.tower.im/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

7、bootstrap-wysiwyg

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

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

更多介绍及下载:http://mindmup.github.io/bootstrap-wysiwyg/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

8、summernote

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

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

更多介绍及下载:https://summernote.org/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

9、Froala

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

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

更多介绍及下载:https://www.froala.com/wysiwyg-editor

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

10、Quill

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

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

更多介绍及下载:https://quilljs.com/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

11、FreeTextBox

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

更多介绍及下载:http://freetextbox.com/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

12、dhtmlxEditor

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

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

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

更多介绍及下载:https://dhtmlx.com/docs/products/dhtmlxRichText/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

13、eWebEditor

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

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

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

更多介绍及下载:http://www.ewebeditor.net/demo/

 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍

 

最后

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

Javascript 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
React服务端渲染原理解析与实践
Mar 04 #Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 #Vue.js
vue3.0 项目搭建和使用流程
Mar 04 #Vue.js
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
初识PHP
2014/09/28 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Vue中CSS动画原理的实现
2019/02/13 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python内存管理分析
2015/04/08 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
日语求职信范文
2013/12/17 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年市场部工作总结
2014/11/25 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书