Pegando resultados satisfactorios en la inserción de tags aleatorias

Estoy usando un campo contentedittable como entrada de usuario para que pueda explotar el formato de texto. Desafortunadamente, he descubierto que cuando un usuario se pega al campo, una gran cantidad de html no sincero viene con él. Solo quiero el texto simple del portapapeles.

¡¿Por qué está pasando esto?!

Un ejemplo truncado:


1...

Solo puede obtener el texto sin formato con un truco. Las versiones recientes de TinyMCE y CKEditor utilizan esta técnica en sus editores basados ​​en iframe:

  1. Detectar un evento Ctrlv / ShiftInsertar usando un controlador de evento de pulsación de tecla
  2. En ese manejador, guarde la selección de usuario actual, agregue un elemento de área de texto fuera de la pantalla (digamos a la izquierda -1000px) al documento, desactive contentEditable y llame a focus() en el área de texto, moviendo así el cursor y redirigiendo efectivamente el pegado
  3. Establezca un temporizador muy breve (digamos 1 milisegundo) en el controlador de eventos para llamar a otra función que almacena el valor del área de texto, elimina el área de texto del documento, vuelve a contentEditable , restaura la selección del usuario y pega el texto.

Tenga en cuenta que esto solo funcionará para los eventos de pegado de teclado y no para pegar desde el contexto o editar menús. El evento de paste sería mejor, pero cuando se dispara, ya es demasiado tarde para redirigir el cursor al área de texto en la mayoría de los navegadores.

Estás obteniendo todas esas tonterías extra porque un elemento contenteditable soporta el tipo text/html MIME. Cuando pega algo del portapapeles, a menudo hay una fase de negociación de contenido:

  • El objective de pegar dice “Apoyo estos tipos de contenido: …”
  • El administrador del portapapeles luego analiza esa lista con el origen de datos para obtener los datos pegados en un formato adecuado para el destino pegado.
  • Y finalmente, los datos se vuelcan en su elemento contenteditable como text/html con todo ese ruido extra.

El proceso puede no ser exactamente como el anterior, pero será similar. Su mejor opción sería, probablemente, agregar un controlador para el evento paste y usar ese controlador para convertir los datos pegados a text/plain .