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

富文本编辑器(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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
Python 实现随机数详解及实例代码
2017/04/15 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python中的for循环
2018/09/28 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
演讲稿祖国在我心中
2014/05/04 职场文书
中文专业求职信
2014/06/20 职场文书
个人向公司借款协议书
2014/10/09 职场文书
玄武湖导游词
2015/02/05 职场文书
内勤岗位职责
2015/02/10 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript