位置: 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 插槽详解)

  • airpods pro怎么重新配对(airpodspro怎么重置不会被定位)

    airpods pro怎么重新配对(airpodspro怎么重置不会被定位)

  • 怎么让网络E变回4G(怎么让网络变得更强)

    怎么让网络E变回4G(怎么让网络变得更强)

  • 华为p40搭载的处理器是什么(华为p40搭载什么芯片)

    华为p40搭载的处理器是什么(华为p40搭载什么芯片)

  • 快手主页的联系电话图标怎么开通的(快手主页的联系电话怎么设置视频教程)

    快手主页的联系电话图标怎么开通的(快手主页的联系电话怎么设置视频教程)

  • 华为flypods死活连不上(华为flypodsapp)

    华为flypods死活连不上(华为flypodsapp)

  • 扩展坞会不会损害电脑(扩展坞会不会损坏电脑)

    扩展坞会不会损害电脑(扩展坞会不会损坏电脑)

  • 退微信群会有提示吗(退微信群会有提醒吗)

    退微信群会有提示吗(退微信群会有提醒吗)

  • oppo官方系统升级(oppo官方更新系统)

    oppo官方系统升级(oppo官方更新系统)

  • 怎样把几张照片合成一个文件(怎样把几张照片拼在一张)

    怎样把几张照片合成一个文件(怎样把几张照片拼在一张)

  • plc软件有哪些(plc软件有哪几种)

    plc软件有哪些(plc软件有哪几种)

  • 4g流量5g能用吗(4g流量5g手机能用么)

    4g流量5g能用吗(4g流量5g手机能用么)

  • 华为指关节分屏用不了(华为关节分屏怎么弄出来)

    华为指关节分屏用不了(华为关节分屏怎么弄出来)

  • 可以设置打开微信需要密码吗(设置打开微信钱包密码)

    可以设置打开微信需要密码吗(设置打开微信钱包密码)

  • 分身微信会不会影响账号安全(微信分身会影响手机吗)

    分身微信会不会影响账号安全(微信分身会影响手机吗)

  • 苹果视频功能不见了(苹果视频功能不见了怎么恢复)

    苹果视频功能不见了(苹果视频功能不见了怎么恢复)

  • 麒麟710相当于联发科多少(麒麟710相当高通的什么处理器)

    麒麟710相当于联发科多少(麒麟710相当高通的什么处理器)

  • mate30nfc怎么用(mate30nfc功能怎么打开)

    mate30nfc怎么用(mate30nfc功能怎么打开)

  • 苹果x的摄像头哪家生产(苹果x的摄像头图片)

    苹果x的摄像头哪家生产(苹果x的摄像头图片)

  • honor7x是不是双卡(honor7x是不是双卡双待)

    honor7x是不是双卡(honor7x是不是双卡双待)

  • 怎么关掉快手青少年(怎么关掉快手青少年模式)

    怎么关掉快手青少年(怎么关掉快手青少年模式)

  • 淘宝88会员有什么用(淘宝88会员有什么音乐会员)

    淘宝88会员有什么用(淘宝88会员有什么音乐会员)

  • 7p为什么设置不了动态壁纸(7p怎么设置)

    7p为什么设置不了动态壁纸(7p怎么设置)

  • 抖音怎么看自己的公会(抖音怎么看自己什么时候注册的)

    抖音怎么看自己的公会(抖音怎么看自己什么时候注册的)

  • 滴滴车龄超过8年怎么办(滴滴车龄超过8年可以延期吗)

    滴滴车龄超过8年怎么办(滴滴车龄超过8年可以延期吗)

  • 虚拟位置定位软件为什么不能用了(虚拟位置定位软件app下载)

    虚拟位置定位软件为什么不能用了(虚拟位置定位软件app下载)

  • 抖音随拍怎么加音乐(抖音怎么添加随拍)

    抖音随拍怎么加音乐(抖音怎么添加随拍)

  • html 怎么设置文本对齐,文本间距,盒子居中显示(HTML怎么设置文本框)

    html 怎么设置文本对齐,文本间距,盒子居中显示(HTML怎么设置文本框)

  • 织梦cms信息提示修改方法(织梦cms要钱吗)

    织梦cms信息提示修改方法(织梦cms要钱吗)

  • 股权转让如何缴纳增值税
  • 防火门属于固定式防火风格
  • 收购定额发票
  • 纸质发票如何查看电子发票
  • 投资收益率中投资总额包括哪些
  • 汇算清缴所得税退回做账
  • 易票365是哪家公司的
  • 其他应收款如何调平分录
  • 老版普通增值税发票还能用吗
  • 所得税的计税依据
  • 企业所得税减免政策2023
  • 开票含税和不含税哪个划算
  • 资产委托经营管理合同
  • 民间非营利组织财务报表
  • 总工会拨付工会经费
  • 电脑开机自动进入bios怎么解决
  • windows10更新怎么办
  • 如何结束excel
  • 怎么进入bios设置界面设置内存
  • 初中英语的学科知识与能力主要考什么
  • php的基础知识
  • 开发票的时候补差价怎么处理?
  • 同一控制下企业合并和非同一控制下企业合并的区别
  • 持有至到期投资在资产负债表怎么填
  • 投影仪属于固定资产哪一类
  • Yii2如何批量添加数据
  • redis 缓存框架
  • 无纸化办理
  • cityscape dataset
  • vue3ts
  • typescript中文
  • yolov3目标检测
  • 2023年highway-env更新之后的使用记录(含DDQN,DuelingDQN,DDQN+OtherChanges) 入门到入土,再踩坑就不玩原神了
  • 委托加工物资如何做账
  • 红字信息表开错了怎么撤销
  • python logger
  • 残保金都要申报吗
  • 一税两费减免政策
  • 仓库出入库账本怎么做
  • 工程施工和工程结算的账务处理
  • 应付利息的会计分录怎么写
  • 定期定额户增值税起征点
  • 一个人可以做多个担保人吗
  • 以房抵债会计分录怎么做
  • 会计凭证销毁年限
  • 应付账款会计分录怎么写
  • 固定资产一次性扣除怎么做账
  • 应收账款和预收账款都是企业的债权
  • 销售方会计分录
  • 小企业会计准则和一般企业会计准则的区别
  • 企业购买黄金该交什么税
  • 发票丢失了可以用复印件加盖发票章入账吗
  • 资金结存属于资产类吗
  • 电信收据模板
  • 医院药品过期放多久
  • 股东现金存入公司账户,该如何做账?
  • 固定资产管理系统设置及业务处理
  • sql字段转首字母大写
  • 偷天换日角色介绍
  • win10安装完成后需要做哪些设置
  • 在windows的命令提示符下,命令名在实际输入时规定
  • 电脑硬件用途
  • awk命令的功能是什么
  • win8系统崩溃无法开机
  • windows7右下角网络图标不见了怎么办
  • win7系统存储在哪
  • 电脑安装win8
  • 基于socket的聊天程序
  • unity 3d脚本编程
  • vue插件使用
  • unity删除对象
  • unity更新下载文件
  • python-pip安装
  • python基础教程视频教程
  • js鼠标滑动特效
  • python socks
  • 对象类型怎么填
  • 重庆市医疗保障局
  • 用友u8外部凭证怎么删除
  • 上海川沙十八铺市场
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设