ExecCommand в contenteditable не работает должным образом в Ionic5

Question

Я знаю, может быть, это проблема с просмотром веб-страниц, но я хочу знать, есть ли обходной путь для этого, я создал пустой ionic5 проект, затем добавляю contenteditable в HTML, и он работает как следует, затем я реализую execCommand на моем ТС. У меня есть проблема, но она не будет работать, если у меня нет выделенного или выделенного текста. если у меня есть highlighted или selected, он будет работать нормально

html код:

<div id="textBox" contenteditable="true">
    <p>Lorem ipsum</p>
</div>

здесь мой код TS:

formatDoc(sCmd, sValue) {
    console.log(sCmd, sValue)
    if (this.validateMode()) {
      document.execCommand(sCmd, false, sValue);
      document.getElementById("textBox").focus();
    }
  }

*** Странная часть, я пытаюсь html код из: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

он работает в android chrome без проблем. но внутри ionic5 у меня возникла проблема, прежде чем он заработал, ему нужно сначала набрать текст.

---

Answer 1

Вы, похоже, пропускаете использование Ioni c / Angular для своих функций.

Очень редко вы редактируете index.html. Особенно, чтобы не помещать весь этот вид кода в него.

Вы должны использовать Angular компонент для обеспечения такого рода функциональности редактора.

Я бы порекомендовал Quill который будет интегрирован с использованием пакета типа ngx-quill :

• импорт QuillModule из ngx-quill:

  import { QuillModule } from 'ngx-quill'
  

• добавьте QuillModule к импорту вашего NgModule:

  @NgModule({
    imports: [
      ...,
  
      QuillModule.forRoot()
    ],
    ...
  })
  class YourModule { ... }
  

• используйте <quill-editor></quill-editor> в своих шаблонах, чтобы добавить редактор Quill по умолчанию

• do Не забудьте включить quill + theme css в ваш процесс сборки, модуль или индекс. html!