首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

喜报!Fluent Editor 开源富文本迎来了第一位贡献者!

编程知识
2024年09月01日 08:05

你好,我是 Kagol,个人公众号:前端开源星球

2024年8月20日,刚开源一周的富文本 Fluent Editor 迎来了第一位贡献者:zzxming

1 Bug 描述

zzxming 同学修复了 Fluent Editor 富文本表格模块的一个隐藏 Bug:

fix: table module can't save background color #10

缺陷描述:通过表格右键菜单设置单元格背景色之后,生成的 delta 中缺失单元格背景色信息,导致通过 setContents 方法设置的富文本表格单元格丢失了背景色。

这样描述可能比较绕口,zzxming 同学非常贴心地做了一个 Demo 用于复现该问题:

最小可复现 Demo

2 Bug 复现步骤

第一步:在表格单元格中右键,给单元格设置一个背景色。

第二步:通过 editor.getContents() 获取到的对应的 delta。

const delta = {  
    "ops": [  
        {  
            "attributes": {  
                "table-col": {  
                    "width": "100"  
                }  
            },  
            "insert": "\n"  
        },  
        {  
            "attributes": {  
                "table-cell-line": {  
                    "rowspan": "1",  
                    "colspan": "1",  
                    "row": "row-xapy",  
                    "cell": "cell-e89w"  
                },  
                "row": "row-xapy",  
                "cell": "cell-e89w",  
                "rowspan": "1",  
                "colspan": "1"  
            },  
            "insert": "\n"  
        }  
    ]  
}

可以看到 delta 没有携带单元格背景色信息。

第三步:将 delta 通过 setContents 方法回填到富文本中,单元格没有背景色。

editor.setContents(delta)

3 解决方案

修改文件:packages/fluent-editor/src/table/formats/table.ts

修复该问题主要分成以下步骤:

  • 把 delta 中的 cell-bg 设置到 qlbt-cell-line 节点的 data-cell-bg 属性中
  • 从 qlbt-cell-line 节点中拿到 data-cell-bg 的值,回填到单元格背景色
  • 将 DOM 节点中的 data-cell-bg 值,保存到 delta 中

3.1 将 delta 中 cell-bg 信息设置到 DOM 节点中

将 delta 信息设置到 DOM 节点中,一般是在 blot 的 static create 方法中进行。

static create(value) {
  const node = super.create(value);

  ...

-  CELL_ATTRIBUTES.forEach((attrName) => {
-  node.setAttribute(`data-${attrName}`, value[attrName] || CELL_DEFAULT[attrName]);
+  [...CELL_ATTRIBUTES, 'cell-bg'].forEach((attrName) => {
+    const keyValue = value[attrName] || CELL_DEFAULT[attrName];
+    keyValue && node.setAttribute(`data-${attrName}`, keyValue);
  });

  ...

  return node;
}

先从 delta(value) 中拿到 cell-bg 信息,然后设置到 DOM 节点的 data-cell-bg 属性中。

value 的结构:

{
  rowspan: '1',
  colspan: '1',
  row: 'row-xapy',
  cell: 'cell-e89w',
  cell-bg: '#ffff00'
}

3.2 回填 cell-bg 到单元格背景色

zzxming 同学不仅修复了这个 Bug,还做了一个小重构,将设置单元格背景色这个功能抽成了一个函数 setCellBg,并且加了详细的注释,点赞👍

/** this method is for TableCellLine to change cell background color 
 *  if use `format('cell-bg', value)` will loop trigger 
 *  TableCellLine.optimize -> TableCell.format -> TableCellLine.optimize ...
 */
setCellBg(value?: string) {
  if (value) {
    this.domNode.style.backgroundColor = value
  } else {
    this.domNode.style.backgroundColor = 'initial'
  }
}

在 TableCellLine 类的 optimize 方法中调用该函数,以便把 delta 中的 cell-bg 颜色设置到表格单元格。

3.3 将 cell-bg 信息保存到 delta 中

将 DOM 的信息保存到 delta 中,一般是在 blot 的 static format 方法中进行。

在 TableCellLine 类的 static format 方法中调用了 reduceFormats 函数,给该函数传入 cell-bg 信息。

static formats(domNode) {
  const formats = {};
  if (formats['list']) {
    formats['list'] = domNode.classList.item(0);
  }
-  return reduceFormats(domNode, formats);
+  return reduceFormats(domNode, formats, ['cell-bg']);
}

在 reduceFormats 中获取到 DOM 中的 data-cell-bg,并设置到 delta 数据中。

- function reduceFormats(domNode, formats) {
-   return CELL_ATTRIBUTES.concat(CELL_IDENTITY_KEYS).reduce((tableFormats, attribute) => {
+ function reduceFormats(domNode:HTMLElement, formats:Record<string, any>, extraFormat: string[] = []) {
+   return [...CELL_ATTRIBUTES, ...CELL_IDENTITY_KEYS, ...extraFormat].reduce((tableFormats, attribute) => {
    if (domNode.hasAttribute(`data-${attribute}`)) {
      tableFormats[attribute] = domNode.getAttribute(`data-${attribute}`) || undefined;
    }
    return tableFormats;
  }, formats);
}

该问题已解决,可以通过以下链接进行验证:

详见 zzxming 同学提交的 PR:

fix: table module can't save background color #10

3.4 优化点

这里其实有个优化点(欢迎 PR 👏):

目前 zzxming 同学在 static create 和 reduceFormats 方法中传入 cell-bg 都是直接增加的,其实可以放到 CELL_ATTRIBUTES 常量数组中,合理利用现有的代码😋。

- export const CELL_ATTRIBUTES = ['rowspan', 'colspan'];
+ export const CELL_ATTRIBUTES = ['rowspan', 'colspan', 'cell-bg'];

感谢 zzxming 同学对 Fluent Editor 的贡献,目前已发布 v3.18.3 版本,欢迎朋友们使用 Fluent Editor,感兴趣也欢迎一起参与共建。

往期文章推荐:

联系我们

GitHub:https://github.com/opentiny/tiny-vue(欢迎 Star ⭐)

官网:https://opentiny.design/tiny-vue

B站:https://space.bilibili.com/15284299

个人博客:https://kagol.github.io/blogs

小助手微信:opentiny-official

公众号:OpenTiny

From:https://www.cnblogs.com/kagol/p/18391016
本文地址: http://www.shuzixingkong.net/article/1623
0评论
提交 加载更多评论
其他文章 全网最适合入门的面向对象编程教程:42 Python常用复合数据类型-collections容器数据类型
在Python中,collections模块提供了一组高效、功能强大的容器数据类型,扩展了内置的基础数据类型(如list、tuple、dict等),这些容器数据类型在处理特定问题时,能够提供更简洁、更高效的解决方案。
全网最适合入门的面向对象编程教程:42 Python常用复合数据类型-collections容器数据类型 全网最适合入门的面向对象编程教程:42 Python常用复合数据类型-collections容器数据类型 全网最适合入门的面向对象编程教程:42 Python常用复合数据类型-collections容器数据类型
大请求、请求超时问题
耗时很长的请求怎么处理?比如数据量大的。业务逻辑处理时间太久,以至于响应超时 这里的超时响应指的是ReadTimeOut,即发送请求内容完毕到接收响应数据开始的这段时间。普通HTTP请求可能在这段时间没有响应超时。 HTTP分块传输(Chunked Transfer Encoding)中每个数据块的
大请求、请求超时问题 大请求、请求超时问题 大请求、请求超时问题
STL 改造红黑树 模拟封装set和map
改造红黑树 目录改造红黑树适配STL迭代器的红黑树基本结构RBTreeNode__RBTree_iteratorRBTree完整代码封装的set封装的map 在初次看STL中实现红黑树的源码时有些不理解,然后自己尝试对set以RBTree&lt;K,K&gt;的方式封装红黑树的迭代器;实现过程发现,
C++ lambda 引用捕获临时对象引发 coredump 的案例
今天复习前几年在项目过程中积累的各类技术案例,有一个小的 coredump 案例,当时小组里几位较资深的同事都没看出来,后面是我周末查了两三个小时解决掉的,今天再做一次系统的总结,给出一个复现的案例代码,案例代码比较简单,便于学习理解。 1. 简介 原则:临时对象不应该被 lambda 引用捕获,因
C++ lambda 引用捕获临时对象引发 coredump 的案例
MySQL的索引原理及使用
B+树的最底层叶子节点包含了所有的索引项。从图上可以看到,B+树在查找数据的时候,由于数据都存放在最底层的叶子节点上,所以每次查找都需要检索到叶子节点才能查询到数据。所以在需要查询数据的情况下每次的磁盘的IO跟树高有直接的关系,但是从另一方面来说,由于数据都被放到了叶子节点,
MySQL的索引原理及使用 MySQL的索引原理及使用 MySQL的索引原理及使用
一个操作系统的设计与实现——第23章 快速系统调用
23.1 什么是快速系统调用 系统调用是操作系统为3特权级任务提供服务的一种手段。在32位操作系统中,我们通过中断实现了系统调用。由于系统调用是一个使用非常频繁的机制,且中断也不是专门为系统调用设计的,因此,64位CPU提供了系统调用的专用机制:快速系统调用。 快速系统调用由专用的syscall指令
Dify大语言模型应用开发平台新手必备:安装注册与私有服务器部署全步骤
Dify简介 Dify是一个开源的大语言模型(Large Language Model, LLM)应用开发平台。它融合了后端即服务(Backend as a Service, BaaS)和LLMOps的理念,旨在帮助开发者,甚至是非技术人员,能够快速搭建和部署生成式AI应用程序。 Dify的主要特点
Dify大语言模型应用开发平台新手必备:安装注册与私有服务器部署全步骤 Dify大语言模型应用开发平台新手必备:安装注册与私有服务器部署全步骤 Dify大语言模型应用开发平台新手必备:安装注册与私有服务器部署全步骤
gcc/g++编译
编译工具链 我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment),集成开发环境可以极大地方便我们程序员编写程序,但是配置起来也相对麻烦。在 Linux 环境下,我们用的是编译工具链,又叫软件开发工具包(SDK:Software De
gcc/g++编译 gcc/g++编译 gcc/g++编译