Summernote 在 Angular 8 中无法正确更改内容

Posted 2023-03-22

【中文标题】Summernote 在 Angular 8 中无法正确更改内容

【英文标题】：Summernote does not change the content correctly in Angular 8

【发布时间】：2020-06-03 03:41:59

【问题描述】：

我正在尝试在 Angular 8 中编辑 Summernote 文本。问题是，在第一次选择要编辑的帖子时，我实际上在我的模态中看到了 Summernote 中的帖子内容。但是，当我关闭模式并选择另一个帖子进行编辑时，summernote 中的内容根本没有改变。请参阅下面的代码了解我如何实现它。

组件

  // I select the post and the details is extracted from the backend and the data is placed on the corresponding form control

    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
    >

<!--This is the modal--> 

    <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】：

我发现你必须重新初始化 Summernote，因为它是在 DOM 之后创建的。另外，我将summernote放在表单中并使用textarea而不是div。