web-dev-qa-db-fra.com

Contenteditable autorisant uniquement le texte brut

J'essaie de faire un contenteditable qui n'accepte que du texte brut.

Ce que je veux, c'est écouter l'événement coller, puis supprimer tout le code html et le coller sur le contenteditable uniquement en texte brut.

Pour ce faire, j'ai déjà essayé deux approches différentes, basées sur des réponses à des questions similaires, mais ces deux approches ont des problèmes.

Premièrement: Celui-ci n'utilise pas l'écouteur "coller", il écoute plutôt les entrées (pas idéal dans ce cas), c'était une solution à éviter en utilisant Clipboard API .

Problème: Cela fonctionne très bien sur chrome mais pas sur firefox et IE, lorsque vous copiez et collez le html, il supprime avec succès le html et ne colle que du texte, mais lorsque vous continuez à écrire du texte, le curseur est toujours amené au début du contenteditable.

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);
});

Vous pouvez l'essayer ici/code sur lequel j'ai basé:http://jsbin.com/moruseqeha/edit?html,css,js,output

Deuxième: Puisque le premier a échoué et n'écoute pas l'événement "paste" uniquement, j'ai alors décidé de faire un essai en utilisant - API Clipboard . Le problème ici est que sur IE document.execCommand ("insertHTML", false, text); ne semble pas fonctionner. Cela fonctionne sur Chrome, Firefox (testé sur v41 et v42) et 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);
});

Vous pouvez l'essayer ici: http://jsfiddle.net/marinagon/461uye5p/

Quelqu'un peut-il m'aider à trouver une solution à certains de ces problèmes ou quelqu'un a-t-il une meilleure solution que celles présentées ici?

Je suis conscient que je pourrais utiliser textarea, mais j'ai des raisons de ne pas l'utiliser.

Mise à jour - Solution trouvée

J'ai trouvé une solution pour la deuxième approche. Depuis document.execCommand ("insertHTML", false, text); ne fonctionne pas sur IE J'ai cherché une autre solution et j'ai trouvé celle-ci - https://stackoverflow.com/a/2925633/4631604 .

Ici, vous pouvez voir une deuxième approche avec une solution qui fonctionne bien dans tous les navigateurs http://jsfiddle.net/marinagon/1v63t05q/

javascriptcontenteditable
23
Marina

Piratage sale pour nettoyer les données collées.

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

Utilisez un élément textarea au lieu d'un élément contentEditable: (c'est moi qui souligne)

L'élément textarea représente un contrôle d'édition de texte brut multiligne pour la valeur brute de l'élément.

Exemple:

/* 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>
2
Oriol