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

Question

[Николай]

На самом деле с вопросом я справился, но есть какое-то очень странное поведение что в 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. Как это побороть?

Comments

[DanKud]

<br> просто устанавливает символ окончания строки. То есть получается, что при подстановке первого <br> вы просто говорите, что строка закончилась, а когда у вас подставляется второй <br> он уже подставляется в новую строку, тем самым ширина <div> увеличивается. Можно добавить переменную по которой отслеживать, что сделано первое нажатие клавиш, и добавлять в момент первого нажатия два <br> например. Но даже так похоже будет работать не совсем корректно. Вообще судя по всему надо реализовывать это по другому, не через <br>

[Николай]

DanKud, А как это вообще сделать по другому? Добавлять <div><br></div>? Вот так https://jsfiddle.net/ab4Lrotp/ , но это накладывает дополнительные проблемы в парсинге, так например один перевод строки, на выходе превращается в два:

Как-то можно понять что мы находимся в конце строки? Если да, то возможно это решает проблему, так как она возникает именно в конце строки.

Answer 1

[Stalker_RED]

Цитирую ответ из комментария отсюда: Как в div contentEditable сделать перенос при сочетании клавиш ctrl + enter?

Он добавляется с первого раза, можете в инспекторе посмотреть.
Следующей строки нет, и потому браузер не отображает его.
Побороть можно добавив br в конце строки заранее. Или добавить проверку, мол если это конец строки, то добавлять 2 штуки.

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

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

//create a new range ...
    //make the cursor there ...

И эти штуки непонятно зачем.
У вас уже есть range, просто делайте ему collapse.

Comments

[Николай]

Stalker_RED, Либо я что-то не понимаю, либо нужно еще знать точную позицию курсора. Просто если мы имеем изначально одну единственную ноду, после которой нет <br>, то поставив курсор в середину строки, получим разрыв, а не перенос:

[Stalker_RED]

Николай, и в чем сложность? Откройте уже описание range, там же все есть.

[Николай]

Stalker_RED, Я конечно попробую разобраться, но мне казалось сюда приходят именно за помощью. Иногда очень сложно понять как работает по "сухим" описаниям.

[Stalker_RED]

Николай, может вы приходите и за помощью, но вообще это сервис с ответами на вопросы.
Об этом даже в правилах написано.

Вы же хотите каких-то дополнительных плюшек, которые вы не прописали в вопросе и еще и обижаетесь.