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

富文本编辑器(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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue实现移动端图片上传功能
Dec 23 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学习 运算符与运算符优先级
2008/06/15 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Python实现单词拼写检查
2015/04/25 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
财务经理岗位职责
2013/11/09 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
python获取带有返回值的多线程
2022/05/02 Python