Дезинфекция события paste с помощью jquery в contentEditable div


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

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

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

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

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

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

Заранее благодарю.

3 4

3 ответа:

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

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

Я смог добиться этого с помощью библиотеки rangy 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);  
}

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