Primeng 编辑器添加撤消和重做按钮答案

【问题标题】：Primeng Editor adding undo and redo buttonPrimeng 编辑器添加撤消和重做按钮
【发布时间】：2021-03-22 12:52:29
【问题描述】：

如何在 Primeng 编辑器（即羽毛笔编辑器）中添加撤消和重做按钮。我检查了 Primeng 文档和一些示例，但找不到任何解决方案

Primeng 版本：9.1.0，羽毛笔：1.3.7

<p-editor [(ngModel)]="consultationNotes"
                name="ConsultationNotes{{ searchVideoConsultation.ObjectID }}" fieldLabel="" toolbar="false"
                [style]="{'height' : 'auto'}"></p-editor>

【问题讨论】：

能否请您添加您的项目和primeng版本。此外，如果您将添加有关您的代码或问题的更多详细信息，您将很快解决问题
"primeng": "^9.1.0", "quill": "^1.3.7"

标签： angular frontend primeng

【解决方案1】：

我找到了答案，

首先你应该在你的项目.ts文件中导入撤消和重做图标，如下所示，

    var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
  </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
  </svg>`;

那么你应该像这样添加撤消和重做功能，

  undo() {
    this.editorComponent.quill.history.undo();
  }
  redo() {
    this.editorComponent.quill.history.redo();
  }

最后如果你可以在代码下面添加.html文件，

<p-header>
 <span class="ql-history">
     <button aria-label="Undo" (click)="undo()"  class="ql-undo"></button>
     <button aria-label="Redo" (click)="redo()" class="ql-redo"></button>
   </span>
</p-header>

Demo is here

【讨论】：