NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • Web技术

  • Git笔记

  • Linux文档

  • Markdown

  • Nginx文档

  • Npm笔记

  • 技术文档

    • axios携带cookie
    • Echarts自定义提示框tooltip样式(包括提示框标题不固定)
    • gitee 仓库初始化
    • GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
    • GitHub Actions 定时运行代码:每天定时百度链接推送
    • GitHub Actions 实现自动部署静态博客
    • GitHub加速下载项目的方法
    • GitHub高级搜索技巧
    • js以当前时间为基础,便捷获取时间(最近2天,最近1周,最近2周,最近1月,最近2月,最近半年,最近一年,本周,本月,本年)
    • JupyterLab二次开发环境配置以及踩的一些坑(笔记)
    • linux 虚拟机 ping 域名时,提示“未知的名称或服务原因分析“
    • Node.js中间件 - Multer详解
    • node.js使用supervisor或nodemon进行调试热更新
    • NodeJs的压缩文件之 - 模块 archiver 用法示例
    • Pdf数据解析
    • sh文件出现错误:Permission denied解决办法
    • vscode命令行以管理员身份运行
    • webpack 的简单使用
    • Web前端Vue离线存储之 - localForage.js使用方法
    • windows 多版本管理工具 nvm-windows
    • windows 如何配置 pip 镜像
    • WX小程序开发总结
    • Xshell 6 提示 “要继续使用此程序,您必须应用最新的更新或使用新版本”
    • yaml语言教程
    • 使用 SwitchHost 修改 host 文件为 GitHub 提速
    • 使用Gitalk实现静态博客无后台评论系统
    • 几款主流好用的富文本编辑器
      • 1、TinyMCE
      • 2、CKEditor
      • 3、UEditor
      • 4、wangEditor
      • 5、kindeditor
      • 6、simditor
      • 7、bootstrap-wysiwyg
      • 8、summernote
      • 9、Froala
      • 10、Quill
      • 11、FreeTextBox
      • 12、dhtmlxEditor
      • 13、eWebEditor
    • 如何使用 babel 对es6语法进行转码
    • 如何使用 github pages 搭建你的个人站点
    • 如何使用openvscode-server搭建一个vscode代码编辑器
    • 如何配置 GitHub 页面的发布源
    • 如何配置GitHub登录账号密码,进行免密push仓库文件
    • 解决GitHub提交代码成功后并不显示绿格子问题
    • 解决百度无法收录搭建在GitHub上的个人博客的问题
    • VuePress 配置 MarkDown 文件目录.md
    • GitHub无法打开或加载慢的解决方法
    • win10 通过修改 hosts 提升github访问速度
    • Echarts实现自适应
    • gulp项目中ReferenceError_ primordials is not defined报错解决方法
    • 使用libreoffice将word转化成pdf
    • onlyoffice+vue实现在线预览在线编辑
    • Stable-Diffusion-WebUI 搭建使用教程
    • wind10通过安装nvm切换node版本
    • 解决虚拟机中ip地址总是自动变化办法
    • Git配置之邮箱设置
    • Echarts重写tooltip(提示框)代码
    • 使用 frp 实现内网穿透
    • win10 开机自启动 frp 实现内网穿透
    • Express 与 vue3 使用 sse(event-stream)实现消息推送并使用 nginx 转发
    • Linux 中使用 rsync 同步文件目录教程
    • Gitea数据备份与还原
  • 其他文档

  • 前端开发
  • 技术文档
NoteZ
2022-06-06
目录

几款主流好用的富文本编辑器

富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

# 1、TinyMCE

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

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

官方地址:https://www.tiny.cloud/docs/demo/full-featured/ (opens new window)

1642556785870-20220119094600.png

# 2、CKEditor

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

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

官方地址:https://ckeditor.com (opens new window)

1642556965567-20220119094600.png

# 3、UEditor

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

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

官方地址:http://ueditor.baidu.com/website/ (opens new window)

1642557829573-67.png

# 4、wangEditor

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

官方地址:https://www.wangeditor.com/ (opens new window)

1642558066233-9100652.png

# 5、kindeditor

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

官方地址:http://kindeditor.net/demo.php (opens new window)

1642558158238-0854.png

# 6、simditor

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

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

官方地址:https://simditor.tower.im/ (opens new window)

1642558645903-1709.png

# 7、bootstrap-wysiwyg

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

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

官方地址:http://mindmup.github.io/bootstrap-wysiwyg/ (opens new window)

1642559101925-442.png

# 8、summernote

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

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

官方地址:https://summernote.org/ (opens new window)

1642559242579-02659.png

# 9、Froala

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

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

官方地址:https://froala.com/wysiwyg-editor (opens new window)

1642559351239-52.png

# 10、Quill

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

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

官方地址:https://quilljs.com/ (opens new window)

1642559624391-9103328.png

# 11、FreeTextBox

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

官方地址:http://freetextbox.com/ (opens new window)

1642559733649-103509.png

# 12、dhtmlxEditor

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

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

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

官方地址:https://dhtmlx.com/ (opens new window)

1642559831168-650.png

# 13、eWebEditor

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

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

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

官方地址:http://www.ewebeditor.net/ (opens new window)

1642559978670-9103922.png

#富文本
上次更新: 2024/01/30, 00:35:17
使用Gitalk实现静态博客无后台评论系统
如何使用 babel 对es6语法进行转码

← 使用Gitalk实现静态博客无后台评论系统 如何使用 babel 对es6语法进行转码→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式