Выход из blockquote

Question

Проблема следующая:

Как по нажатию на Enter в contenteditable выйти из цитаты ? После обертывания параграфа цитатой нажимая на enter текст продолжает быть цитатой

$('.add').click(function(){
var sel =window.getSelection();
let el = sel.focusNode;  
if (el.nodeType != 1) el = el.parentElement;


$("<blockquote/>").insertBefore($("[contenteditable]")
.find(el)).append($("[contenteditable]")
.find(el));

})

blockquote{

padding: 0 30px 0 70px;
    border-left: 2px solid #000;
    padding-left: 18px;
}

div[contenteditable]{
min-height: 200px;
outline: none;
border: 1px solid black;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<p>Выдели этот текст или нажми на него и затем на кнопку. Потом нажимай enter клавишу</p>
</div>

<button class="add">add blockqoute</button>

Answer 1

По логике, всё верно - редактируется то, что возможно (т.е. содержимое параграфа в цитате), и нажатие Enter приведёт к переносу строки, за счёт добавления нового параграфа в том же блоке.

Поэтому нужно, или отлавливать Enter в созданной цитате и устанавливать каретку в следующий элемент, или переводить фокус вручную (при этом останется возможность редактировать содержимое цитаты, включая переносы строк).

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

В общем, обернуть в цитату и переставить каретку на следующий элемент, как-то так:

$('.add').click(function(ev) {
  ev.preventDefault();
  let sel = window.getSelection();
  let el = sel.focusNode;
  if (el.nodeType != 1) el = el.parentElement;
  let next = $(el).wrap("<blockquote></blockquote>").parent("blockquote").next();
  let range = new Range();
  range.setStart(next[0], 0);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
});

blockquote { padding: 0 30px 0 70px; border-left: 2px solid #000; padding-left: 18px; }
div[contenteditable] { min-height: 145px; outline: none; border: 1px solid black; padding: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
  <p>Выдели этот текст или нажми на него и затем на кнопку. Потом нажимай enter клавишу</p>
  <p>Это второй параграф</p>
  <p>Это третий параграф</p>
</div>

<button class="add">add blockqoute</button>

БЛОГ НА HUSL

Выход из blockquote

Ответы (1 шт):