Как в div contentEditable сделать перенос при сочетании клавиш ctrl + enter?

Question

[ARX2]

Добрый день. Не знаю как сделать перенос строки при сочетании клавиш ctrl + enter в div contentEditable.

<div contentEditable="true" hidefocus="true" id="comment"></div>

$('#comment').keydown(function (e) {
                              if(e.ctrlKey && e.keyCode == 13){
                                $('#comment').append('<br>');
                              }
                 });

Мой код переносит на другую строку, только курсор остается на своем месте, а должен тоже перенестись и вообще быть в конце сообщения.
Как это осуществить?

Answer 1

[Stalker_RED]

Все правильно вы сделали, только нужно переместить курсор.

Для этого можно вставить br не строкой, а предварительно создав элемент. И используя ссылку на этот элемент и range, переместить курсор.
https://developer.mozilla.org/ru/docs/Web/API/Rang...
И потом collapse



Доработаный пример

• без jQuery
  
• br вставляется не в конце, а в том месте где курсор
  
• выделенный фрагмент удаляется
  

Все то-же самое, но один обработчик на весь документ, и срабатывает на любых contenteditable

Comments

[ARX2]

Я не совсем понял как это должно выглядеть.

У меня получилось так:

$('#comment').keydown(function (e) {
                              if(e.ctrlKey && e.keyCode == 13){
                                let range = document.createRange();
                                let referenceNode = document.getElementsByTagName('br').item(0);
                                $('#comment').append(range.selectNode(referenceNode));
                              }
                            });

Но не работает. Я об этом ни разу не слышал

[ARX2]

Сделал так:

$('#comment').keydown(function (e) {
                              if(e.ctrlKey && e.keyCode == 13){
                                let range = document.createRange();
                                let referenceNode = document.getElementsByTagName('br').item(0);
                                $('#comment').append(referenceNode );
                              }
                            });

Пробел встает, но все равно курсор уходит за пробел

[Stalker_RED]

ARX2, document.getElementsByTagName('br').item(0);

Но ведь это вообще первый попавшийся br на странице.

Создавайте его при помощи createElement, и сохраняйте ссылку.
ыставляйте в нужное место, выделяйте при помощи range, и потом collapse.

Сейчас у вас вообще нет ни выделения, ни collapse.

[ARX2]

Stalker_RED, Я мало разбираюсь в этой черной магии, для меня здесь почти ничего не понятно))
Можно пример? Чтобы я на нем это разобрал)

[Stalker_RED]

ARX2, я с телефона, писать код совсем неудобно. Завтра набросаю пример.

[Stalker_RED]

ARX2, набросал пример

Кстати, логично было бы добавлять BR не в конец, а месте курсора.


И возможно стоит удалять при этом выделенный текст


Ну и jquery можно выбросить, от него почти ничего не используется

[ARX2]

Stalker_RED, Спасибо, теперь понял о чем вы говорили, для меня это немного темный лес))

[Stalker_RED]

ARX2, на MDN нормально все расписано, и примеры есть.

[Николай]

Stalker_RED В вашем последнем примере (Ну и jquery можно выбросить, от него почти ничего не используется), если поставить курсор в конец строки и попробовать нажать Ctrl+Enter, то перенос строки будет добавляться только со второго раза, вы знаете как это побороть?

[Stalker_RED]

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

[Николай]

Stalker_RED, А как можно узнать что мы в конце строки? У меня сейчас схожая проблема, я создал вопрос вчера, а только потом эту ветку нашел - Как добавить br (перевод строки) в contenteditable div по ctrl+enter?

[Stalker_RED]

Николай, посмотреть конечную ноду у range (Range.endContainer) и посмотреть есть ли после нее br (nextElementSibling)

[Николай]

Stalker_RED, UPD. Продолжаем там - Как добавить br (перевод строки) в contenteditable div по ctrl+enter?