Angular Пользовательский элемент управления contenteditable, как мне подключить ngModel?

Question

<button (click)="onSaveChanges()">Save Changes</button>
<section>
  <news-column *ngFor="let column of news.columns">
    <news-header>
      <h2 contenteditable="true" spellcheck="true">
        {{ column.header }}
      </h2>
    </news-header>
    <news-content contenteditable="true" spellcheck="true">
      {{ column.content }}
    </news-content>
    <news-read-more contenteditable="true">
      {{ column.readmore.text }}
    </news-read-more>
    <news-photo contenteditable="true">{{ column.photo.url }} </news-photo>
  </news-column>
</section>

Я разрешаю пользователям редактировать контент, используя contenteditable. Проблема в том, что данные привязаны к столбцам news.columns, как показано выше. Когда пользователь вносит изменения, я вижу их через эту конструкцию:

     ele.addEventListener("input", event => {
          let change = event.target as HTMLElement;
          console.log(change.innerText);
        });

Но если посмотреть на привязку news.column, изменений там нет. Традиционный подход заключается в добавлении [ngModel] et c. Но ngModels применяются только к элементам ввода. Не любой спорный элемент. Я бы предпочел, чтобы изменения произошли в привязке, но, как уже упоминалось, я вижу изменения на уровне DOM.

Любые предложения по получению контента bindind для исправления изменений, например, каждый столбец news.colol должен иметь отредактированный контент.

Answer 1

Я подозреваю, что вам нужно сделать больше реализации. contenteditable - это не вещь angular, это атрибут HTML, который указывает, что элемент является редактируемым. Я могу ошибаться, но я не думаю, что это имеет какое-либо отношение к привязке angular. Я искал Angular .io и "contenteditable" не нашел ни одного хита в документах.

К счастью, есть некоторые примеры того, как создать директиву для этого, и кажется, что многие модули (angular -mentions) завершают это для вас.

Вот два примера, которые я случайно выбрал при поиске «contenteditable angular» на GitHub:

https://github.com/KostyaTretyak/ng-stack/tree/master/projects/contenteditable

https://github.com/TinkoffCreditSystems/angular-contenteditable-accessor

Если вы посмотрите какой-нибудь код, вы обнаружите то же самое: создайте директиву, которая управляет обновлениями содержимого, например:

/*
 * This is a barebones contenteditable {@link ControlValueAccessor} allowing you to use
 * Angular forms with native contenteditable HTML. For security reasons you might want
 * to consider sanitizing pasted/dropped content before using it. Also make sure that
 * you do not set any dangerous content as control value yourself, because directive
 * just outputs control value as-is.
 */
@Directive({
    selector:
        '[contenteditable][formControlName], [contenteditable][formControl], [contenteditable][ngModel]',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ContenteditableValueAccessor),
            multi: true,
        },
    ],
})
etc. etc.