Очистка события вставки с использованием jquery в contentEditable div

Question

Я пытаюсь очистить вставку в div contentEditable. То есть код должен выглядеть примерно так:

$('#content').bind('paste',function(e)
{
    // Ensure pasted markup is valid
});

В идеале я бы смог разобрать вставленный текст и переформатировать его так, чтобы это подходило для сайта, но я не знаю, как это сделать.

В качестве альтернативы мне было бы удобно вставлять обычный текст (в отличие от HTML), но я тоже не знаю, как это сделать.

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

И мне совершенно неудобно просто запретить пользователю вставлять, используя e.preventDefault().

Заранее спасибо.

Answer 1

Я смог добиться этого с помощью библиотеки javascript, позволяющей сохранять и восстанавливать позицию каретки после очистки содержимого.

https://github.com/timdown/rangy

Протестировано в Chrome и Safari.

$("#content").on('paste', function(){
    sanitize();
});

function sanitize(){
    setTimeout(function(){

        var savedSelection = rangy.saveSelection();

        $("#content *").removeAttr("style"); // Do your parsing here.

        rangy.restoreSelection(savedSelection);         

    }, 0);  
}

Answer 2

В большинстве браузеров нет прямого доступа к содержимому, вставленному до того, как оно попадет в DOM. Однако есть довольно сложный способ сделать это, который работает только для паст, запускаемых с клавиатуры. Смотрите мой ответ здесь:

JavaScript получает данные буфера обмена при вставке события (кросс-браузер)

Answer 3

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