Contenteditable, позволяющий использовать только обычный текст

Я пытаюсь сделать contenteditable, который принимает только обычный текст.

Я хочу прослушивать вставное событие, а затем удалить все html и вставить его в contenteditable только как обычный текст.

Чтобы сделать это, я уже пробовал два разных подхода, основанные ответы на подобные вопросы, но эти два подхода имеют проблемы.

Во-первых: Этот не использует "вставку" прослушивателя, вместо этого прослушивает ввод (не идеально для этого случая), это было решение, позволяющее избежать использования Clipboard API.

Проблема:. Это отлично работает на chrome, но не на firefox и IE, когда вы копируете и вставляете html, он успешно удаляет html и только вставляет текст, но при продолжении записи текста каретка всегда принимается к началу контент-контента.

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

Вы можете попробовать здесь/код, на котором я основывался: http://jsbin.com/moruseqeha/edit?html,css,js,output

Второе: Поскольку первый не удалось и не прослушивает только событие "вставить", я решил попробовать его с помощью API буфера обмена, Проблема здесь в том, что на IE document.execCommand( "insertHTML", false, text); похоже, не работает. Это работает на chrome, firefox (проверено на v41 и v42) и на краю.

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

Вы можете попробовать его здесь: http://jsfiddle.net/marinagon/461uye5p/

Может ли кто-нибудь помочь мне найти решение для некоторых из этих проблем, или у кого-то есть лучшее решение, чем те, которые представлены здесь?

Я знаю, что могу использовать textarea, но у меня есть причины не использовать его.

Обновление - найденное решение

Я нашел решение для второго подхода. Поскольку document.execCommand( "insertHTML", false, text); не работает в IE. Я искал другие решения и нашел этот qaru.site/info/21348/....

Здесь вы можете увидеть второй подход, когда решение работает нормально во всех браузерах http://jsfiddle.net/marinagon/1v63t05q/

Ответ 1

Грязная ручка для очистки вставленных данных.

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

Ответ 2

Используйте элемент textarea вместо элемента contentEditable: _{^{(выделение)}к югу >}

Элемент textarea представляет многострочное текстовое редактирование управления для исходного значения элемента.

Пример:

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