在开发谷歌插件时，我们有时需要向Facebook等网站的contenteditable="true"的div中插入文字。这篇文章将介绍一种解决方案，通过模拟粘贴事件，将文字插入到Facebook的编辑框中。

问题描述

在Facebook等社交媒体平台中，编辑框通常设置为contenteditable="true"。直接插入文字可能会遇到一些困难，因为这些平台对文字输入有特定的处理方式。为了解决这个问题，我们可以使用JavaScript的ClipboardEvent模拟粘贴事件。

解决方案

代码示例

以下是一个完整的代码示例，用于在谷歌插件中向Facebook插入文字：

if (document.body.parentElement.id == "facebook") {
    var dc = this.getDeepestChild(this.inputDom);
    var elementToDispatchEventFrom = dc.parentElement;
    let newEl;
    console.log('dc', dc);
    if (dc.nodeName.toLowerCase() == "br") {
        console.log('进入br');

        // 解决Facebook的contenteditable="true" div的文字插入问题
        const dataTransfer = new DataTransfer();
        dataTransfer.setData('text/plain', this.aiDialogText);
        this.inputDom.dispatchEvent(
            new ClipboardEvent('paste', {
                clipboardData: dataTransfer,
                // 需要这些属性使事件到达Draft的粘贴处理程序
                bubbles: true,
                cancelable: true
            })
        );
        // 清空DataTransfer数据
        dataTransfer.clearData();
        
        // 方法二：但是document.execCommand已过时
        // const el = this.inputDom;
        // el.focus();
        // document.execCommand('insertText', false, this.aiDialogText);
        // el.dispatchEvent(new Event('change', {bubbles: true})); // 通常不需要

    } else {
        console.log('开始', this.inputStart);
        let intendedValue = dc.textContent.substring(0, this.inputStart) + this.aiDialogText + dc.textContent.substring(this.inputStart);
        dc.textContent = intendedValue;
        elementToDispatchEventFrom = elementToDispatchEventFrom.parentElement;
    }
    elementToDispatchEventFrom.dispatchEvent(new InputEvent('input', {bubbles: true}));
} else {
    this.inputDom.innerHTML = this.inputDom.innerHTML.substring(0, this.inputStart) + this.aiDialogText + this.inputDom.innerHTML.substring(this.inputStart);
}

代码解释

1. 检查是否在Facebook页面： 通过检查document.body.parentElement.id是否为"facebook"，确定当前页面是否为Facebook。

2. 获取最深层子节点： 使用自定义方法getDeepestChild获取输入框的最深层子节点。

3. 处理插入：

   • 如果最深层子节点是<br>，则使用ClipboardEvent模拟粘贴事件。
   • 否则，直接修改节点的textContent，并触发input事件以更新UI。

4. 处理非Facebook页面： 在其他页面中，直接修改innerHTML插入文字。

总结

通过使用ClipboardEvent模拟粘贴事件，可以有效地解决在Facebook等平台的contenteditable="true"的div中插入文字的问题。这种方法不仅适用于Facebook，还可以应用于其他类似的平台。

参考资料

• Modify contents of contenteditable div on a Facebook/Twitter post like Grammarly