问题标签 [slate.js]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1149 浏览

javascript - filterDescendants 和 findDescendant 与 slate.js

我正在使用 slate.js 制作一个所见即所得的编辑器,我正试图找到第一个带有文本的节点。

下图显示了我在说什么:

Slate.js 找到第一个文本图片

在我的图片中,我想找到包含“this is my title.”的节点,即使它之前有几行空行。

基本上,如果我在编辑器中编写了一堆文本,我如何找到第一个不是空字符串的文本?

浏览文档,我发现filterDescendants和 findDescendants 函数似乎可以满足我的要求。

但是,我不清楚如何使用它们。

我试过这样的事情:

this.state.state.startBlock.findDescendant((d) => d.text !== "")

但这只是返回null

文档说这findDescendant将“通过迭代器深入查找后代节点”,其中iterator是一个函数,但没有提供您将在此处传递的函数类型的示例。

有没有人有任何想法或例子?

0 投票
2 回答
1776 浏览

reactjs - 如何在 slatejs 中生成自定义密钥?

我正在尝试制作所见即所得的编辑器,可以对选定的文本进行注释。

首先,我使用了 Draft.js。但是,它不适合使用 key 来指向带注释的文本,因为 Draft.js 的实体键是在重复选择时启动的。

所以,我在搜索与这些东西相关的其他库时找到了 slatejs。

slatejs 有“setKeyGenerator”实用程序。但是,我找不到有关 slatejs 的“setKeyGenerator”的任何信息。该实用程序只是设置功能,如下所示。

而且我不知道如何使用此功能生成密钥。

那么,任何人都知道如何使用此功能或对注释选定文本有任何想法吗?

0 投票
1 回答
633 浏览

slate.js - 当某个元素被移除时触发事件

我正在使用出色的Slate编辑器构建一个编辑器,但我在完成某项任务时遇到了麻烦。我已经构建了一个拖放式图片上传,可以成功上传图片(通过 API,与 Slate 无关)并将它们插入到编辑器中。但是,如果用户在编辑器中删除它,我想从服务器中删除它。当某种node类型从 中删除时,有没有办法触发函数state

0 投票
0 回答
1552 浏览

javascript - Slatejs 将断线反序列化为新片段

我正在使用 slatejs,并且我有以下 html 行, <p>Line one<br /> Line two</p>

我目前的规则br如下,

但这会创建一个空行,这会导致退格问题,我尝试在序列化中传递一个新块,但这给了我相同的结果。

我的反序列化规则应该是什么,以便我的文本在 slate 编辑器中呈现如下。

0 投票
0 回答
997 浏览

reactjs - Slate.js - 气球工具栏错误定位

我正在尝试在 slate.js 上构建一个编辑器

从 Slate 官方示例中复制了大部分代码。

https://github.com/ianstormtaylor/slate/blob/master/examples/hovering-menu/index.js

每当我选择一个文本时,一切都很完美。定位很流畅,就像一个魅力。但是在选择/取消选择标记操作后定位错误。


这是示例 gif。https://i.stack.imgur.com/OWvMU.gif

我改变了菜单类名和 HOC 悬停菜单。

编辑器部分略有不同,但没什么。

0 投票
2 回答
607 浏览

reactjs - Slate:如何查找编辑器何时完全渲染

我想要一个呈现Slate编辑器的页面,从 API 检索文档,然后在编辑器更新并完成重新呈现时打印窗口。如何识别编辑器何时重新渲染?

示例代码:

我尝试componentDidUpdate在父组件中使用:

但是该函数在编辑器完全呈现之前被触发,因此文本不会显示在“打印”对话框中:

componentDidUpdate 过早

0 投票
1 回答
2904 浏览

slate.js - 如何在 slate.js 中获取当前行

如何在Slate.jsonChange的oronKeyDown方法中获取当前行或当前编辑的节点?

我正在尝试在特定行的属性中添加一个updatedAtcreatedAt参数。data

这是我正在尝试做的概念证明:

这将遍历每个节点并createdAt在数据中添加一个属性(如果尚未存在)。这显然不是很好的代码,因为它循环遍历每个节点并且必须为每个节点反序列化不可变数据对象,但它希望能说明我想要做什么。

如何仅为当前节点设置数据属性?

0 投票
1 回答
926 浏览

reactjs - 多个 Slate.js 编辑器/防止 redux 重新渲染父组件

我正在尝试将多个 Slate.js 文本编辑器字段添加到一页中。到目前为止,我的主要组件包含一个按钮,单击该按钮会在我的 redux 存储中将 slate 值附加到数组 slateValues 中。然后在渲染函数中映射该数组,并为每个条目返回一个 SlateEditor 组件,该组件本质上呈现具有一些自定义格式/功能的标准 Slate 编辑器组件。

我的问题是 Slate 使用 onChange 函数来处理对值的更改。处理本地状态中的这些更改可以正常工作,但是如何将其传递到 redux 存储中?直接在 onChange 中更新 redux 存储会导致父组件重新渲染,然后以无限循环结束(我假设这会再次触发 onChange,从而触发重新渲染等)。

我最初将值作为 props 传递到 SlateEditor 组件中,然后尝试直接从 redux 存储中读取子组件(SlateEditor)中的值。

我的最终目标是将 slateValues 作为“块”存储在数据库中。有想法该怎么解决这个吗?谢谢

0 投票
0 回答
1169 浏览

slate.js - 如何在 Slate.js 编辑器中的精确块之后添加另一个块?

此代码使用匹配的文本更改块的类型。
如何在这个之后添加另一个块Slate.js

0 投票
3 回答
1437 浏览

selenium - 使用 Selenium 或 Cypress 进行测试时如何在 slate.js 上触发更改事件

我正在尝试找到一种方法来在进行 E2E 测试(使用 selenium 或 cypress)和 slate.js 时模拟“更改”事件

在我们的 UI 中,当用户点击一个词时,我们会弹出一个模态框(与该词相关)。我无法做到这一点,因为我无法触发更改事件