2

tengo un div con contenteditable, mi problema es que cuando pego un texto este se añade pero dentro de un span con el style de donde lo copie. Lo que quiero es que cuando yo pegue un texto este no se añada en un span ni conserve el estilo de donde lo copie.

Ejemplo:

.text {
   background: rgb(30,30,30);
   color: whitesmoke;
   width: 100%;
   height: 100vh;
   padding: 10px;
}
<div class="text" contenteditable="true">
    Peguen un texto aquí
</div>

Disculpen si mi pregunta no fue clara.

1 respuesta 1

1

Puedes hacerlo a través de javascript. Previenes el comportamiento por defecto de pegar el texto con formato, conviertes el contenido a texto plano, y finalmente lo insertas.

editor = document.querySelector(".text")
editor.addEventListener("paste", function(e) {
    e.preventDefault();
    var text = (e.originalEvent || e).clipboardData.getData('text/plain');
    document.execCommand("insertHTML", false, text);
});
.text {
   background: rgb(30,30,30);
   color: whitesmoke;
   width: 100%;
   height: 100vh;
   padding: 10px;
}
<div class="text" contenteditable="true">
    Peguen un texto aquí
</div>

2
  • Preferiblemente cambié el document.execCommand("insertHTML", false, text); por document.execCommand("insertText", false, text); ya que si por ejemplo pego un texto con <h1>Hola Mundo</h1> dentro del elemento se añadiría un h1.
    – Rub3
    Commented el 30 sept. 2021 a las 22:48
  • Perfecto, lo que sea más conveniente para lo que buscas. Yo solo te di la idea.
    – Jaime
    Commented el 30 sept. 2021 a las 22:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.