小编sai*_*nya的帖子

我想通过 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"

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