如何将大量文本发送到 contenteditable="true" 元素中？

Question

更新：

经过更多研究，我意识到我可以以更具体的方式提出这个问题：如何将大量文本发送到

contenteditable="true"

元素中？

---

我正在使用一个具有 API 的网站，但它没有任何可以编辑内容的端点。此 API 限制阻止我的发布过程实现自动化。作为解决方法，我尝试使用无头浏览器自动执行任务。

其中一项任务涉及在富文本编辑器中编辑内容。这个富文本编辑器没有任何

input

元素，因此这并不像更改某些值那么简单。 HTML 看起来与此类似：

您可以在这里查看这个富文本编辑器的源代码：https://www.slatejs.org/examples/richtext

我尝试使用一些 puppeteer 代码（我不在乎这个答案的解决方案是否是 puppeteer ）来解决这个问题。它可以工作，但速度太慢：我有 30k 文本要发送给编辑器，因此

await page.keyboard.type(stdin, {delay: 0});

需要十多分钟才能运行。这是我的代码：

export const edit = async () => {
  const browser = await launch({ headless: false });
  const page = await browser.newPage();
  try {
    await page.setUserAgent(
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0'
    );
    await page.goto('https://www.slatejs.org/examples/richtext');
    await page.waitForSelector('[data-slate-string="true"]');
    await page.click('[data-slate-string="true"]');
 
    // select all
    await page.keyboard.down('Control');
    await page.keyboard.press('a');
    await page.keyboard.up('Control');

    // clear everything in the rich text editor
    await page.keyboard.press('Backspace');

    // type in new content
    await page.keyboard.type(aLargeAmountOfText, {delay: 0}); // this takes over 10 minutes!  
  } finally {
    await page.screenshot({ path: 'example.png' });
    await browser.close();
  }
};

可以工作的一件事（理论上）是自动将文本复制并粘贴到编辑器中。我真的不想走这条路，因为我倾向于在发布时做其他事情。如果我的脚本在运行时修改了我的剪贴板（或者我修改了它），则可能会产生不可预测的结果。

将大量文本发送到没有

input

元素的富文本编辑器的最快方法是什么？我不在乎使用什么自动化工具（如果可能的话，我更喜欢 Node.js），或者我必须使用什么技巧，只要我能弄清楚如何回答这个问题即可。

Answer 1

好吧，这太难理解了。这是：

    await page.goto(url);

    const richTextEditorSelector = '[contenteditable="true"]';
    await page.waitForSelector(richTextEditorSelector);
    await page.focus(richTextEditorSelector);

    // select all
    await page.evaluate(() => {
      return Promise.resolve(document.execCommand('selectAll'));
    });

    const pasteReplacementText = `
const dataTransfer = new DataTransfer();

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

  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();
}

dispatchPaste(document.querySelectorAll('${richTextEditorSelector}')[0]);
`;

    console.log(`replacementText=

${pasteReplacementText}`); // leaving this here because it may help others troubleshoot
    await page.evaluate(pasteReplacementText);

这个复杂的字符串会让编辑器误以为发生了粘贴。您提供数据。

以下是我曾经提出过这个问题的一些来源：

https://stackoverflow.com/a/63643176/61624
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent
https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pageevaluatepagefunction-args
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Answer 2

page.$eval

:

export const edit = async () => {
  const browser = await launch({ headless: false });
  const page = await browser.newPage();
  try {
    await page.setUserAgent(
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0'
    );
    await page.goto('https://www.slatejs.org/examples/richtext');
    await page.waitForSelector('[contenteditable="true"]');
    await page.$eval('[contenteditable="true"]', (e) => e.textContent = aLargeAmountOfText);
  } finally {
    await page.screenshot({ path: 'example.png' });
    await browser.close();
  }
};

Answer 3

有时直接将数据倒入节点不会启动需要某些关键输入的进程。