将文本插入现有/外部 Draftjs 文本字段

我正在开发一个需要将文本插入到contenteditable="true" div (a Draftjs准确地说，基于文本字段）。

现在我知道 Draft.js 使用 React 并且应该以这种方式使用，但在这种情况下，该应用程序已经存在，并且这是与其配合使用的第三方电子应用程序。

我正在 macOS 上进行内联通知回复，因此我需要将该回复文本粘贴到 DraftJS 字段中，但是，当我这样做时，使用：

document.querySelector('div[contenteditable="true"]').focus();
document.execCommand('insertText', false, 'message');

It throws an error:

我能够使用以下方法使其工作：

const event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'message', 0, locale);

但此 API 已被弃用，并且如果消息包含表情符号，则该 API 无法正常工作。

有什么方法可以做到这一点并且不会导致错误吗？ 我发现应该取代 initTextEvent 的新 API 只是new Event() (see docs https://developer.mozilla.org/en-US/docs/Web/API/Event），但我不知道它是否支持textInput事件。

要玩弄它，你可以访问https://draftjs.org/ https://draftjs.org/并在 Chrome 开发工具中使用它。

我真的很感激这里的一些帮助，因为我不知道该怎么做才能让它继续工作。另外，我知道人们是 jquery 的粉丝，但我更喜欢原生 js 解决方案（尽管任何解决方案都是受欢迎的）。

edit:

请注意： 我没有使用react，我想要修改的输入字段（draftjs）正在使用react，并且我想使用本机js向其中输入文本。

edit 2:

对于遇到此问题的其他人，我想将文本插入 Facebook Messenger 文本字段（使用 Draftjs）。

我设法找到了一个可行的解决方法。 它确实使用了已弃用的 API (event.initTextEvent），但这是我发现的唯一有效的方法，即使使用表情符号也是如此。如果您对此有更好的解决方案，请发布答案。它的工作原理如下：

async function sendReply(message: string): Promise<void> {
       const inputField = document.querySelector('[contenteditable="true"]') as HTMLElement;
       if (inputField) {
               const previousMessage = inputField.textContent;
               // Send message
               inputField.focus();
               await insertMessageText(message, inputField);
               (await elementReady('._30yy._38lh._39bl')).click();
               // Restore (possible) previous message
               if (previousMessage) {
                       insertMessageText(previousMessage, inputField);
               }
       }
}

function insertMessageText(text: string, inputField: HTMLElement): void {
       // Workaround: insert placeholder value to get execCommand working
       if (!inputField.textContent) {
               const event = document.createEvent('TextEvent');
               event.initTextEvent('textInput', true, true, window, '_', 0, '');
               inputField.dispatchEvent(event);
       }

       document.execCommand('selectAll', false, undefined);
       document.execCommand('insertText', false, text);
}

这是打字稿代码，因此您可能需要将其更改为使用 js。

它的工作原理是使用以下命令在文本字段中插入占位符值event.initTextEvent，然后将该文本替换为：

document.execCommand('selectAll', false, undefined);
document.execCommand('insertText', false, 'text');

在 Chrome 中测试：版本 71.0.3578.98

尽管这个问题很久以前就被问过并且@JoniVR找到了解决方法，但这可能对其他人有帮助。

我在开发扩展时也遇到了类似的问题。我还尝试了方法 document.execCommand('insertText', false, text)。它在 LinkedIn 上有效，但在 Facebook 上无效。它在错误的节点中插入文本。虽然文档.exec命令 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommandAPI 在某些地方可以工作，但现在已经过时了。

对于 Facebook 和任何其他使用 drafjs 编辑器的网站，我们需要使用以下命令调度粘贴事件数据传输 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer and 剪贴板事件 https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent使 DraftJS 认为文本已粘贴并进行相应处理的 API。

const dataTransfer = new DataTransfer();

function dispatchPaste(target, text) {
  // this may be 'text/html' if it's required
  dataTransfer.setData('text/plain', text);

  target.dispatchEvent(
    new ClipboardEvent('paste', {
      clipboardData: dataTransfer,

      // need these for the event to reach Draft paste handler
      bubbles: true,
      cancelable: true
    })
  );

  // clear DataTransfer Data
  dataTransfer.clearData();
}

检查这个link https://github.com/facebook/draft-js/issues/616#issuecomment-426047799如果需要更多信息。