ejemplos - table content editable javascript

Contenteditable permitiendo solo texto sin formato

Question

Esta pregunta ya tiene una respuesta aquí:

• Insertar texto en el cursor en un contenido editable div 3 respuestas

Estoy tratando de hacer un contenteditable que solo acepte texto plano.

Lo que quiero es escuchar el evento de pegar y luego eliminar todo el código HTML y pegarlo en el texto editable solo como texto sin formato.

Para hacerlo, ya he probado dos enfoques diferentes, respuestas basadas en preguntas similares, pero esos dos enfoques tienen problemas.

Primero: este no usa el escucha "pegar", en cambio, escucha la entrada (no es ideal para este caso), esta fue una solución para evitar el uso de la API del Portapapeles .

Problema: Esto funciona bien en Chrome pero no en Firefox e IE. Cuando copia y pega el html, elimina correctamente html y solo pega texto, pero al continuar escribiendo texto, el carácter siempre se lleva al principio de la edición de contenido.

function convertToPlaintext() {
  var textContent = this.textContent;
  this.textContent = textContent;
}

var contentEditableNodes = document.querySelectorAll(''.plaintext[contenteditable]'');

[].forEach.call(contentEditableNodes, function(div) {
  div.addEventListener("input", convertToPlaintext, false);
});

Puede probarlo aquí / código en el que me http://jsbin.com/moruseqeha/edit?html,css,js,output : http://jsbin.com/moruseqeha/edit?html,css,js,output

Segundo: como el primero falló y no escucha solo el evento "pegar", decidí intentarlo utilizando la API del Portapapeles . El problema aquí es que en IE document.execCommand ("insertHTML", false, text); no parece funcionar Esto funciona en chrome, firefox (probado en v41 y v42) y en edge.

document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = "";
  if (e.clipboardData && e.clipboardData.getData) {
    text = e.clipboardData.getData("text/plain");
  } else if (window.clipboardData && window.clipboardData.getData) {
    text = window.clipboardData.getData("Text");
  }
  document.execCommand("insertHTML", false, text);
});

Puedes probarlo aquí: http://jsfiddle.net/marinagon/461uye5p/

¿Puede alguien ayudarme a encontrar una solución para algunos de estos problemas o alguien tiene una solución mejor que las que se presentan aquí?

Soy consciente de que podría usar textarea, pero tengo razones para no usarlo.

Actualización - Solución encontrada

Encontré una solución para el segundo enfoque. Desde document.execCommand ("insertHTML", falso, texto); no funciona en IE. He buscado otras soluciones y encontré esta https://stackoverflow.com/a/2925633/4631604 .

Aquí puede ver el segundo enfoque con una solución que funciona bien en todos los navegadores http://jsfiddle.net/marinagon/1v63t05q/

Answer 1

Hack sucio para limpiar los datos pegados.

function onpaste(e, el){
      setTimeout(function(){
            el.innerText = el.innerText;
        }, 10);
}

Answer 2

Use un elemento textarea lugar de un elemento contentEditable: _{^{(énfasis mío)}}

El elemento textarea representa un control de edición de texto plano multilínea para el valor en bruto del elemento.

Ejemplo:

/* Auto resize height */
var textarea = document.querySelector(''textarea'');
(textarea.oninput = function() {
  textarea.style.height = 0;
  textarea.style.height = textarea.scrollHeight + ''px'';
})();

textarea { width: 100%; }

<textarea>Hello! You can edit my content. But only plain-text!!!</textarea>