Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

231
Views
¿Cómo envío una gran cantidad de texto a un elemento contenteditable="true"?

ACTUALIZAR:

Después de investigar un poco más, me di cuenta de que puedo hacer esta pregunta de una manera más específica: ¿Cómo envío una gran cantidad de texto a un elemento contenteditable="true" ?


Estoy trabajando con un sitio web que tiene una API pero no tiene puntos finales que puedan editar contenido. Esta limitación de la API impide que se automatice mi proceso de lanzamiento. Como solución alternativa, he intentado automatizar las tareas con un navegador sin interfaz.

Una de estas tareas consiste en editar el contenido en un editor de texto enriquecido. Este editor de texto enriquecido no tiene ningún elemento de input , por lo que no es tan simple como cambiar el valor de algo. El HTML se parece a esto:

ingrese la descripción de la imagen aquí

Puede consultar la fuente de este editor de texto enriquecido aquí: https://www.slatejs.org/examples/richtext

Intenté usar un código de titiritero (no me importa si la solución a esta respuesta es titiritero o no) para resolver este problema. Funciona, pero es demasiado lento: tengo 30k de texto para enviar al editor, así que await page.keyboard.type(stdin, {delay: 0}); tarda más de diez minutos en ejecutarse. Aquí está mi código:

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

Una cosa que funcionaría (en teoría) es automatizar el copiar y pegar el texto en el editor. Realmente no quiero ir por este camino, porque tiendo a hacer otras cosas mientras me libero. Si mi secuencia de comandos modifica mi portapapeles (o yo lo modifico) mientras se está ejecutando, podría tener resultados impredecibles.

¿Cuál es la forma más rápida de enviar una gran cantidad de texto a un editor de texto enriquecido que no tiene elementos input ? No me importa qué herramienta de automatización se use (preferiría node.js, si es posible) o qué trucos debo usar, siempre que pueda descubrir cómo responder a esta pregunta.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Puede intentarlo con 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(); } };
about 4 years ago · Juan Pablo Isaza Report

0

OK, esto fue tan difícil de entender. Aquí está:

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

Esa cadena compleja engaña al editor haciéndole creer que se ha pegado. Usted proporciona los datos.

Estas son algunas de las fuentes que usé para llegar a esto:

  1. https://stackoverflow.com/a/63643176/61624
  2. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
  3. https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent
  4. https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pageevaluatepagefunction-args
  5. https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!