Javascript — Limpar texto colado em um campo “contenteditable”

Olá Gente!

Utilizar o recurso “contenteditable” em uma Div é LINDO, nos abre muitas portas para customização.

Esta é uma abordagem muito útil para criar um campo WYSIWYG, onde possa ser inserido elementos com formatação.

Porem, e se precisarmos utilizar apenas texto, sem formatação?

Não existe um atributo que bloqueei a formatação neste estilo de campo, o que permite colar um texto cheio de formatação.

Para evitar isto, precisamos:

• Manipular o evento “paste”
• Bloquear o evento padrão do campo
• Obter o “text/plain” que esta no Clipboard
• Substituir o clipbord pelo “text/plain”

Com isto, teremos:

<div id="BlcCampo" contenteditable="true" style="width: 200px; height: 200px; display: block; padding: 10px; background: #F5F5F5;">Teste1</div>

<script language="javascript" type="text/javascript">
document.getElementById('BlcCampo').addEventListener('paste', function(e) {

    e.preventDefault();

    var TextPlain = (e.clipboardData || window.clipboardData).getData('text/plain');

    document.execCommand('inserttext', false, TextPlain);

});
</script>

Desconectando-se por hoje, pessoal! 🌐

Espero que tenham aprendido muito.

Até mais, e que a tecnologia esteja com vocês! 🚀