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

Question

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

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

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

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

Answer 1

Его также можно взломать с помощью 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 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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