嘿，较大家良好！今天咱来聊聊一个挺奇葩的问题：怎么用Chrome 程序，让那个地方的Lexical编辑器自动往里填东西。别担心，这玩意儿挺不容简单搞的，我试了良好久才弄明白。所以我来跟你们分享一下我的经验，保证简洁粗暴，一看就懂，躺平...！

啥是Lexical编辑器？它咋回事儿？

Lexical编辑器啊，就是那种较高级的富有文本编辑器。比你以前用的那种简洁的文本框强较大更多了。它用React写的，挺流行的。但是！你想啊，你要是想给它自动输入内容呢？直接改DOM不行啊！它那内部结构繁杂得很，你随便改改，有可能就出问题了。

为哪些直接改DOM不行？ 啥玩意儿？

当你.… 你们确定会问：那直接把文字塞进去不行吗？当然不行啦！Lexical编辑器它不是傻子，它自己有规则的。你直接改了`innerText`哪些的，它有可能根本没注意到啊！就像你跟一个不听话的较小孩说话一样。

InputEvent是哪些鬼？ 啥作用？

InputEvent：神奇的事件

说到点子上了。 良好嘞！这时候就得用一个叫`InputEvent`的东西了。当前这个`InputEvent`啊，就像一个迅速递员一样。你能够告诉它：“嘿！我要给当前这个编辑器输入一些文字！”然后迅速递员就把信息送到编辑器那里去。当前这个迅速递员很靠谱的，了解该怎么处理。

创建InputEvent

咱得先创建一个`InputEvent`对象。里面要说清楚几个关键信息：，别纠结...

• type: 一定要写成 `'input'` ，不然人家不认识你
• data: 就是你要输入的文字内容。比如 "你良好世界！"
• inputType: 告诉人家这是要输入文字啊! 一般写 `insertText` 。
• dataTransfer: 当前这个一般不用管吧...
• isComposing: 这玩意儿良好像是用来判断是不是在输入法的时候用的...咱先设成 `false` ，省事儿.
• bubbles : 要设置为 `true`, 让事件冒泡, 这样才能被Lexical捕获到!

怎样找到那个地方的Lexical编辑器元素？

找到你的目标元素

这步很十分沉关键哦！你需要找到那个地方的在页面上的Lexical编辑器元素。 你能够用 Chro 实锤。 me 的开发者工具打开页面然后找到那个地方的包含 Lexical 编辑器的 `` 或者其他标签。

const lexicalEditor = document.querySelector;

//注意把 .your-lexical-e 复盘一下。 ditor-class 改成你实际的选择器!

 // 举个例子： const lexicalEditor = '';

//或者根据你的情况调整选择器。

代码实现：自动化输入文本！

一步一步搞定

也是没谁了。 先来看, 确保你的 JavaScript 代码在页面加载完成后运行. 然后, 采用上面提到的方法找到 Lexical 编辑器的 DOM 元素. 接着, 创建一个 InputEvent 对象, 设置良好 type, data 等属性. 最后再来看, 把当前这个 InputEvent 发送给 Lexical 编辑器的 DOM 元素! ` 方法) if { // 确保元素存在 const inputEvent = new InputEvent;//派发事件 lexicalEditor.dispatchEvent; console.log;} else { console.log;}

完整示例代码

 window.onload = function { // 等页面加载完毕后落实 const lexicalEditor = document.querySelector; if  { const inputEvent = new InputEvent; lexicalEditor.dispatchEvent; console.log; } else { console.log; } };

一下

怎么样？是不是很简洁？ 其实也没那么不容简单啦! 不过要记住几点:，切记...

• 一定要准确地找到 Lexical 编辑器元素的选择器!
• InputEvent 的属性一定要设置正确!特别是 bubbles=true! 很十分沉关键哦!
• 调试的时候更多看控制台输出信息! 能够帮你排查问题!

遇到问题怎么办？