编辑器的一些碎碎念

做编辑器将近2年时间,越深入发现坑越多,社区中也没有比较好的资料,基本都是非常浅的资料,比如如何接入、API介绍之类的。

前端编辑器开源的非常多,至少有10+ 个,不过目前知名的主要有Slate、ProseMirror、Quill、Lexical,但是当你深入这些编辑器总会遇到一些问题。因为我一直使用Quill,就聊一些Quill的问题吧。

Quill在Safari浏览器上表现的非常糟糕,但是业务场景中还必须兼容Safari,iOS用的就是Safari。比如最近遇到的一些Safari兼容问题:

① 在Safari浏览器中遇到一个奇葩的问题,加了text- indent属性后,按enter键后输入新的行,发现输入的内容被删除了,还有莫名其妙的多加了换行。给DOM添加不同的style,还会影响MutationObser的结果,Quill在这方面处理得不是很好,也没有提供合适的API来处理这些。

② quill未提供一个好用的table,只有一个功能简陋的table,但是它的功能不满足需求,单元格连基本的换行都没有。业界有一个bettertable,介绍得比较好,但是坑一堆,绝对不能用。还有一个table-embled,这个思路是单元格里再放个quill编辑器,感觉有点蠢,slab用的是这个方案。目前石墨实现得不错,也是table-embled方案,不过它内部实现了一个轻量级的编辑器,也就是说单元格里用的并不是Quill。 

③ quill中自带的list设计得比较简单,序号值比较大的时候文字会重叠。li前面如何支持start属性,如何让序号的颜色和size和文本的颜色保持一致。我想到的思路是序号通过js来计算而不是通过css来实现。至于color和size可以根据文本的颜色来实时计算。

quill中的list有个问题,比如 9998.xxxx,这个列表在Safari浏览器时光标会停在序号之间。需要通过padding和margin来实现。

总的来说,编辑器这条路非常辛苦,需要花费大量的时间来看源码以及主流编辑器的实现思路。最近在看ProseMirror,感觉这个编辑器设计得非常好,不知道坑多不多。

做编辑器比较辛苦,也比较孤独,遇到问题很难找到人一起交流,打算建个群,专门聊聊编辑器的技术问题。如果你正在做编辑器,欢迎加我weixin,可以随时进行技术交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/736636.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSM整合项目(Vue3 + Element - Plus 创建项目基础页面)

文章目录 1.配置Vue启动端口1.修改vue.config.js2.启动 2.安装Element Plus命令行输入 npm install element-plus --save 3.修改Vue3默认样式并自定义一个组件1.修改App.vue1.删除原有结构2.启动项目查看 2.修改HomeView.vue3.删除HelloWorld.vue组件4.创建一个组件 src/compon…

PostgreSQL数据优化——死元组清理

最近遇到一个奇怪的问题,一个百万级的PostgreSQL表,只有3个索引。但是每次执行insert或update语句就要几百ms以上。经过查询发现是一个狠简单的问题,数据库表死元组太多了,需要手动清理。 在 PG 中,update/delete 语句…

SQL: 触发器/存储过程/游标的操作

目录 触发器存储过程创建存储过程修改存储过程删除存储过程执行存储过程 游标待续、更新中 触发器 待更新存储过程 定义 是一组TSQL语句的预编译集合,能实现特定的功能 是一种独立的数据库对象,在服务器上创建和运行 类似于编程语言中的过程或函数分类…

Redis精讲

redis持久化 RDB方式 Redis Database Backup file (redis数据备份文件), 也被叫做redis数据快照. 简单来说就是把内存中的所有数据记录到磁盘中. 快照文件称为RDB文件, 默认是保存在当前运行目录. [rootcentos-zyw ~]# docker exec -it redis redis-cli 127.0.0.1:6379> sav…

开源的python 游戏开发库介绍

本文将为您详细讲解开源的 Python 游戏开发库,以及它们的特点、区别和应用场景。Python 社区提供了多种游戏开发库,这些库可以帮助您在 Python 应用程序中实现游戏逻辑、图形渲染、声音处理等功能。 1. Pygame 特点 - 基于 Python 的游戏开发库。…

算法(6种思想、7种查找)、与数据结构(数组/链表/栈与队列/树)整理总结

算法 除了这里提到的算法思想和查找算法,算法还有别的类型: 排序算法: 对一组元素进行排序的算法。常见的排序算法包括冒泡排序、快速排序、归并排序等。 图算法: 解决图结构相关问题的算法,例如最短路径问题、最小…

Printer Queue(UVA 12100)

网址如下&#xff1a; Printer Queue - UVA 12100 - Virtual Judge (vjudge.net) &#xff08;第三方网站&#xff09; 很简单的一道队列题&#xff0c;模拟一下就可以了 但是我觉得我可以优化一下算法 然而要上高数了 代码如下&#xff1a; #include<queue> #inclu…

《操作系统》的同步、通信与死锁

基础概念 同步 进程互斥&#xff1a;若干进程因相互争夺独占型资源而产生的竞争关系&#xff0c;具有唯一排它性&#xff0c;互斥无法限制访问者对资源的访问顺序&#xff0c;即访问是无序的。 进程同步&#xff1a;我们把异步环境下的一组并发进程因直接制约而互相发送消息…

二叉树的中序遍历

题目描述 现有一棵n个结点的二叉树&#xff08;结点编号为从0到n-1&#xff0c;根结点为0号结点&#xff09;&#xff0c;求这棵二叉树的中序遍历序列。 输入描述 第一行一个整数n​​​​​​​​&#xff08;1≤n≤50​​​​​​​​​​​&#xff09;&#xff0c;表示二…

Docker容器Docker桌面配置镜像加速

打开Docker Desktop应用程序&#xff0c;点击设置 具体配置如下&#xff1a; {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"features": {"buil…

编译Linux内核并修改版本号后缀为学号-Ubuntu22.04中编译安装Linux内核6.7.8

前言&#xff1a;实验课要求下载最新版本Linux内核并修改版本号&#xff0c;本人在Vmware中Ubuntu22.04中实现&#xff0c;花三天时间查阅大量网站资料。记录一下误打误撞成功的过程&#xff0c;希望对你们有帮助。 目录 一、常规安装步骤&猜想Ubuntu与gcc版本过低 二、安…

202003 青少年软件编程(Scratch)等级考试试卷(一级)

202003 青少年软件编程&#xff08;Scratch&#xff09;等级考试试卷&#xff08;一级&#xff09; 第1题&#xff1a;【 单选题】 在Scratch中&#xff0c;以下哪个区域可以展示编程效果&#xff1f; A:代码区 B:舞台区 C:角色区 D:积木区 【正确答案】: B 【试题解析】…

基于PySide2实现调用本地摄像头抓拍并保存照片(Python版本)

因为横向课题需要&#xff0c;这是其中的一个小小的功能&#xff0c;单独拎出来作为一个小demo&#xff0c;方便后续学习使用 项目实现功能&#xff1a; 点击open按钮&#xff0c;摄像头开启&#xff0c;实时捕获周围图像并显示 点击capture按钮&#xff0c;保存摄像头照片&am…

日期工具的逻辑与数据请求函数的完善

src\libs\utils.js 获取当前日期格式 /*** 获取当前日期格式* param {*} field * returns */ function getNowDate(field) {const date new Date()let year date.getFullYear(),month date.getMonth() 1,day date.getDate()switch (field) {case day:return ${year}-${mo…

02- 使用Docker安装RabbitMQ

使用Docker安装RabbitMQ 下载安装镜像 方式一: 启动docker服务,然后在线拉取 # 在线拉取镜像 docker pull rabbitmq:3-management# 使用docker images查看是否已经成功拉取方式二: 从本地加载 ,将RabbitMQ上传到虚拟机中后使用命令加载镜像即可 docker load -i mq.tar启动M…

leetcode 第388场周赛第二题

这道题其实和第一题是很相似的&#xff0c;也是一种贪心的算法&#xff08;话说这周怎么都是贪心和暴力&#xff09; 简单来说就是对于happiness的数组进行排序&#xff0c;用一个变量记录就行了。 思路&#xff1a;对于数组从大到小排序&#xff0c;然后对于happiness[i]-i进…

LLM实施的五个阶段

原文地址&#xff1a;Five Stages Of LLM Implementation 大型语言模型显着提高了对话式人工智能系统的能力&#xff0c;实现了更自然和上下文感知的交互。这导致各个行业越来越多地采用人工智能驱动的聊天机器人和虚拟助手。 2024 年 2 月 20 日 介绍 从LLMs的市场采用情况可以…

【C++】每日一题 92 反转链表

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 class ListNode { public:int val;ListNode* next;ListNode(int _val) {val _val;next nullptr;} };…

AcWing 1211. 蚂蚁感冒

Problem: AcWing 1211. 蚂蚁感冒 文章目录 思路解题方法复杂度Code 思路 这是一个模拟题。题目的意思是&#xff0c;如果一只蚂蚁感冒了&#xff0c;那么它会把感冒传给所有和它相向而行的蚂蚁。所以我们只需要找出所有和第一只蚂蚁相向而行的蚂蚁就可以了。具体来说&#xff0…

vue中的性能优化

Vue.js 性能优化是提高应用性能和用户体验的关键之一。以下是一些常见的 Vue.js 性能优化方法&#xff1a; 使用 Vue Devtools 进行性能分析&#xff1a; Vue Devtools 是一个强大的浏览器扩展&#xff0c;可以帮助开发者实时监测 Vue 应用的性能指标、组件状态和数据流&#x…