es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿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?

¿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?

29 May, 2023 Programación

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.

  1. 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")); 
})
  1. Escribe algún texto en la etiqueta div.
  2. Selecciona las subcadenas de rango y cópialas.
  3. Se imprimirá como se muestra a continuación.

<meta charset='utf-8'><span style="color: rgb(0, 0, 0); font-family: &amp;quot;Apple SD Gothic Neo&amp;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>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Obtén el rango seleccionado utilizando window.getSelection().

    2. Crea un nuevo elemento div y agrega un clon del rango seleccionado a él utilizando document.createRange() y cloneContents().

    3. Obten el HTML interno del nuevo elemento div, el cual solo contendrá los estilos en línea deseados.

    4. 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:

    document.getElementById("test").addEventListener("copy", (e) => {
  e.preventDefault();
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const clone = range.cloneContents();
  const div = document.createElement("div");
  div.appendChild(clone);
  const html = div.innerHTML;
  e.clipboardData.setData("text/html", html);
});

    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.

Comments are closed.