问题标签 [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 投票
0 回答
1394 浏览

richtextbox - 石板与散文镜

我需要为我的 React 应用程序构建一个富文本编辑器。在使用 Draft.js 一个月后,我发现它的可配置性不足以满足我的需要。我在SlateProseMirror之间做出决定。

它们各自的优缺点是什么?

0 投票
1 回答
235 浏览

slate.js - 如何获取新插入的内联的兄弟姐妹?

以下代码不起作用,我仅在代码第二次运行时才看到第一个插入的实体:

插入内联后立即insertedDeletionnull。我应该在哪里检查内联是否存在?有回调吗?

0 投票
1 回答
898 浏览

next.js - 新 api 中的 Slate.js getBlocks()?

这就是我过去在 ^0.42.2 版的 slate 文本编辑器中获取块的方式。

现在它经历了重大变化,它的 api 完全改变了,我看不到任何例子如何从它的 DOM 中获取节点。

我试过这个,但我得到了错误:无法在节点中的路径 [0] 找到后代:{“children”:[],“operations”:[],“selection”:null,“marks”:null,“history” :{"撤消":[],"重做":[]}}

我想选择节点的第一个元素作为标题,然后将博客保存到数据库中。过去 2 天我无法进步,我阅读了整个 slate.js api,阅读了 github 中几乎所有无法弄清楚的问题。

当我写这篇文章时,我收到一条错误消息“myValue is not iterable”。然后我切换到这个:

现在两个值都返回未定义。这是我在文本编辑器上的值:

在此处输入图像描述

0 投票
1 回答
885 浏览

reactjs - 为什么当底层组件重新渲染时popper会跳到左上角?

我正在使用 Material-UI Popper 组件(它又使用 popper.js)来创建一个悬停工具栏。在大多数情况下,它运行良好,除了一种奇怪的行为:

  1. 选择一些文本:悬停的工具栏出现在文本上方 - 正如预期的那样。
  2. 选择工具栏中的任何按钮:执行相应的操作。但是,工具栏会跳到窗口的左上角。见下文。

在此处输入图像描述

您可以在我的 Storybook中尝试这种行为- 只需选择一些文本并单击其中一个“T”按钮。

基本问题围绕popper的定位:

  1. 当用户选择一些文本时,会创建一个虚假的虚拟元素并将其作为锚元素传递给 popper。Popper 使用它anchorEl来定位悬停工具栏。到现在为止还挺好。
  2. 当用户单击工具栏中的按钮时,悬停的工具栏会跳到窗口的左上角。

我猜这是因为当底层组件重新渲染时,锚元素会以某种方式丢失。我不知道为什么,但这只是我的理论。有人可以帮我解决这个问题吗?

计算 的代码anchorEl位于 ReactuseEffect()中。我已确保 的依赖项列表useEffect是准确的。我可以看到,当工具栏跳转时,useEffect()没有被调用,这意味着anchorEl没有被重新计算。这让我相信工具栏应该在当前位置保持原样,而不是跳转到 (0,0)。但这并没有发生:-(。

这是useEffect()工具栏组件内的代码。你可以在我的 repo中找到完整的代码。任何帮助将非常感激。

0 投票
1 回答
299 浏览

javascript - 使用 Slate.js 提及 Twitter 风格(股票)

我正在构建一个笔记应用程序,对于文本,我使用 Slate.js 编辑器。Twitter提及也适用于这样的股票在此处输入图像描述

/\$[a-zA-Z]{1,6}/如果是真的,它基本上变成了提及。我尝试的是使用normalizeNode回调来更改正则表达式是否匹配,方法是删除文本并在该位置插入一个新节点,但到目前为止我一直没有成功。

Slate.js 也有一组很好的示例,但遗憾的是没有找到任何示例来演示我正在尝试做的事情。实现此功能的好方法是什么?我认为它是通过使用是错误的normalizeNode吗?

0 投票
0 回答
73 浏览

reactjs - 如何在不触发 onChange 的情况下将更改应用于 slatejs react 编辑器?

如何在不触发 onChange 的情况下将更改应用于 slatejs react 编辑器?

我记得在 slatejs 文档中读到,您可以调用一些方法来将更改应用到编辑器,而无需触发编辑器的 onChange 方法。

0 投票
0 回答
370 浏览

javascript - 在 Slate.js 编辑器中启用自动链接

我是 js 新手,我想在 Slate.js 编辑器中启用自动链接。例如。当我们在任何编辑器中键入www.google.com时,它会将其转换为可点击的链接。

我希望当输入链接并按空格时,它应该被转换为可点击链接。

这是我当前的代码,所有其他 SHORTCUTS 都很好,但是当我尝试插入 Link 时,它没有显示任何内容。原因是我不知道如何在 Childern 中合并链接。链接验证逻辑很好。我所需要的只是当我插入链接并按空格时它应该向我显示一个可点击的链接..

0 投票
0 回答
494 浏览

javascript - 如何使用 javascript(DOM 操作)更改 slate 编辑器值

我想通过 javascript 使用 DOM 操作来更改 slate 编辑器中的文本。

动态更改填充到特定网页中可编辑组件中的值。该网站结合了简单的输入元素和石板编辑器。一旦焦点离开它们,输入到这些字段中的值就会被保存。

我已经设法更改了普通输入元素的文本并模糊了保存的数据。我不确定如何在 slate 编辑器元素上实现相同的行为。高度紧急的需要。任何帮助深表感谢。

我曾尝试使用 dispatchEvent 在 slate 编辑器组件上分派事件,但它不起作用。

尝试在此元素上调度以下事件。

尝试更新其 textContent 如下所示

上面的方法确实改变了它的内容值,但是在模糊时它会将内容重置为旧内容。

0 投票
0 回答
102 浏览

reactjs - 我无法设置反应门户组件的样式

我有一个门户组件:

我以这种方式渲染它:

但是样式不生效。当我查看 devtools 时,没有样式。就像他们被忽略一样。

当我从 HoveringToolbar 组件中删除 Portal 包装器时,一切正常。问题是什么?

编辑:我发现我可以使用 js 设置样式并且它可以工作,但仍然不明白为什么我不能使用styleclass标签来设置样式。

0 投票
1 回答
56 浏览

javascript - 在Slate.js编辑器中编辑的数据在data based中保存为[Object],[Object]。如何使这个Object成为有意义的内容?

我正在使用一个名为 slate-plugins 的 slate.js 框架来构建一个编辑器。它可以将数据保存在数据库中,但数据在数据库中保存为 [Obj],[Obj] 而不是 HTML 数据。因此,在前端调用数据时,它显示为 [Obj][Obj] 而不是我写的实际内容。我现在应该做什么