富文本编辑器实现
🎨 富文本编辑器实现原理全解析
📝 基本实现路径图
🌈 编辑器工作流程动画
🏆 三代编辑器技术演进
| 代际 | 技术特点 | 代表产品 | 优缺点 |
|---|---|---|---|
| 第一代 | 直接操作DOM | TinyMCE、CKEditor 4 | ✅简单 ❌难维护 |
| 第二代 | iframe隔离 | UEditor、百度编辑器 | ✅样式隔离 ❌性能问题 |
| 第三代 | ⭐数据驱动⭐ | Slate、ProseMirror、Quill | ✅可控性强 ✅扩展性好 ❌实现复杂 |
🧩 编辑器核心组件关系
🔮 数据模型设计（重点）
📋 数据模型代码示例
// ProseMirror风格的文档模型
const doc = {type: "doc",content: [{type: "paragraph",content: [{ type: "text", text: "普通文本" },{ type: "text", text: "粗体文本",marks: [{ type: "strong" }] // ⭐标记系统⭐}]},{type: "heading",attrs: { level: 2 },content: [{ type: "text", text: "标题文本" }]}]
}
🎭 编辑器命令设计模式
🎮 命令系统代码示例
// Quill风格的命令系统
editor.format('bold', true); // 应用加粗
editor.format('color', 'red'); // 设置颜色// ProseMirror风格的命令系统
const toggleBold = state => {const {schema, selection} = state;const markType = schema.marks.strong;// ⭐创建事务并应用变更⭐return state.tr.toggleMark(markType);
}
🔄 编辑器事件循环
🏗️ 三大主流编辑器架构对比
💡 富文本编辑器核心挑战
🚀 现代编辑器趋势与方向
🧪 实现自己的迷你编辑器
如果你想尝试实现一个简单的富文本编辑器，可以从这些步骤开始：
- ⭐创建数据模型⭐ - 设计文档结构
- 实现渲染层 - 将模型映射到DOM
- 添加事件处理 - 捕获用户输入
- 设计命令系统 - 封装编辑操作
- 增加历史记录 - 支持撤销/重做
记住：数据驱动是现代编辑器的核心理念，所有UI变化都应该通过模型变更触发，而不是直接操作DOM！
📊 编辑器性能对比
| 编辑器 | 初始化速度 | 大文档性能 | 内存占用 | 扩展难度 |
|---|---|---|---|---|
| TinyMCE | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
| CKEditor 5 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| Quill | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| ProseMirror | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| Slate | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
现代富文本编辑器已从简单的DOM操作发展为复杂的数据驱动系统，通过巧妙的架构设计解决了文档编辑的各种挑战。数据模型设计和命令系统是理解编辑器的两个最关键点，掌握了这些，你就能理解现代富文本编辑器的核心原理！
相关文章：
富文本编辑器实现
🎨 富文本编辑器实现原理全解析 📝 基本实现路径图 #mermaid-svg-MO1B8a6kAOmD8B6Y {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MO1B8a6kAOmD8B6Y .error-icon{fill:#552222;}#mermaid-s…...
海量粒子特效解决方案：VEG
Unity 官方除了一个 GPU 粒子特效的解决方案：Visual Effect Graph，即 VEG，能支持百万级粒子特效的播放。在性能要求高的使用场景中，这个解决方案就能完美解决原本 Particle System 性能低下的问题。关于 VEG 的基本使用方法参考官…...
Java高频面试之并发编程-06
hello啊，各位观众姥爷们！！！本baby今天来报道了！哈哈哈哈哈嗝🐶 面试官：线程上下文切换是什么？ 线程上下文切换（Thread Context Switching）是操作系统中 CPU…...
Windows 同步技术-一次性初始化
组件通常设计为在首次调用时执行初始化任务，而不是加载它们时。 一次性初始化函数可确保此初始化仅发生一次，即使多个线程可能尝试初始化也是如此。 Windows Server 2003 和 Windows XP： 应用程序必须使用 互锁函数 或其他同步机制提供自己的…...
Transformer起源-Attention Is All You Need
这篇笔记主要讲解Attention Is All You Need论文。《Attention Is All You Need》由 Ashish Vaswani 等人撰写，于 2017 年发表在 NIPS（Neural Information Processing Systems）会议上。它提出了一种全新的神经网络架构——Transformer&#x…...
被裁20240927 --- 视觉目标跟踪算法
永远都像初次见你那样使我心荡漾 参考文献目前主流的视觉目标跟踪算法一、传统跟踪算法1. 卡尔曼滤波（Kalman Filter）2. 相关滤波（Correlation Filter，如KCF、MOSSE）3. 均值漂移（MeanShift/CamShift&#x…...
)
每日学习Java之一万个为什么(JUC)
文章目录 Git复习synchronized介绍基本概念特点 使用模板1. 同步方法格式特点 2. 同步代码块格式特点 常见面试题1. synchronized的实现原理？2. synchronized与ReentrantLock的区别？3. synchronized的缺点？4. 死锁的四个必要条件？…...
代码分享：python实现svg图片转换为png和gif
import cairosvg import imageio from PIL import Image import io import osdef svg_to_png(svg_path, png_path):try:cairosvg.svg2png(urlsvg_path, write_topng_path)print(f"成功将 {svg_path} 转换为 {png_path}")except Exception as e:print(f"转换为 P…...
前端热门面试题day1
内容回答较粗糙，如有疑问请自行搜索资料 什么是vue中的slot？它有什么作用 Vue中的Slot（插槽）就像给组件预先留的“内容停车位”，让父组件能把自定义内容“塞”到子组件的指定位置。它的主要作用是： 灵活定…...
DCAN，ECAN和MCAN的区别
DCAN、ECAN和MCAN的主要区别在于它们各自的管理范围和功能。 DCAN（动力CAN系统）：DCAN主要负责协调电机控制单元（MCU）、电池管理系统（BMS）、直流电压变换器（DC/DC）和…...
基于Python爬虫的豆瓣电影信息爬取（可以根据选择电影编号得到需要的电影信息）
# 豆瓣电影信息爬虫（展示效果如下图所示：） 这是一个功能强大的豆瓣电影信息爬虫程序，可以获取豆瓣电影 Top 250 的详细信息。 ## 功能特点 - 自动爬取豆瓣电影 Top 250 的所有电影信息 - 支持分页获取，每页 25 部电影，共 10 页 - 获取每部电影的详细信息，包括： - 标题…...
Linux系统学习----概述与目录结构
linux 是一个开源、免费的操作系统，其稳定性、安全性、处理多并发已经得到业界的认可，目前很多企业级的项目 (c/c/php/python/java/go)都会部署到 Linux/unix 系统上。 一、虚拟机系统操作 1.网络连接的三种方式（桥接模式、nat模式、主机模…...
软考资料分享
分享一些软考资料 16系统分析师-基础知识精讲夸克网盘分享1701系统分析师夸克网盘分享1804系统架构设计师夸克网盘分享19软考系统架构设计师2024年11月夸克网盘分享2006信息系统项目管理师夸克网盘分享21软考高级信息系统项目夸克网盘分享22系统分析师视频教程真题资料夸克网盘…...
什么是 GLTF/GLB？ 3D 内容创建的基本数据格式说明,怎么下载GLB/GLTF格式模型
GLTF 概述 GLTF 是一种 3D 模型格式，广泛用于在 Web 上共享和显示 3D 内容。 它经过优化，可在 WebGL 中轻松加载，使用 WebGL 可以快速高效地渲染 3D 模型。 GLTF 是 Khronos Group 开发的开放标准之一，以 JSON 或二进制格式表示…...
湖南大学-操作系统实验四
HUNAN UNIVERSITY 操作系统实验报告 一、实验题目 实验四 中断、异常和陷阱指令是操作系统的基石，现代操作系统就是由中断驱动的。本实验和实验五的目的在于深刻理解中断的原理和机制，掌握CPU访问中断控制器的方法，掌握Arm体系结构的中断机…...
3.第三章：数据治理的战略价值
文章目录 3.1 数据治理与企业战略3.1.1 数据驱动的决策体系3.1.2 数据资产的价值挖掘3.1.3 风险防控与合规管理 3.2 数据治理的业务价值3.2.1 提升客户体验3.2.2 优化运营效率3.2.3 加速产品创新 3.3 数据治理的技术价值3.3.1 提升数据质量3.3.2 优化数据架构3.3.3 增强系统集成…...
[KVM] KVM挂起状态恢复失败与KVM存储池迁移
背景：发现KVM host上的几台虚拟机挂起了(paused)，但是并没有执行virsh suspend <vm_hostname>，且使用virsh resume <vm_hostname> 无法恢复。原因是这个几个虚拟机归属的存储池所在的磁盘满了。所以想把虚拟机迁移到磁盘空间富余…...
图文结合 - 光伏系统产品设计PRD文档 -（慧哥）慧知开源充电桩平台
光伏系统产品设计PRD文档 版本号：1.0 修订日期：2023年10月 作者： 一、文档概述 1.1 背景与目标 行业背景：全球光伏装机量年增长20%，数字化运维需求迫切用户痛点：现有系统存在数据延…...
linux-相关命令
一、Linux 详细介绍 1. 什么是 Linux？ Linux 是一个开源的类 Unix 操作系统，其核心是 Linux 内核。它最早由 Linus Torvalds 在 1991 年发布，后来逐渐发展成各种发行版（如 Ubuntu、CentOS、Debian、Arch 等）。 2. L…...
Hive中Map和Reduce阶段的分工
在Hive查询执行过程中，Map和Reduce阶段有明确的分工，但实际情况要复杂一些。 基本分工原则 Map阶段： 主要职责是读取输入数据并进行初步处理输出键值对形式的数据Reduce阶段： 接收Map阶段输出的键值对对相同键的值进行聚合/计算输出最终结果实际执行中的复…...
前端笔记-Vue router
学习目标 Vue Router路由管理1、路由配置2、嵌套路由3、路由守卫与权限控制 一、路由配置（给网站做地图） npm i vue-router 作用：告诉浏览器什么地址该显示什么页面 核心代码： // 创建路由并暴露出去// 第一步&#x…...
MySQL的日志--Redo Log【学习笔记】
MySQL的日志--Redo Log 知识来源： 《MySQL是怎样运行的》--- 小孩子4919 MySQL的事务四大特性之一就是持久性（Durability）。但是底层是如何实现的呢？这就需要我们的Redo Log（重做日志）闪亮登场了。它记录着…...
《系统分析师-第三阶段—总结（五）》
背景 采用三遍读书法进行阅读，此阶段是第三遍。 过程 第9章 总结 在这个过程中，对导图的规范越来越清楚，开始结构化，找关系，找联系。...
【LangChain4j】AI 第二弹：项目中接入 LangChain4j
普通接入方式 参考文档： Get Started https://docs.langchain4j.dev/get-started 1.添加依赖 <!-- 基于open-ai的langchain4j接口：ChatGPT、deepseek都是open-ai标准下的大模型 --> <dependency><groupId>dev.langchain4j</grou…...
测试基础笔记第十天
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、查询语句1.基本查询2.条件查询3.模糊查询4.范围查询5.判断空 二、其他复杂查询1.排序2.聚合函数3.分组4.分页查询 一、查询语句 1.基本查询 – 需求1: 准备商…...
代理模式：控制对象访问的中间层设计
代理模式：控制对象访问的中间层设计 一、模式核心：通过代理对象控制对目标对象的访问 在软件开发中，有时需要为对象添加一个 “代理” 来控制对它的访问，例如： 远程代理：访问远程对象时（如 R…...
Python类和对象二（十一）
构造函数： 重写： 通过类名访问类里面的方法的做法，称为调用未绑定的父类方法，他有时候会产生钻石继承问题： 发现A重复初始化了两次，类c同事继承类B1和B2，类B1和B2又是继承类A的，当c…...
大模型在代码安全检测中的应用
大模型在代码安全检测领域的应用近年来取得显著进展，尤其在代码审查（Code Review, CR）场景中展现出高效性与准确性。以下是其核心优势、技术路径、挑战及实践案例的总结： 一、技术优势与核心能力 语义理解与上下文分析 大模型通过…...
Python实现图片浏览器
Python实现图片浏览器 支持浏览多种常见图片格式：JPG, JPEG, PNG, GIF, BMP, TIFF, WEBP 通过"打开文件夹"按钮选择任何包含图片的文件夹 灵活的排序选项： 按时间排序（新→旧或旧→新） 按文件名排序（A→…...
网页设计规范：从布局到交互的全方位指南
网页设计规范看似繁杂，但其实都是为了给用户提供更好的体验。只有遵循这些规范，才能设计出既美观又实用的网页，让用户在浏览网页时感到舒适、愉悦。 一、用户体验至上 用户体验（UX）是网页设计的核心原则之一。设计师…...
哪些心电图表现无缘事业编体检呢？
根据《公务员录用体检通用标准》心血管系统条款及事业单位体检实施细则，心电图不合格主要涉及以下类型及处置方案： 一、心律失常类 早搏：包括房性早搏、室性早搏和交界性早搏。如果每分钟早搏次数较多（如超过5次）&…...
Java基础系列-HashMap源码解析1-BST树
文章目录 序二叉搜索树（BST）引入查找5插入9极端情况删除删除叶节点 10删除节点只有左子树或只有右子树删除节点既有左子树又有右子树为什么这么代替？ 序 提到HashMap，就不得不提红黑树（HashMap1.8之后）&am…...
生物计算安全攻防战：从DNA存储破译到碳基芯片防御体系重构
随着碳基生物芯片突破冯诺依曼架构限制，DNA数据存储密度达到1EB/克量级，合成生物学与信息技术的融合正引发新一轮安全革命。本文深入解析碳基芯片逆向工程路径，揭示酶驱动DNA数据解码的技术突破，预警合成生物回路潜在的数据泄露风…...
【金仓数据库征文】从Oracle到KingbaseES的语法兼容与迁移
随着“信创”战略的深入推进，国产数据库逐渐成为IT系统的重要组成部分。KingbaseES（金仓数据库）凭借其良好的Oracle兼容性和日益完善的生态，成为金融、政务等核心行业国产化替代的重要选项。本文将从语法兼容性分析出发࿰…...
MATLAB 下载安装教程
## 一、下载MATLAB 1. 访问 MathWorks 官方网站：https://www.mathworks.com/ 2. 点击右上角的"登录"按钮 - 如果没有账号，需要先注册一个 MathWorks 账号 - 学生可以使用教育邮箱注册，获得教育版授权 3. 登录后，点击&…...
Android kotlin通知功能完整实现指南：从基础到高级功能
本文将详细介绍如何在Android应用中实现通知功能，包括基础通知、动作按钮和内联回复等高级特性。 一、基础通知实现 1. 基本通知发送方法 fun sendBasicNotification(context: Context, title: String, message: String) {// 1. 创建通知渠道(Android 8.0必需)va…...
Javase 基础入门 —— 04 继承
本系列为笔者学习Javase的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaAI智能辅助编程全套视频教程，java零基础入门到大牛一套通关》，章节分布参考视频教程，为同样学习Javase系列课程的同学们提供参考。 01 什么是继…...
2.4/Q2，Charls最新文章解读
文章题目：The impact of hearing ability on depression among retired middle-aged and elderly individuals in China: the chain mediating role of self-rated health and life satisfaction DOI：10.1186/s41043-025-00791-9 中文标题：中…...
对流对象的理解
在c里，“流”可以理解为数据传输与操作的“介质”。 从输入输出角度来看，有输入流（比如cin）和输出流（cout）。对于输入流，数据通过它从外部设备（例如键盘）“流入”程序内…...
RBAC权限-笔记
1. RBAC模型简介 1.1. RBAC三要素 RBAC权限模型（Role-Based Access Control：基于角色的访问控制）有3个基础组成部分，分别是：用户、角色和权限。它们之间的关系如下图所示： 用户(User）…...
stm32之GPIO函数详解和上机实验
目录 1.LED和蜂鸣器1.1 LED1.2 蜂鸣器 2.实验2.1 库函数：RCC和GPIO2.1.1 RCC函数1. RCC_AHBPeriphClockCmd2. RCC_APB2PeriphClockCmd3. RCC_APB1PeriphClockCmd 2.1.2 GPIO函数1. GPIO_DeInit2. GPIO_AFIODeInit3. GPIO_Init4. GPIO_StructInit5. GPIO_ReadInputDa…...
MsQuick编译和使用
MsQuick编译和使用 编译克隆代码使用cmakevs2022编译 使用示例 编译 克隆代码 git clone --recurse-submodules https://github.com/microsoft/msquic.git使用cmakevs2022编译 然后直接configure之后Generate然后打开vs工程编译即可生成动态库 使用示例 #include <s…...
01 ubuntu中wps桌面快捷键无法使用
文章目录 1. 问题描述：2. 解决方法：3. 结果展示4. 参考 1. 问题描述： 2. 解决方法： 添加权限 chmod 755 ./wps-office-prometheus.desktop 右键选择允许运行 3. 结果展示 修改前 修改后 4. 参考 参考1...
云原生后端架构：重塑后端开发的新范式
📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：后端开发的新时代正在到来 传统的后端开发常常面临如下挑战：部署流程复杂、环境不一致、系统难以扩展、监控能力薄弱、上线流程缓慢。在企业数字化转型、业务快速迭代的大背景下，这些问题暴露得…...
Linux命令-tcpdump
tcpdump 是一个功能强大的网络数据包捕获和分析工具。以下是 tcpdump 命令的完整参数列表及说明： 参数 -a 将网络地址和广播地址转换为名字 tcpdump -a -i eth0-A 以 ASCII 格式打印所有分组，最小化链路层头部信息 tcpdump -A-b 在数据链路层上选择协议…...
分糖果——牛客
链接：登录—专业IT笔试面试备考平台_牛客网 来源：牛客网 题目描述 幼儿园准备了nnn包糖果，每包糖果里有111、222或333颗美味的糖果。现在需要将这些这些糖果平分给两个表现优异的小朋友以作奖励，为了公平公正，需要…...
L0、L2和L∞范数这三种范数的区别
目录 一、解释 1. L0范数：数一数你有多少件行李 2. L2范数：别把行李塞得太满 3. L∞范数：别带任何超重的东西 一句话总结 二、作用 1. L0范数的作用：做减法，只留最重要的…...
[实战]zynq7000设备树自动导出GPIO
目录 zynq7000设备树自动导出GPIO添加设备树节点验证实验 结论 zynq7000设备树自动导出GPIO 今天无聊，掏出我82年产的microzed玩一玩。玩啥好呢，要不点个灯吧。于是，三下五除二，通过linux sys接口以及echo，很快就点亮…...
java六人打分
import java.util.Scanner;public class HelloWorld {public static void main(String[] args) {//打分平均分System.out.println("请输入六个评分");Scanner sc new Scanner(System.in);double[] score new double[6];for(int i0;i<score.length;i){System.ou…...
量子计算浪潮下的安全应对之法
量子计算凭借其强大的计算能力，被传言能够在极短时间内秒级破解传统计算机需耗时漫长岁月（以万年算）才能解开的密码，成为了近年来人们讨论的热点。这看似高深的科技名词在网络安全中又扮演着何种角色？我们应从当前人们…...