Есть событие
paste, которое должно работать во всех браузерах последних версий, но на практике игнорируется в IE и есть странность в FireFox.
jQuery работает с ним посредством
$('element').on('paste', function(){});
Замысел заключается в очистке форматирования вставляемого текста в
div contenteditable.
1. Следим за событием
paste в нашем
div.
2. Запоминаем позицию курсора в
div.
3. Перемещаем фокус в
textarea, в котором текст вставится без форматирования.
4. Ставим небольшой таймаут. В это время текст из буфера обмена наконец попадает в
textarea.
5. В полученном тексте убиваем два или более пробелов подряд, убиваем два или более переноса строк подряд, преобразуем переносы строк
\n в
<br>\n (т.е. визуально готовим текст для возврата в
div).
6. Восстанавливаем позицию курсора в
div.
7. Возвращаем уже простой текст обратно в
div, в то место, куда вернули курсор.
Посмотреть в действии: http://jsfiddle.net/rafaylik/4k5rg/
Проблемы, которые хотелось бы решить:
1. IE (проверял в 10) совсем игнорирует наше событие
paste и дефолтно вставляет форматированный текст.
2. В FireFox
textarea получает фокус, но не получает текст из буфера обмена, то есть текст не попадает ни в
div, ни в
textarea.
Возможно ли вообще сделать решение кроссбраузерным (для последних версий)?
Вот та актуальная часть примера, которая переводит фокус:
<div id="format" contenteditable="true">Вставленный сюда текст преобразуется из форматированного в простой.</div>
<textarea id="plain">Сюда перенаправляем фокус и ловим текст</textarea>
$('#format').on('paste', function(){
$('#plain').val('').focus();
});