0

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

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

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

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

<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)

尝试更新其 textContent 如下所示

targetSlateElement.textContent = "Testing Slate JS"

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

4

0 回答 0