可视化HTML富文本编辑器有哪些?哪个好用?

最近在开发一个程序员内部专用的交流平台,需要用上网站编辑器,真的是换了又换,甲方各种不满意。最终,查了相关的资料,得到如下的内容,将分享给大家。

 

一、可视化HTML富文本编辑器有哪些?

最常用的可视化HTML富文本编辑器有:

TinyMCE

UEditor

Kindeditor

Simditor

CKEditor

wangEditor

Suneditor

froala

......等等。

 

二、可视化HTML富文本编辑器哪个好用?

我只能以我做的这个项目为例子,从而说明哪个更适合我?好用我不敢多说,毕竟每个编辑器都有各自的优点,主要是:是否适合你?

我的项目甲方要求富文本编辑器功能除了常用的功能外,例如:标题、字体、大小、颜色、对齐、加粗等等,至少还包括:

1、图片上传“单张/多张”,最好能Ajax图片上传。

2、表格直接选中就能生成,不需要输入几行几列,说用户体验不好。

3、编辑器插入的图片能旋转,能裁剪,能正比缩小,最好图片四个角度都可以正比缩小。

4、能查看编辑器内容的源代码,毕竟是程序员专用的交流社区。

5、能插入PHP、Java、Python等等编程语言代码,最好编辑器内也能高亮显示。

6、编辑器要拥有临时的自动保存功能。

7、编辑器要显示统计字数。

 

1、Simditor

Simditor 是团队协作工具 Tower 使用的富文本编辑器。相比传统的编辑器它的特点是:

  • 功能精简,加载快速
  • 输出格式化的标准 HTML
  • 每一个功能都有非常优秀的使用体验

 

官方网址:https://simditor.tower.im/

 

效果演示:

Simditor使用效果

 

2、CKEditor

CKEditor 是新一代的 FCKeditor,是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

可配合使用的扩展有文件管理器CKFinder

CKEditor分为:CKEditor4 与 CKEditor5,最适合我要求的只有CKEditor4

 

官方网址:https://ckeditor.com/

 

效果演示:

Ckeditor4自动保存与字数统计

 

3、TinyMCE

TinyMCE是一个轻量级的,基于浏览器的,所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成。功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持AJAX。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是 PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。

 

官方网址:https://www.tiny.cloud/

 

经过综合考虑,我由Simditor、CKEditor、TinyMCE,最终我选择了TinyMCE编辑器。

 

效果演示:

TinyMC编辑器效果

 

4、UEditor

UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器,具有轻量、可定制、注重用户体验等特点。主要特点:

轻量级:代码精简,加载迅速。

注意:

后端代码只是 demo,有太多安全漏洞,为了避免误用,将不再提供维护。

这款编辑器还是我N年前刚踏入编程行业做项目的时候比较喜欢使用百度编辑器,有好几个项目都是用的它,后来就再没用过它了,今天才发现百度编辑器都已经没人维护了,看来百度已经放弃此项目了。

 

网址:https://github.com/fex-team/ueditor

 

效果演示:UEditor百度编辑器

 

注意:

后面这几个编辑器我没有亲自体验过,只是在我选择用哪个编辑器的时候?有一定的深入了解。

 

5、Kindeditor

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。主要特点

快速:体积小,加载速度快

开源:开放源代码,高水平,高品质

底层:内置自定义 DOM 类库,精确操作 DOM

扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

 

官方网址:http://kindeditor.net/demo.php

 

效果演示:

Kindeditor

 

6、wangEditor

wangEditor 是一款基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。

兼容常见的 PC 浏览器:Chrome,Firefox,Safar,Edge,QQ 浏览器,IE11。

不支持移动端。

 

官方网址:https://www.wangeditor.com/

 

效果演示:wangEditor

 

7、Suneditor

Suneditor是基于纯JavaScript,没有依赖性。Suneditor是一种轻便,灵活,可自定义的所见即所得(WYSIWYG)文本编辑器,适用于您的Web应用程序。

  • 从Microsoft Word和Excel粘贴。
  • 自定义表选择,合并和拆分。
  • 媒体嵌入,图像上传。
  • 可以使用CodeMirror,KaTeX。

 

官方网址:http://suneditor.com/sample/index.html

 

效果演示:Suneditor

 

8、froala

Froala是一款Web编辑软件,可提供更好的开发人员和用户体验,从而实现快速开发。 我们的HTML编辑器是提供精美内容的基础。

Froala编辑器是用Javascript编写的轻型WYSIWYG HTML编辑器,可为您的应用程序提供丰富的文本编辑功能。

 

官方网址:https://froala.com/

 

效果演示:

froala编辑器

 

总结:

其实,没有所谓的哪款编辑器最好?我也用过不少的编辑器,截止目前为止,我还没有看到有一款十全十美的编辑器,只能说最适合就可以了,跟男人找老婆是一样的道理。

    A+
发布日期:2021年04月29日 11:56:17  所属分类:HTML
最后更新时间:2021-04-29 11:58:27
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
JAVA从入门到精通视频教程(实战)
  • ¥ 99.0元
  • 市场价:99.0元
Node.js视频教程:node.js全栈开发之路
  • ¥ 45.0元
  • 市场价:45.0元
Sublime Text3使用视频教程:神级代码编辑工具
  • ¥ 15.0元
  • 市场价:15.0元
Swoole从入门到精通(第一季)
  • ¥ 199.0元
  • 市场价:199.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: