Summernote неправильно изменяет содержимое в Angular 8 - PullRequest
Новая
       5

Summernote неправильно изменяет содержимое в Angular 8

0 голосов
/ 19 февраля 2020

Я пытаюсь отредактировать текст Summernote в Angular 8. Проблема заключается в том, что при первом выборе сообщения для редактирования я фактически вижу содержимое сообщения в Summernote внутри моего модального сообщения. Но когда я закрываю модальное и выбираю другой пост для редактирования, содержание в летней заметке не меняется вообще. Пожалуйста, смотрите мой код ниже о том, как я его реализую.

Компонент

// Я выбираю сообщение, детали извлекаются из бэкэнда, и данные помещаются в соответствующий элемент управления формы 

onSelectPost(id: string) {
    $('#summernote').summernote('destroy');
    this.pService.getPostByIdToEdit(id).subscribe((data: PostToEdit) => {
      this.postToEdit = data;
      $('#summernote').summernote({
        height: 450,
        width: 1000,
        tooltip: false,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['fontname', ['fontname']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']]
        ],
      });
      this.createForm();
    });
}

Html

// Это кнопка, которую я нажимаю, чтобы отобразить модальный 

<button
    type="button"
    mdbBtn
    color="info"
    class="btn btn-sm"
    rounded="true"
    data-toggle="modal"
    data-target="#basicExample"
    (click)="frame.show(); onSelectPost(el.id);"
    mdbWavesEffect
>

/ / Это модал 

<div
  mdbModal
  #frame="mdbModal"
  class="modal fade top"
  id="frameModalTop"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>
  <div
    class="modal-dialog modal-notify modal-info modal-xl"
    role="document"
    *ngIf="postToEdit"
  >
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <p class="heading lead">
          Title:
          <span style="font-weight: bolder;">{{ postToEdit.title }}</span>
        </p>

        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
          (click)="frame.hide()"
        >
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body">
        <div class="col-md-12">
          <form [formGroup]="form" #fd="ngForm">
            <mdb-card class="card-size">
              <mdb-card-body>
                <div class="col-md-12">
                  <div class="row mb-1">
                    <input
                      id="post_title"
                      type="text"
                      formControlName="title"
                      placeholder="Title"
                      class="form-control"
                      [ngClass]="{ 'is-invalid': submitted && f.title.errors }"
                    />
                    <div
                      *ngIf="submitted && f.title.errors"
                      class="invalid-feedback"
                    >
                      <div *ngIf="f.title.errors.required">
                        Title is required
                      </div>
                    </div>
                  </div>
                  <div class="row mb-1">
                    <select class="form-control" formControlName="categoryId">
                      <option selected disabled>Select Categories</option>
                      <option
                        *ngFor="let item of categories"
                        [value]="item.id"
                        >{{ item.categoryName }}</option
                      >
                    </select>
                  </div>
                </div>
              </mdb-card-body>
            </mdb-card>
          </form>
          <div class="row mb-1 mt-3 ml-lg-4 ml-md-4 ml-sm-auto">
            <div id="summernote" [innerHtml]="postToEdit.postContent" class="sumnote"></div> <======= I get the post content the first time but it does not change 
                                                                                                                                                on another selection
          </div>
        </div>

        <!--Footer-->
        <div class="modal-footer justify-content-center">
          <a
            type="button"
            mdbBtn
            color="danger"
            class="waves-effect"
            mdbWavesEffect
            >Edit
            <mdb-icon far icon="check" class="ml-1"></mdb-icon>
          </a>
          <a
            type="button"
            mdbBtn
            color="danger"
            outline="true"
            class="waves-effect"
            mdbWavesEffect
            (click)="frame.hide(); onCancel();"
            >Cancel</a
          >
        </div>
      </div>
      <!--/.Content-->
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 19 февраля 2020

Я обнаружил, что вам нужно повторно инициализировать летнюю заметку, поскольку она была создана после DOM. Кроме того, я поместил summernote внутри форм и использовал текстовую область вместо div.

...