Дезинфекция события paste с помощью jquery в contentEditable div
Я пытаюсь санировать пасту в contentEditable div. То есть код должен выглядеть примерно так:
$('#content').bind('paste',function(e)
{
// Ensure pasted markup is valid
});
В идеале я мог бы разобрать вставленный текст и переформатировать его таким образом, чтобы он соответствовал сайту, но я не знаю, как это сделать.
В качестве альтернативы, мне было бы удобно вставлять как обычный текст (в отличие от HTML), но я не знаю, как это сделать.
Я немного менее доволен решением иметь появится окно с текстовой областью, предлагающее пользователю вставить в эту текстовую область, а затем поместить текст в содержимое в предыдущей позиции курсора. Я знаю, как это сделать, но хочу избежать этого.
И мне совершенно неудобно просто мешать пользователю вставлять с помощью e.preventDefault()
.
Заранее благодарю.
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); }