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

富文本编辑器(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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP动态图像的创建
2006/10/09 PHP
php实现网站插件机制的方法
2009/11/10 PHP
写出高质量的PHP程序
2012/02/04 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
php 数组元素快速去重
2017/05/05 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
jQuery实现的form转json经典示例
2017/10/10 jQuery
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
Python 异常处理的实例详解
2017/09/11 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
入党自我评价范文
2014/02/02 职场文书
青春演讲稿范文
2014/05/08 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang