TinyMCE, CKEditor y Froala le permiten copiar y pegar tablas HTML (por ejemplo, desde un correo electrónico o Wikipedia) directamente en el área de textarea HTML y se conservan las etiquetas y la estructura de la tabla HTML.
Para un ejemplo adicional, mi cliente de correo electrónico basado en la web también puede hacer esto. Puedo copiar una tabla HTML de un correo electrónico que recibí en un correo electrónico que estoy enviando y se conservará la estructura de la tabla.
Entiendo que estos editores no son solo áreas de texto HTML, sino que son editores de texto enriquecido. Mi pregunta: ¿Qué capacidades del navegador permiten la edición de texto enriquecido? ¿Cómo lo hacen?
Por lo que puedo decir, cada vez que copio y pego algo de HTML en un área de textarea , el navegador elimina todas las etiquetas HTML.
La respuesta es que HTML es muy flexible y no está limitado al comportamiento predeterminado de los elementos de entrada para la interacción del usuario. Específicamente, cómo maneja el pegado de texto sin formato, la respuesta es que no es simple.
Afortunadamente, existen algunos editores de texto enriquecido de código abierto. Por ejemplo, en ckeditor es manejado por la canalización del portapapeles que toma el evento de pegado y aplica el estilo correcto en el editor.
Aquí hay una respuesta mínima. Gracias a Andrew Gillis por dirigirme al código fuente de CKEditor que tenía algo similar.
<html> <head> </head> <body> <textarea class="rich" cols="40" rows="8"></textarea> </body> <script> const target = document.querySelector('textarea.rich'); target.addEventListener('paste', (event) => { const clipboard_data = (event.clipboardData || window.clipboardData); const text_paste_content = clipboard_data.getData('text/plain'); const html_paste_content = clipboard_data.getData('text/html'); // This what we see by default console.log(text_paste_content) // This is the raw HTML that can be used to make "rich" content console.log(html_paste_content) }); </script> </html> Cuando pegue en el área de textarea , tendrá acceso al HTML sin formato a través de la variable html_paste_content .
A menudo, estos editores tendrán un elemento <div> visible para el usuario como el elemento que representa la tabla y un elemento oculto <textarea> que contiene el marcado real que se enviará al servidor cuando se envíe el formulario.