Как я могу добавить HTML-тег для содержимого div текстового редактора Quill в Angular? - PullRequest
Новая
       55

Как я могу добавить HTML-тег для содержимого div текстового редактора Quill в Angular?

0 голосов
/ 27 ноября 2018

У меня есть форма с текстовым редактором Quill. 

<quill-editor [modules]="quillConfig" (onEditorCreated)="getEditorInstance($event)"></quill-editor>

У меня есть галерея изображений в модале, которая заполнена моими изображениями, и я хотел бы этого, если я выбираю изображение из модальногопоставьте тег img после текста в редакторе.

Это код одного изображения, которое я хочу добавить: 

<div class="news-image-box">
  <img src="${image.path}" alt="${image.description}">
  <div class="row">
    <div class="col-md-9"><p>${image.description}</p></div>
    <div class="col-md-3 news-image-credit"><p>${image.credit}</p></div>
  </div>
</div>

Моя проблема в том, что contiteditable div Quill (который является div для моего текста и имеет "ql-editor "css class), поэтому я не могу дать локальную ссылку для использования @ViewChild ... (или я не знаю как) 

document.getElementsByClassName('ql-editor')[0].innerHTML += imageElement;

Я пытался получить содержимое"ql-editor" div с образцом getElementsByClassname и просто добавил мой тег img к нему, но угловое выдает эту ошибку: 

core.js:1673 ERROR TypeError: Cannot read property 'emit' of undefined
at Scroll.update (quill.js:4329)
at MutationObserver.<anonymous> (quill.js:7118)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runGuarded (zone.js:151)
at MutationObserver.<anonymous> (zone.js:129)

Я работаю только со строкой, кстати ... 

document.getElementsByClassName('ql-editor')[0].innerHTML += 'something';

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Вы можете перейти с ngModel, это четко указано в документации.Ссылка: ngx-quill git Repo

Пример фрагмента: 

 <quill-editor [(ngModel)]="productDetail"  [style]="{border: '0px'}"></quill-editor>
0 голосов
/ 27 ноября 2018

Если я понимаю вашу проблему, вы хотите добавить тег img внутри вашего quill-editor.

Изменение свойства Element.innerHTML - это хороший метод, если вы хотите сделать это, но немногосложно.Существует более простой способ сделать это, например Element.insertBefore() или Element.append().

. Вы можете использовать их следующим образом: 

document.getElementsByClassName('ql-editor')[0].append(imageElement);

или 

document.getElementsByClassName('ql-editor')[0].insertBefore(imageElement, null);

Если выочень хочу использовать Element.innerHTML, я приглашаю вас посмотреть документацию об этом свойстве.

Надеюсь, это поможет

Редактировать: Грамматика

...