Переместите каретку во вновь вставленный элемент, чтобы применить форматирование - PullRequest
Новая
       13

Переместите каретку во вновь вставленный элемент, чтобы применить форматирование

0 голосов
/ 28 марта 2020

Я создаю WYSIWYG-редактор. Мне нужна такая функциональность, как слово или любое другое программное обеспечение для обработки текста - в документе без выделенного текста, если вы нажмете, чтобы увеличить размер текста, следующий введенный вами текст будет применен с выбранным размером текста, однако это не повлияет любой предыдущий текст. У меня есть идея вставить и переместить курсор / каретку внутри диапазона, чтобы следующий текст был внутри с требуемыми стилями. Однако я не могу этого сделать. Я использую Range и Selection API Javascript для того же. Если я вставлю диапазон с каким-то фиктивным текстом по умолчанию, то каретка будет находиться только внутри нового элемента. Однако, если я вставлю его пустым, каретка не будет двигаться внутри. Я пробовал и с пробелами, но не повезло.

Javascript / Angular Код: 

doUnderline(){
  let selection = window.getSelection();
  let range = selection.getRangeAt(0);
  let span = document.createElement('span');
  span.setAttribute('style', 'font-size: 70px');
  //span.innerHTML = 'hello '
  range.insertNode(span);
  range.collapse(false);

  selection.removeAllRanges();
  selection.addRange(range);
}

HTML Код: 

<section>
  <button (click)='doUnderline()'>Underline upcoming text</button>
  <article contenteditable="true"  id="document"> {{content}}  </article>
</section>

Я не хочу использовать какую-либо библиотеку, такую ​​как CKEditor или что-либо еще. Я хочу построить это с нуля. Хотя я включил код angular, если вы посмотрите внимательно, вы поймете, что он в основном чистый javascript. Я также создал приложение для стекаблиц для того же:

https://stackblitz.com/edit/angular-78fmxz

...