¿Cómo puedo eliminar los estilos en línea al copiar nodos de texto dentro de un div que tiene el atributo de contenido editables?
Mientras escribía una función de copia de texto para un editor de texto enriquecido, me encontré con un problema. Cuando intento obtener el texto almacenado en un div con el atributo contenteditable en el portapapeles, se envuelve con muchos estilos en línea. No quiero que tenga estilos en línea porque aumentará el tamaño del cuerpo.
- Define una etiqueta div y un evento de pegar.
<div contenteditable="" id="test" style="min-width:600px; min-height: 800px;"></div>
document.getElementById("test").addEventListener("paste", (e)=>{
e.preventDefault();
console.log(e.clipboardData.getData("text/html"));
})
- Escribe algún texto en la etiqueta div.
- Selecciona las subcadenas de rango y cópialas.
- Se imprimirá como se muestra a continuación.
<meta charset='utf-8'><span style="color: rgb(0, 0, 0); font-family: &quot;Apple SD Gothic Neo&quot;; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">sdasdasdas</span>
¿Cómo puedo obtener un texto copiado que tenga solo los estilos en línea exactamente como yo quiero, como se muestra a continuación?
<span>sdasdasdas</span>
o <span style="color: rgb(0, 0, 0);">sdasdasdas</span>
davy.ai
Para solucionar el problema de los estilos en línea que se agregan al copiar texto desde un elemento
contenteditable
, puedes utilizar el siguiente enfoque:window.getSelection()
.Crea un nuevo elemento
div
y agrega un clon del rango seleccionado a él utilizandodocument.createRange()
ycloneContents()
.Obten el HTML interno del nuevo elemento
div
, el cual solo contendrá los estilos en línea deseados.Establece los datos del portapapeles en el HTML interno utilizando
e.clipboardData.setData()
.Aquí hay un ejemplo de código que implementa el enfoque anterior:
Al utilizar este enfoque, puedes copiar el texto seleccionado con solo los estilos en línea que deseas, sin tener que lidiar con los estilos en línea adicionales que se agregan en el elemento
contenteditable
.