位置: IT常识 - 正文

富文本编辑器介绍(富文本编辑器使用)

编辑:rootadmin
富文本编辑器介绍 1、富文本编辑器的意义

普通的文本框(如input, text)只能输入纯文本以及 Emoji(只不过是特殊编码的文本),如果只是简简单单写些纯文本的内容(比如表单,简单的评论等),这是一个非常不错的选择,但是如果需要让用户输入包括但不限于图片、视频、加粗文本等内容,这种方式就行不通了。这是时候就可以使用富文本编辑器来实现。

富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。功能强大的富文本编辑器可以实现文本编辑、格式设置、排版设置、媒体文件编辑上传、超链接、文本导出、打印等等功能。

2、富文本编辑器的分类

常见的富文本编辑器现实方式可以分成三类,分别是用textarea 、 contenteditable 和Canvas。

lTextarea

最早的编辑器实现,起始阶段,最简单的如多行文本,结构简单使用方便,一些文本格式和复杂的样式难以实现,推荐仅在对编辑要求不高的场景使用。

lContenteditable

HTML中的contentEditable的属性可以打开某些元素的可编辑状态( div, table ,p ,span ,body),将元素的contenteditable 属性设为 true时,该元素则成为了编辑器的主体。配合着 document.execCommand 能够实现绝大多数功能,当前主流编辑器都是基于 contenteditable 来设计的。

contentEditable使dom变得可编辑,那么execCommand则提供了从外部修改DOM的api。可以操作dom内容的变化。两者进行组合,即可实现一个最简单的富文本编辑器。

但是单纯依赖contenteditable 直接产出 html 会带来一些问题,例如相同的输入在不同浏览器下的输出可能不一致,相同的输出在不同浏览器中展示存在差异,同时 html 使用具有局限性,不方便在跨平台间使用。因此更好的方案是制定一套数据结构 + 文档模型,所有的输入都经过编辑器生成约定的产物,这样在不同的平台均可解析并且保证得到预期的效果。

lcontenteditable + Selection + Range

这种方式比上面的execCommand 好处就在可以不过度依赖浏览器的行为,使用 Selection 获取用户选区,使用 Range API 来操控选区(比如简单的加粗操作),不过用这种方式就需要你自己去处理各种选区情况了(比如节点内操作、跨节点操作等),

相较于上面的方式,开发难度提高。但是开发自由度也提升了。

lCanvas

这种方式差不多就是浏览器给你提供绘图能力和监听用户输入的能力,除此之外其他全部你自己实现。因为完全不使用contenteditable,也就完全摆脱了对浏览器行为的依赖。当时难度也就成倍增长。相当于在浏览器里面在开发一个浏览器了。

3、常用文本编辑器介绍和比较

UEditor

适用浏览器:IE6+、FireFox、Chrome...

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。UEditor 在设计上采用了经典的分层架构设计理念,尽量做到功能层次之间的轻度耦合。具体来讲,整个系统分为了核心层、命令插件层和UI层这样三个低耦合的层次。

1、核心层提供了编辑器底层的一些方法和概念

2、在核心层之上覆盖的是命令插件层。之所以叫命令插件层,是因为UEditor中所有的功能型实现都是通过这一层中的命令和插件来完成的,并且各个命令和插件之间基本互不耦合

3、在命令插件层之上则是UI层。UEditor的UI设计与核心层和命令插件层几乎完全解耦,简单的几个配置就可以为编辑器在界面上添加额外的UI元素和功能。

优点:

1、体积小巧,性能优良,使用简单、开源免费

2、功能比较全面,插件很多,还可以很方便插入百度地图,接入十分简单

3、支持中文文档

4、界面美观

缺点:

1、2016年后,百度基本已经很少对编辑器和文档的维护更新。

2、虽然支持中文文档,但是内容少,可查询资料少。

3、图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码

中文文档:http://fex.baidu.com/ueditor/

GitHub: https://github.com/fex-team/ueditor

CKEditor

适用浏览器:IE6+、FireFox、Chrome、Safari、Opera...

CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。CKEditor 完全是基于 JavaScript 开发的,因此不必在客户端进行任何安装,并且兼容各大主流浏览器。

由于CKEditor的整体架构是建立在灵活的插件机制之上的。因此我们可以将特定的自定义功能独立于编辑器的核心代码之外。实际上包括许多CKEditor已有的预置功能,都是利用插件的形式开发的。因为不同的插件位于各自的文件,所以管理维护都很方便。

优点:

1、功能齐全,拥有丰富的样式和插件

2、定制性强,提供较多的扩展性API

3、由IBM支持的开发团队进行维护,社区活跃,仍在更新和修复bug

4、高性能的实时预览,行内编辑功能,使得编辑内容更加直观

缺点:

1、只有英文文档,需要额外的开发时间。

官方文档:WYSIWYG HTML Editor with Collaborative Rich Text Editing

GITHub:https://github.com/ckeditor/ckeditor5

BraftEditor

使用浏览器:IE6+、FireFox、Chrome...

Brafteditor是一个美观易用的React富文本编辑器。这个编辑器开箱即用,不用重复早轮子。其底层逻辑是基于Facebook的draft-js开发的,draft-js需要各种配置才能使用,而Brafteditor使用起来则非常简单。其有两种数据结构,分别是raw(用于数据的编辑操作)和 html (用于数据的展示)。他们之间可以进行转换,但是可能导致一些属性的缺失。所以一般需要将两种数据都进行存储。

优点:

1、使用简单,不需要额外配置、安装即可使用

2、基于react开发,和react项目有非常好的兼容性

3、中文开发文档,文档用例清晰明确

4、具有高度可扩展性和可定制性;

缺点:

1、当需要表格这样复杂的内容结构时,编辑器将会变慢,代码也会变得复杂

2、文档少,查阅不方便。

3、提供的基础插件较少,需要定制开发

4、缺乏官方的移动端支持

中文文档:Braft Editor | 基于DraftJS的强扩展性React富文本编辑器

英文文档:Rich Styling | Draft.js

GITHub:https://github.com/facebook/draft-js

TinyMCE

适用浏览器:IE6+、FireFox、Chrome、Safari、Opera...

功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是PHP,那还可以进一步优化。它支持市面上所有流行的浏览器,包括 IE6+ 和 Firefox1.5+,

该编辑器由JavaScript 编写而成,功能配置灵活简单,同时 TinyMCE 可以很方便的在可视化模式与 HTML 模式进行切换,TinyMCE 是一个根据 LGPL license 协议发布的自由软件,你可以把它用于商业应用。

优点:

1、插件丰富,可扩展性强,有能力可以无限拓展功能

2、界面好看,符合现代审美, 提供经典、内联、沉浸无干扰三种模式

3、多语言支持,官网可下载几十种语言。

4、开源免费的,目前一直有人维护。

缺点:

1、部分文档为中文,但是官方文档为英文,定制和扩展开发需要花费时间

2、需要付费订阅才能使用其高级功能

中文文档:TinyMCE中文文档中文手册

英文文档:The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE

GITHub:https://github.com/tinymce/tinymce

Quill.js

适用浏览器:IE6+、FireFox、Chrome、Safari、Opera...

Quill 是一个免费的,开源的 WYSIWYG (What You See Is What You Get)编辑器,专为现代网络而打造。凭借其模块化架构和富有表现力的 API,你可完全自定义以满足任何需求。

Quill 专为编辑和字符设计的,并在这些以自然文本为中心的单元之上构建其API。要找出某些文字是否是粗体,Quill 不需要遍历 DOM 查找 <b> 或者 <strong> 节点或者一个 font-weight 样式属性,只需调用 getFormat(5, 1)。它的所有核心 API 调用都允许任意索引和长度进行访问或修改。其事件 API 还会以直观的 JSON 格式报告更改。而无需解析 HTML 或者比较 DOM 树差异

优点:

1、易于设置和使用,简洁轻便,真正做到了开箱即用。

2、预设编辑器样式的主题支持。

3、由于其 API 驱动的设计,无需像在其他文本编辑器中那样解析 HTML

缺点:

1、有限的定制功能

2、更新和补丁较少

3、可能存在 XSS 安全漏洞

4、官方文档为英文,开发需要花费时间

英文文档: Quill - Your powerful rich text editor

GITHub:https://github.com/quilljs/quill/tree/develop/docs/docs/quickstart.md

本文链接地址:https://www.jiuchutong.com/zhishi/299619.html 转载请保留说明!

上一篇:::before和::after是什么?(before跟after区别)

下一篇:vue3插槽、具名插槽、作用域插槽-足够入门了!(vue 插槽详解)

  • 微信企业公众号怎么开通(微信企业公众号申请)

    微信企业公众号怎么开通(微信企业公众号申请)

  • 全民k歌微信状态怎么取消掉(全民k歌微信状态)

    全民k歌微信状态怎么取消掉(全民k歌微信状态)

  • vivos6屏幕刷新率是多少hz(vivos6屏幕刷新率怎么找)

    vivos6屏幕刷新率是多少hz(vivos6屏幕刷新率怎么找)

  • 抖音能和粉丝连麦吗(抖音能和粉丝聊天吗)

    抖音能和粉丝连麦吗(抖音能和粉丝聊天吗)

  • 华为mate30支不支持wifi6(华为mate30支不支持OTG功能)

    华为mate30支不支持wifi6(华为mate30支不支持OTG功能)

  • 线程间通信的几种方法(线程间通信的几种机制)

    线程间通信的几种方法(线程间通信的几种机制)

  • 微信多久不用会被注销(微信多久不用会被限制登录)

    微信多久不用会被注销(微信多久不用会被限制登录)

  • 华为p40pro有没有扫描功能(华为p40pro有没有智能遥控器)

    华为p40pro有没有扫描功能(华为p40pro有没有智能遥控器)

  • 苹果手机音量键凹进去了(苹果手机音量键不能调铃声音量)

    苹果手机音量键凹进去了(苹果手机音量键不能调铃声音量)

  • 钉钉自动退出怎么回事(钉钉自动退出怎么回事截图)

    钉钉自动退出怎么回事(钉钉自动退出怎么回事截图)

  • 收到腾讯科技验证码怎么回事(收到腾讯科技验证码小程序)

    收到腾讯科技验证码怎么回事(收到腾讯科技验证码小程序)

  • 电脑32g和16g内存区别(电脑32g和16g内存不兼容)

    电脑32g和16g内存区别(电脑32g和16g内存不兼容)

  • qq主页背景怎么换自己的照片(qq主页背景怎么关闭)

    qq主页背景怎么换自己的照片(qq主页背景怎么关闭)

  • 色彩范围命令可以创建选区吗(色彩范围命令可根据图像的颜色范围创建选区)

    色彩范围命令可以创建选区吗(色彩范围命令可根据图像的颜色范围创建选区)

  • 微信删除联系人聊天记录还有吗(微信删除联系人怎么恢复)

    微信删除联系人聊天记录还有吗(微信删除联系人怎么恢复)

  • 电子邮件的传输协议(电子邮件的传输遵循的协议是( ))

    电子邮件的传输协议(电子邮件的传输遵循的协议是( ))

  • 抖音怎么开直播权限(抖音怎么开直播需要什么条件才能开)

    抖音怎么开直播权限(抖音怎么开直播需要什么条件才能开)

  • 局域网是什么意思啊(局域网是什么意思啊网络用语)

    局域网是什么意思啊(局域网是什么意思啊网络用语)

  • 手机淘宝在哪里切换家乡版(手机淘宝在哪里看自己的店铺)

    手机淘宝在哪里切换家乡版(手机淘宝在哪里看自己的店铺)

  • 夏普电视wifi连接失败(夏普电视wifi连接打不开应用商店)

    夏普电视wifi连接失败(夏普电视wifi连接打不开应用商店)

  • airpods2怎么切歌(airpods2如何切歌调音量)

    airpods2怎么切歌(airpods2如何切歌调音量)

  • beatsx左右耳怎么区分

    beatsx左右耳怎么区分

  • 极北朱顶雀的巢,芬兰拉普兰 (© Maximilian Buzun/Alamy)(朱顶雀的饲养)

    极北朱顶雀的巢,芬兰拉普兰 (© Maximilian Buzun/Alamy)(朱顶雀的饲养)

  • 个税要计提吗?
  • 被客户扣钱怎么办
  • 哪些科目月底需要结转
  • 发票右上角打印缺数字
  • 事业单位合并财务交接
  • 企业残保金申报流程
  • 净资本和净资产区别
  • 收到物业费普通发票做账
  • 已认证抵扣的进项发票,次月开具红字发票信息表,凭证
  • 企业计提预提费用的会计分录如何编制?
  • 调整已结转的税种有哪些
  • 印花税漏报了要罚款吗
  • 公账发工资是即时到账吗
  • 小规模升一般纳税人开票超过500万
  • 金税盘点了没反应
  • 预付的货款可以计入应付账款吗
  • 机动车抵扣联是什么
  • txt文档乱码怎么办
  • 什么是comsol
  • 白内障手术费用大概几天出院
  • 市净率怎么计算举例说明
  • 外贸企业进项税额抵扣证明
  • 进项发票没认证可以开红字申请单吗
  • 电脑找不到u盘怎么解决
  • 失业稳岗补贴要交社保吗
  • 税法规定哪些支出不得扣除
  • 摩洛哥首都拉巴特简介
  • kzip_main.exe是什么
  • 个体户要交哪些税怎么交
  • 现金折扣税务处理shi
  • 现金日记账怎么记账
  • 太平鸟的翅膀上有几道红羽毛
  • 企业合并的合并范围
  • 年终奖并入综合所得
  • 红字专用发票开具的规定
  • 增值税密码锁定怎么办
  • 职工福利费的范围有哪些
  • 银行手续费必须有发票才能入账吗
  • python 进程管理
  • sql server创建数据表的完整语法
  • 支票的法人章盖倒了了可以吗
  • 抵扣进项税是怎么算的
  • 厂房改造费用算固定资产吗
  • sql server字符连接
  • 财政拨入的专项款专账怎么做
  • 劳务公司可以用工资表做成本
  • 进项税留抵税额是什么意思
  • 成本结转怎么做分录
  • 强化劳务输出
  • 委托加工的相关法律规定
  • 交通运输服务费税率
  • 员工伤残补助会计分录
  • sql查询速度慢如何优化
  • debian9.6安装教程
  • 如何关闭系统快捷键
  • 在Linux系统中安装MySQL
  • windows有哪些
  • 将哪一linux文件系统引入
  • centos中如何查看ip地址
  • win7资源管理器停止工作怎么办
  • win8.1 升级
  • mac鼠标如何设置
  • centos 安装chia
  • win7怎么给硬盘重新分区
  • win8怎么系统重装系统
  • [置顶]电影名字《收件人不详》
  • 让动画不再僵硬的软件
  • css中的单位主要有哪些
  • django orm外键
  • 用wasfile.zip智能批量删除文件
  • Node.js中的事件循环是什么意思
  • python利用format方法保留三位小数
  • nodejs调用npm命令
  • Unity3D游戏开发标准教程
  • shell脚本-le
  • 简单的jquery插件实例
  • 安卓9api
  • js调用声音
  • 餐饮商家怎么开通抖音团购
  • 保障性住房是否可以买卖
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设