富文本编辑器的技术演进
开发富文本编辑器的一些体会
最近两周一直都在开发后台wcms系统的文本编辑器。
在开发的过程中，感觉到开发富文本编辑器还是能学到不少东西的，接下来我会说说我个人是怎么开发的吧。
因为我的编辑器要兼容自己的后台，所以修改了一些浏览器自身的方法。
开发富文本编辑器主要用到了document.execCommand( command, showUI, value )这个方法。
command：要执行的命令的名称showUI：boolean是否向用户显示命令特定的对话框或消息框value类型：string要使用该命令分配的值。
关于这个方法更加详细的说明可以google进行搜索。
我们都知道在textarea下我们可以直接输入文本，但是怎么样能显示我们编辑文本后的效果呢。
我们通常是在div与iframe中编辑。
要想在div中编辑，设置其contentEditable = "true"。
若是在iframe中编辑，可以用designMode="on"。
通常人们都是用ifame，这样做当然有它的道理。
我在这边说下我个人的看法，有不对的希望大家指出。
为什么要用iframe来开发富文本编辑器是基于多方面考虑的。
以下是我个人的看法：1.用iframe可以解决浏览器的兼容性问题。
在iframe下可以很方便的获取选中的文字等等。
2.在iframe下编辑可以实现所见即所得的效果。
相当于是iframe下显示的是浏览器解析源码后的内容。
3.在iframe下是直接在iframe下的document中进行操作并不会影响到当前文档的document。
说说我在开发中的体会吧，因为我们的新闻页的源码内容是写在<textarea>innerHTML中，如果要获取源码解析后的内容直接取它的value就行。
如果想让<!-- -->这种编码格式也显示的话，需要将<!--和-->解析成<和--gt;。
UI之富文本编辑器使用详解（杰瑞教育原创）
在这里要注意，config.js文件应该在前。
窗体顶端
<="" action="<%=request.getContextPath() %>/main/contractServlet.action" p="">
通过请求servlet在servlet中调用业务方法将保存在数据库中的合同模板信息加载后保存在request中并通过转发到合同编辑页面在页面中将数据取出并在初始化ueditor时赋值
UI之富文本编辑器使用详解（杰瑞教育原创）
UI之富文本编Biblioteka 器-UEditor在做Web应用时，经常会进行富文本编辑，常用的富文本编辑器有很多，比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。
method="post">
窗体底端
vue 循环生成wangeditor富文本编译-概述说明以及解释
vue 循环生成wangeditor富文本编译-概述说明以及解释1.引言1.1 概述Vue.js是一款流行的JavaScript框架，用于构建用户界面。
它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据绑定和组件化的方式，使得开发者能够更高效地构建交互性强、响应式的Web应用程序。
Wangeditor富文本编辑器是一款基于JavaScript和CSS开发的优秀编辑器，它具有简洁、灵活的特点，可以轻松地实现富文本编辑的功能。
它支持常见的文字编辑、图片上传、插入链接、表格等功能，对于那些需要在网页中编辑和展示复杂内容的项目来说，是一个非常方便实用的工具。
本文将重点讨论如何在Vue.js中循环生成Wangeditor富文本编译的实现方法。
通过这种方式，我们可以在页面中动态地添加多个富文本编辑器，并对它们进行统一管理和控制。
这种实现方法不仅提高了开发效率，还使得我们可以更好地管理和扩展页面中的富文本内容。
在接下来的章节中，我们将先介绍Vue.js和Wangeditor的基本概念和特点，然后详细讲解循环生成Wangeditor富文本编译的具体实现方法。
最后，我们将总结本文的主要内容，并展望Vue.js和Wangeditor在未来的应用前景。
通过本文的学习，读者将能够了解到如何利用Vue.js和Wangeditor 构建强大的富文本编辑功能，并且能够灵活地在项目中应用它们。
无论是开发个人博客、电子商务网站还是其他Web应用程序，掌握这些技术和实现方法都会对你的开发工作产生积极的影响。
1.2 文章结构文章结构部分的内容如下：文章结构是指整篇文章的组织架构和逻辑顺序。
一个良好的结构可以帮助读者更好地理解文章内容，并使文章更具逻辑性和条理性。
本文主要包含以下几个部分：1. 引言：介绍本文要讨论的问题，概括说明文章的主题和目的，引发读者的兴趣。
2. 正文：主要包括三个部分。
2.1 Vue.js简介：对Vue.js进行简要介绍，包括其定义、特点和用途等。
elementplus 富文本 解析
一、elementplus 富文本的概念和作用elementplus 富文本是一种用于在网页上编辑和展示丰富文本内容的工具。
它可以让用户通过图形界面轻松地编辑文本样式、插入图片、表格、视瓶等多媒体内容，实现所见即所得的编辑效果。
富文本编辑器在网页开发中起到了非常重要的作用，帮助用户更加方便快捷地编辑和展示网页内容，提升用户体验，也能提高开发效率。
二、elementplus 富文本的特点和优点1.强大的功能：elementplus 富文本编辑器拥有丰富的编辑功能，如文字样式设置、插入表格、图片、视瓶等多媒体内容，可以满足用户对于网页内容编辑的各种需求。
2.易用性：elementplus 富文本编辑器采用了所见即所得的编辑方式，用户无需了解复杂的HTML语法就能轻松地实现网页内容的编辑，极大地降低了用户的学习成本。
3.定制性强：elementplus 富文本编辑器提供了丰富的配置选项，用户可以根据自己的需求对编辑器进行个性化定制，满足不同用户的需求。
4.兼容性好：elementplus 富文本编辑器兼容性良好，可以在各种主流浏览器上稳定运行，保证了用户在不同评台上的良好体验。
三、elementplus 富文本解析的作用和应用elementplus 富文本解析是指将富文本编辑器中编辑好的内容解析成网页或移动端可展示的HTML文档。
在实际开发中，我们通常会使用富文本编辑器编辑好内容后，再通过解析将其展示在网页上。
elementplus 富文本解析扮演了非常重要的角色，它可以帮助我们将编辑好的丰富内容快速、准确地展示给用户，提升网页的交互性和吸引力。
四、elementplus 富文本解析的流程和方法1.获取富文本内容：我们需要通过富文本编辑器的API或其他方式获取编辑好的富文本内容。
2.解析富文本内容：我们需要使用相关的解析方法将获取到的富文本内容转换成HTML文档或其他可展示的格式。
3.展示解析后的内容：将解析后的内容通过网页或移动端的界面展示给用户。
富文本编辑器实现原理
富文本编辑器实现原理一、概述富文本编辑器是一种可以在网页上创建、编辑和显示富文本的工具。
它可以让用户使用类似于Microsoft Word的界面来创建和编辑格式化的文本，包括字体、颜色、大小、样式等。
富文本编辑器通常用于博客、社交媒体和电子商务网站等场景。
二、HTML/CSS富文本编辑器的实现基于HTML/CSS技术。
HTML是一种标记语言，用于定义网页结构和内容。
CSS是一种样式表语言，用于定义网页的外观和布局。
富文本编辑器通过将用户输入的文本转换为HTML代码来实现格式化效果。
例如，当用户选择一个字体时，编辑器会将该字体名称转换为一个HTML标记，并将其应用到所选文本中。
三、JavaScriptJavaScript是一种脚本语言，用于在网页上添加交互性和动态效果。
富文本编辑器使用JavaScript来实现各种功能。
1. DOM操作DOM（Document Object Model）是一种表示HTML文档结构的API（Application Programming Interface）。
富文本编辑器使用DOM操作来访问和修改网页上的元素，并实现各种功能。
例如，当用户点击“加粗”按钮时，编辑器会查找所选文字所在的DOM元素，并将其应用加粗样式。
2. 事件处理事件处理是JavaScript的一个重要特性，用于响应用户的交互操作。
富文本编辑器使用事件处理来捕获用户的鼠标和键盘事件，并执行相应的功能。
例如，当用户按下“Ctrl+C”组合键时，编辑器会捕获该事件，并将所选文本复制到剪贴板中。
3. AJAXAJAX（Asynchronous JavaScript and XML）是一种用于在网页上异步加载数据的技术。
富文本编辑器使用AJAX来实现上传图片和文件等功能。
例如，当用户选择一个图片并点击上传按钮时，编辑器会使用AJAX 将该图片发送到服务器，并在上传完成后将其插入到文本中。
四、插件插件是一种扩展富文本编辑器功能的方式。
富文本基本语法-概述说明以及解释
富文本基本语法-概述说明以及解释1.引言1.1 概述富文本是一种在计算机科学领域中经常使用的技术，它提供了丰富多样的文本格式和样式设置，使得文本内容能够以更加丰富和多样的方式进行呈现。
与传统的纯文本相比，富文本具有更强的表现力和交互性，能够更好地满足用户的需求。
富文本编辑器是用于编辑和展示富文本内容的工具。
它们通常提供了许多功能，比如文字样式设置（如字体、字号、颜色、加粗、倾斜等）、段落排版（如对齐方式、缩进、行间距等）、插入图片、添加超链接、创建表格等。
通过富文本编辑器，用户可以轻松地创建具有丰富样式和多媒体内容的文档、文章、邮件等。
在使用富文本编辑器时，了解和掌握基本的富文本语法是非常重要的。
富文本语法指的是一系列的标记和约定，用于描述和定义文本内容的格式和样式。
通过掌握富文本语法，我们可以更加灵活地编辑和展示文本，使其更加生动、直观和易读。
本文将重点介绍富文本基本语法，包括文字样式设置、段落排版、插入图片和超链接等常用的富文本语法。
通过学习和理解这些基本的语法规则，读者将能够更好地使用富文本编辑器，创作出更加美观和富有表现力的文章和文本内容。
接下来的章节将依次介绍富文本概念、常用富文本编辑器以及具体的富文本基本语法。
最后，我们将总结富文本基本语法的重要性，并展望未来富文本技术的发展方向。
让我们开始探索富文本的奇妙世界吧！1.2 文章结构文章的结构对于读者来说至关重要，能够帮助他们更好地理解和阅读文章的内容。
一个良好的文章结构能够使思路清晰、逻辑有序、层次分明，有助于读者更好地理解文章的主题和观点。
在本篇文章中，我们将按照以下结构来组织内容：1. 引言部分：对富文本基本语法的背景和意义进行总体概述，引起读者的兴趣，提供文章的整体框架。
2. 正文部分：分为三个小节，分别介绍富文本概念、常用富文本编辑器以及富文本基本语法。
在每个小节中，我们将详细解释相关概念、工具和语法，并配以示例来帮助读者更加直观地理解。
react 开发富文本编辑器原理
react 开发富文本编辑器原理在React 中开发富文本编辑器（Rich Text Editor）的原理涉及处理用户输入、DOM 操作、状态管理和渲染等方面。
以下是一个简单的富文本编辑器的实现原理概述：初始化编辑器组件：创建一个React 组件，作为富文本编辑器的容器。
初始化内部状态，例如当前编辑器的内容。
用户输入处理：使用contentEditable 属性将一个可编辑的div 元素设置为编辑器的内容区域，使用户能够在其中输入文本。
监听用户的输入事件，如onInput，以便实时更新编辑器的状态。
状态管理：使用React 的状态（useState 或useReducer）来管理编辑器的内容。
在输入事件发生时，更新编辑器的状态，以便反映用户输入的变化。
格式化和样式：提供工具栏或其他用户界面元素，允许用户调整文本格式和样式，例如加粗、斜体、字体颜色等。
根据用户的选择，在编辑器的内容中插入或修改相应的HTML 标记。
DOM 操作和渲染：使用React 的dangerouslySetInnerHTML 属性或类似的手段，将编辑器的状态渲染到contentEditable 元素中。
在状态更新时，确保通过DOM 操作将用户输入或编辑器的内容同步到内部状态。
光标位置管理：使用document.getSelection() 等DOM API，监控和更新光标位置。
在用户点击、输入或执行格式化操作时，确保在正确的位置插入或调整文本。
插入媒体和附件：考虑富文本编辑器中插入图片、链接或其他媒体的需求。
实现逻辑以处理用户插入媒体的请求，并在编辑器中进行相应的DOM 操作。
处理富文本内容：在用户提交或保存内容时，将富文本内容以HTML 格式或其他合适的格式进行处理和存储。
这只是一个基本的概述，实际上，富文本编辑器的开发可能会更加复杂，特别是涉及到处理跨浏览器兼容性、性能优化、撤销/重做等功能时。
常见的库和框架，如draft-js 或react-quill，提供了更高级的富文本编辑器实现，并处理了很多复杂性。
php发展历程
php发展历程PHP（全称：PHP: Hypertext Preprocessor）是一种被广泛应用的开源服务器端脚本语言，最早由拉斯姆斯·勒多夫（Rasmus Lerdorf）在1994年开发而成。
以下是PHP发展的里程碑：1995年，PHP发布了第一个公开版本，命名为PHP/FI。
这个版本主要用于简单的表单处理和数据库交互。
1997年，PHP的发展迅速，并投入大量精力开发新的语法和功能。
发布了PHP 3，引入了诸多特性如面向对象编程（OOP）。
2000年，PHP 4发布，带来了更多的功能改进和性能优化。
这个版本引入了Zend引擎，增强了PHP的性能和稳定性。
2004年，PHP 5发布，是一个重要的版本升级。
PHP 5添加了许多新特性，包括对面向对象编程的改进，以及额外的异常处理和命名空间。
2012年，PHP 5.4发布，引入了更多的特性和语法改进，如特性聚合、短数组语法和Traits。
2014年，PHP 5.6发布，带来了更好的性能和更多的新特性。
这个版本引入了变参参数的特性、扩展了密码哈希函数、添加了通用哈希消息认证代码，并改进了OPcache性能。
2015年，PHP 7发布，是目前最为重要的一个版本升级。
PHP7通过引入全新的Zend引擎（Zend Engine 3）来提升性能，以及许多新特性和语言改进。
通过优化内存使用和提高执行速度，PHP 7显著减少了服务器负载和响应时间。
2016年，PHP 7.1发布，继续优化性能、改进语法，并引入了Nullable类型、函数返回类型声明等新特性。
2018年，PHP 7.3发布，增加了更多新特性、改进性能和增强语法。
它引入了功能性的增强，比如JSON错误捕获、更好的支持闭包、改进了Heredoc/Nowdoc语法等。
PHP的发展历程见证了它从一个简单的脚本语言逐渐成长为功能强大、充满生命力的开发语言。
每个版本的发布都带来了许多改进，提供更好的性能、更多的功能和更优雅的语法，为开发者创造了更好的编程体验。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
富⽂文本编辑器器的技术演进
⽬目录一、富文本编辑器介绍
二、语雀文档编辑器面临的问题与解决思路
三、多人实时协同的解决思路
富⽂文本编辑器器 - 常⻅见交互
富文本输入框
- 输入内容
- 选中 & 操作
操作栏
- 顶部工具栏
- 侧边栏
- 内嵌工具栏
富⽂文本编辑器器 - 浏览器器特性
富文本输入框
<div contenteditable=“true”>这里可以编辑</div>
对内容进行操作
document.execCommand(‘bold’);
富⽂文本编辑器器 - 技术类型
类型描述典型产品
L01、基于 contenteditable
2、使⽤用 document.execCommand
3、⼏几千～⼏几万⾏行行代码
早期的轻量量级编辑器器
L11、基于 contenteditable
2、不不⽤用 document.execCommand，⾃自主实现
3、⼏几万⾏行行～⼏几⼗十万⾏行行代码
CKEditor、TinyMCE
Draft.js、Slate
⽯石墨墨⽂文档、腾讯⽂文档
L21、不不⽤用 contenteditable，⾃自主实现
2、不不⽤用 document.execCommand，⾃自主实现
3、⼏几⼗十万⾏行行～⼏几百万⾏行行代码
Google Docs
Office Word Online
iCloud Pages
WPS ⽂文字在线版
富⽂文本编辑器器 - 不不同类型的优劣
类型优势劣势
L0技术⻔门槛低，短时间内快速研发可定制的空间⾮非常有限
L1站在浏览器器肩膀上，能够满⾜足 99% 业务场景⽆无法突破浏览器器本身的排版效果
L2技术都掌控在⾃自⼰己⼿手中，⽀支持个性化排版技术难度相当于⾃自研浏览器器、数据库
富⽂文本编辑器器 - L1 编辑器器
传统模式
DOM 树等于数据，调用各种 DOM API 进行操作
典型产品：CKEditor 4、TinyMCE、UEditor
MVC 模式
数据和渲染分离，实现一套操作数据模型的方法，数据变更带动渲染 典型产品：CKEditor 5、Draft.js、Slate
富⽂文本编辑器器 - L1 编辑器器两种模式优劣
传统模式
优势：20 年的历史，代码简单直接，可维护性好，充分利用 contenteditable 特性 劣势：代码写法不符合潮流，都是 10 几年前的技术
MVC 模式
优势：代码写法符合潮流
劣势：引起数据和渲染不同步的问题，因为这个机制需要有完全控制用户输入的前提，实际上基于 contenteditable 没办法控制用户的所有输入，第三方输入法、壳浏览器会让用户输入不可控
富⽂文本编辑器器 - L2 编辑器器
自主实现富文本输入框，包含用户输入和排版引擎，可用 DOM、SVG 技术
用户输入：
光标、选区自主实现，光标位置放隐藏 textarea 接受键盘输入，输入完成之后变更数据、渲染视图
排版引擎：
实现各种个性化的文字排版、图文布局，突破浏览器排版限制
富⽂文本编辑器器 - 总结
如何技术选型？
没有编辑器研发团队：推荐基于 CKEditor 4、TinyMCE 二次开发 有几人编辑器研发团队：推荐自研 L1 传统模式编辑器
有几十人编辑器研发团队 & 需要个性化排版：推荐自研 L2 编辑器
L0
L2
MVC 模式
L1
传统模式
技术类型
⽬目录一、富文本编辑器介绍
二、语雀文档编辑器面临的问题与解决思路
三、多人实时协同的解决思路
语雀编辑器器 - ⾯面临的问题
疑难杂症多
问题难以修复，页面崩溃、光标错乱、粘贴卡死等
排查链路长
语雀编辑器、Slate、React 一层层往下查
新增功能难
很多个性化需求，在 Slate 架构上实现成本较高
技术选型问题
1）基于 Slate，是 L1 MVC 模式
2）基于 React 渲染，但 React 是 UI 构建库
更换技术选型，用 L1 传统模式重写编辑器
为什么没有基于开源编辑器？
第一是 license 问题，第二是我正好具备多年 L1 编辑器研发经验 ：）L0L2
MVC 模式
L1传统模式
高健壮性
采用一切手段保证功能的稳定，努力做到业内问题最少的编辑器
可维护性
编辑器本身代码量很大，后期可维护性是关键，能用简单方式解决问题，尽量简化
可扩展性
具备良好的扩展性，不能因为架构问题，满足不了业务需求
数据格式：在 HTML 基础上扩展
卡片机制：承接组件的扩展，在编辑器里独立的一块区域
开发模式：Hybrid 混合开发，编辑区域用原生 JS，UI 层用 React
技术原理：基于 contenteditable，通过 Range API 对选中的内容进行操作
<h3>heading</h3>
<p>
<strong><anchor/>bold<focus/></strong>
<em>italic</em>
<u>underline</u>
<span style="color: #FFFFFF;">fontcolor</span>
<span style="background-color: #000000;">backcolor</span>
<card type="inline"name="image"value="JSON string"></card> </p>
<p style="text-align: center;">alignment</p>
<ol>
<li>orderedlist</li>
</ol>
<card type=“inline"name="file"value="JSON string"></card>
<card type="block"name="codeblock"value="JSON string"></card>光标
<cursor />
选区
<anchor />HTML<focus />
卡片组件
<card type=“”
name=“”></card>
卡⽚片⼯工具栏
卡⽚片内容区域（contenteditable = false）
Left Cursor Right Cursor
Inline Card Block Card
语雀编辑器器 - 混合开发模式
红色区域：原生 JS
蓝色区域：React。