标签: slate.js

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

它们的优缺点是什么？

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

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

我已经设法更改正常输入元素的文本，并在模糊时保存数据。我不确定如何在板岩编辑器元素上实现相同的行为。

我尝试使用在板岩编辑器组件上分派事件dispatchEvent，但它不起作用。

<div
  data-slate-editor="true"
  data-key="18"
  contenteditable="true"
  class="
    uta_c_editor__slate-editor uta_c_editor__slate-editor--dictation-disabled
  "
  autocorrect="on"
  spellcheck="false"
  role="textbox"
  data-gramm="false"
  style="
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    -webkit-user-modify: read-write-plaintext-only;
  "
>
  <div data-slate-object="block" data-key="19" style="position: relative">
    <span data-slate-object="text" data-key="20"
      ><span data-slate-leaf="true" data-offset-key="20:0"
        ><span data-slate-string="true">Testing in progress.</span></span
      ></span
    >
  </div>
</div>

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

let changeEvent = new Event('change', { 
'bubbles': true, 
'detail': {
    value: "Testing Slate Js"
 } });

targetSlateElement.dispatchEvent(changeEvent)

尝试更新其文本内容，如下所示：

targetSlateElement.textContent = "Testing Slate JS"

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

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

下图显示了我在说什么：

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

在我的图片中，我希望找到包含“这是我的标题。”的节点，即使它前面有几行空行也是如此。

基本上，如果我在编辑器中写了一堆文本，该如何查找不是空字符串的第一个文本？

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

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

我已经尝试过这样的事情：

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

但这只是返回 null

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

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