我正在开发一个需要将文本插入到contenteditable="true"
div(Draftjs
准确地说是基于文本字段)的应用程序。
现在我知道 Draft.js 使用 react 并且应该以这种方式使用它,但在这种情况下,该应用程序已经存在并且这是一个与它配合使用的第三方电子应用程序。
我正在 macOS 上处理在线通知回复,因此我需要将该回复文本粘贴到 DraftJS 字段中,但是,当我这样做时,使用:
document.querySelector('div[contenteditable="true"]').focus();
document.execCommand('insertText', false, 'message');
我能够使用以下方法使其工作:
const event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'message', 0, locale);
但如果消息包含表情符号,则此 API 已弃用且无法正常工作。
有没有什么方法可以做到这一点而不会导致错误?我发现应该替换 initTextEvent 的新 API 只是new Event()
(参见文档),但我不知道它是否支持 textInput 事件。
要使用它,您可以访问https://draftjs.org/并在 chrome 开发工具中使用它。
我真的很感激这里的一些帮助,因为我不知道该怎么做才能让它继续工作。另外,我知道人们是 jquery 的粉丝,但我更喜欢原生 js 解决方案(尽管欢迎任何解决方案)。
编辑:
请注意:我没有使用 react,我想修改的输入字段 (draftjs) 使用的是 react,我想使用原生 js 向其中输入文本。
编辑2:
对于遇到此问题的其他人,我想将文本插入 Facebook 信使文本字段(使用 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);
}
这是typescript代码,因此您可能需要将其更改为使用 js。
它的工作原理是使用在 textField 中插入一个占位符值event.initTextEvent
,然后将该文本替换为:
document.execCommand('selectAll', false, undefined);
document.execCommand('insertText', false, 'text');
在 Chrome 中测试:版本 71.0.3578.98