哎呀，说到Chrome ，尤其是在想搞点富有文本编辑器的自动化，那可真实是让人头较大。我最近就碰上个项目，要用Chrome 来自动往React Lexical编辑器里塞东西。这玩意儿比直接修改DOM那可要繁杂更多了简直是噩梦！别问我为哪些，反正就是这样。

啥情况？为哪些直接改DOM不行？

拖进度。 你有可能觉得很简洁，对吧？直接找到Lexical编辑器的那个地方的div，然后用`innerText`或者模拟点击事件就行了。但是！你错了！Lexical当前这个编辑器啊，它自己维护着一个内部的世界，啥都自己管。它对DOM的改动可是很严格的，根本不管你随便乱改。

你想想看，你直接改了DOM，Lexical的内部状态就跟不上来了。它不了解你加了啥内容，也不了解咋样渲染。最终还是结果是呢？要么内容没体现出来要么体现不正确。简直是灾不容简单，看好你哦！！

解决方案：分派InputEvent – 这是仅有能行的办法

请大家务必... 经过一番苦苦挣扎和查阅资料，我终于发觉了一个办法：**分派InputEvent**。 简洁来说就是模拟用户输入的感觉给编辑器发送一个信号。

InputEvent到底是哪些鬼？

InputEvent啊，就是一个用来模拟用户输入操作的事件。你能够把它想象成你在键盘上敲击一个键一样的东西。你能够指定事件的类型，还能够传递一些数据给事件接收者。

怎么分派InputEvent？

const textToInsert = '您的文本内容将在此处自动输入。'; // 你要插入的内容啦!
const inputEvent = new InputEvent('input', {  // 创建一个崭新的input事件对象
  data: textToInsert,          // 要插入的数据 
  inputType: 'insertText',     // 事件类型    很十分沉关键！  其他类型有可能不行哦!  比如'deleteText' 等等... 搞不良好会出问题!  我也不了解!反正试试呗! haha... 真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! , // 事件类型  或者其他的根据你的情况调整一下哦~ 不然没用的! 我也不了解怎么说,反正试试吧.真实的良好烦!!! }, { bubbles: true });
if  {  // 检查Lexical编辑器元素有没有存在  如果不存在就直接跳过啊喂！不要问我为哪些我要这么啰嗦啊!! I don't know.. really!} { inputEvent.dispatchEvent; ;} else { ;}

代码示例

是吧？ 定位Lexical编辑器的DOM元素：先来看你要找到那个地方的Lexical编辑器的根元素。 通常它是一个有特定class或者ID的div之类的东西。 在 Chrome 的内容脚本里你能够用 `document.querySelector` 或者 `document.getElementById` 来找它。 创建InputEvent实例： 采用 `new InputEvent` 创建一个崭新的输入事件。 关键配置项包括 `inputType` 和 `data` 分派InputEvent： 将创建良好的 `inputEvent` 分派到之前定位到的 Lexical 编辑器的 DOM 元素上。

 //虚假设 Lexical 编辑器 DOM 元素的 class 名为 "my-lexical-editor" const lexicalEditor = document.querySelector;
if  {
   const textToInsert = '这是我手动添加的文字!';
   const inputEvent = new InputEvent('input', {
      data: textToInsert,
      inputType: 'insertText',
   });
   lexicalEditor.dispatchEvent;
   console.log;
} else {
    console.log;
}

十分沉关键提示：选择器要对准！

这里特别强较大调一点：**你需要把`.your_editor_root_class`换成你实际页面上的那个地方的CSS选择器**。 哈基米！ 如果没有合适的class或者id的话那你得仔细检查页面的

一些较小技巧和注意事项

• 尝试不同的inputType值： 如果`insertText`不起作用的话能够尝试其他值比如 `deleteText`, `insertNode`, etc.。但最良好先看看页面的源代码有没有特别指定的inputType
• 处理异常： 在实际采用中一定要加上错误处理逻辑来避免程序崩溃
• 注意页面加载时间段： 要确保在Lexical编辑器加载完毕之后再落实这段代码否则有可能会出错
• 测试测试再测试！ 更多跑几个测试场景才能保证程序的平稳性

总而言之自动化React Lexical输入确实有点麻烦。 不过只要掌握了分派InputEvent当前这个技巧就能解决较大一部分问题. 希望这篇文章能帮到你! 如果还有哪些问题欢迎留言探讨，这东西...！