Как добавить br (перевод строки) в contenteditable div по ctrl+enter?

На самом деле с вопросом я справился, но есть какое-то очень странное поведение что в Chrome, что в FF.
Значит сделал я так:

<div contenteditable="true">Lorem ipsum dolor sit amet</div>


И небольшой JS+JQ:

$('div[contenteditable="true"]').keypress(function(event) {
	if ((event.which == 13 || event.which == 10) && !event.ctrlKey) {
  	event.preventDefault();
    return false;
  }
	else if ((event.which == 13 || event.which == 10) && event.ctrlKey) {
    var docFragment = document.createDocumentFragment();

    //add a new line
    var newEle = document.createTextNode('\n');
    docFragment.appendChild(newEle);

    //add the br, or p, or something else
    newEle = document.createElement('br');
    docFragment.appendChild(newEle);

    //make the br replace selection
    var range = window.getSelection().getRangeAt(0);
    range.deleteContents();
    range.insertNode(docFragment);

    //create a new range
    range = document.createRange();
    range.setStartAfter(newEle);
    range.collapse(true);

    //make the cursor there
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    return false;
  }
});


Вот живой пример - https://jsfiddle.net/s1ma4t8u/

Обратите внимание, при попытке поставить курсор в конец строки и нажать Ctrl + Enter, то не срабатывает с первого раза перевод строки, а только когда в div[contenteditable] появляется второй br. Как это побороть?
  • Вопрос задан
  • 1538 просмотров
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Цитирую ответ из комментария отсюда: Как в div contentEditable сделать перенос при сочетании клавиш ctrl + enter?
Он добавляется с первого раза, можете в инспекторе посмотреть.
Следующей строки нет, и потому браузер не отображает его.
Побороть можно добавив br в конце строки заранее. Или добавить проверку, мол если это конец строки, то добавлять 2 штуки.

Предлагаю продолжить обсуждение здесь.

Кстати, от jq у вас только селектор. Стоит ли тащить эту зависимость?

//create a new range ...
    //make the cursor there ...
И эти штуки непонятно зачем.
У вас уже есть range, просто делайте ему collapse.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы