Вставить только простой текст в редактируемый div

Question

Мне нужно иметь возможность разрешить пользователю вставлять в редактируемый div (через все, что выберет пользователь: щелчок правой кнопкой мыши и вставка, сочетание клавиш и т. д.), но я хочу отказаться от форматирования и использовать только простой текст.

я не могу использовать textarea, так как div позволит базовое форматирование (жирный и курсив), если применяется событиями, инициированными пользователем.

событие onbeforepaste выглядело многообещающе, но, согласно причудливому режиму, поддержка настолько ограничена, что ее невозможно использовать.

Тия за любые предложения

Answer 1

Для Ctrl+v я проверил содержимое редактируемого div на keyup. Вы можете изменить содержимое этого события. Я использовал текстовый редактор nicedit. Это не сработало для вставки из правого клика-> вставка. Для "вставки" мне пришлось изменить содержимое, используя settimeout,

.addEvent('paste', function(e) {
        setTimeout(function(){
            if(condition){
                //modify content
            }
        },350);
    });

Answer 2

Его также можно взломать с помощью javaScript. Надеюсь это поможет

Я создал пример здесь

<div contentEditable="true" id="clean-text-div"> </div>
<div id="clean-btn"> Clean Me</div>
<div id="message"> paste html content and clean background HTML for pure text</div>


$("#clean-btn").click(function(){
    $("#clean-text-div").text($("#clean-text-div").text());
    $("#message").text("Your text is now clean");
});

Answer 3

Это сложно, но не невозможно. То, что вы можете сделать, довольно сложное и немного хакерское, которое будет работать в Firefox 2+, IE 5.5+ и в последних браузерах WebKit, таких как Safari 4 или Chrome (не тестировалось на старых версиях). Последние версии как TinyMCE, так и CKEditor используют эту технику в своих редакторах на основе iframe:

1. Обнаружение события ctrl-v / shift-ins с помощью обработчика события нажатия клавиши
2. В этом обработчике сохраните текущее выделение пользователя, добавьте элемент texttarea за пределы экрана (скажем, слева -1000 пикселей) в документ, отключите contentEditable и вызовите focus() для области текста, таким образом перемещая курсор и эффективно перенаправляя вставку
3. Установите очень короткий таймер (скажем, 1 миллисекунду) в обработчике событий для вызова другой функции, которая хранит значение текстовой области, удаляет текстовую область из документа, снова включает contentEditable, восстанавливает выбор пользователя и вставляет текст.

Обратите внимание, что это будет работать только для событий вставки с клавиатуры, но не для вставки из контекстного меню или меню редактирования. paste событие было бы лучше, но к тому времени, когда оно запускается, уже слишком поздно перенаправлять курсор в текстовую область (по крайней мере, в некоторых браузерах).

Answer 4

Вы пробовали такое событие, как "вставить" или "ввод"? Затем вы можете использовать регулярные выражения, чтобы отключить все HTML-тег

$(document).bind('paste', function(e){ alert('pasting!') })

http://www.hscripts.com/scripts/JavaScript/remove-html-tag.php

Существует обсуждение события вставки, которое вы также должны прочитать:
Поймать ввод пасты

Answer 5

Вы можете использовать:

      yourContentEditable.addEventListener('paste', handlePaste)

function handlePaste(e) {
    e.preventDefault()
    let text = e.clipboardData.getData("text/plain")
    document.execCommand("insertText", false, text)
}

execCommandв настоящее время кажется устаревшим. Так что будьте осторожны с ним. Но основные браузеры продолжают его поддерживать.