Question

我在角度7中使用primeng p-editor，无法将光标位置设置在特定位置。默认情况下，它仅显示在起始位置。

我通过以下方式使用p-editor：

<p-editor [(ngModel)]="remarks" [style]="{'height':'10rem'}">
 <p-header>
  <span class="ql-formats">
    <button class="ql-bold" aria-label="Bold"></button>
    <button class="ql-italic" aria-label="Italic"></button>
    <button class="ql-underline" aria-label="Underline"></button>
  </span>
 </p-header>
</p-editor>

请提供任何解决方案。

谢谢！

Answer 1

我相信最好的方法是在组件代码中，无论是在ngAfterViewInit()方法中，还是在工作流中您要设置光标位置的任何地方。

您需要从“编辑器”组件中获取默认的羽毛笔实例，然后设置选择（长度为零）以设置光标位置：

import { Component, AfterViewInit, ViewChild } from "@angular/core";
import { Editor } from "primeng/primeng";

@Component({
    selector: 'editor-demo',
    templateUrl: 'editor-demo.component.html'
})

export class EditorDemoComponent implements AfterViewInit {
    @ViewChild(Editor) editor: Editor;
    remarks: string;

    constructor() {
        this.remarks = '<div>Hello World!</div><div>PrimeNG <b>Editor</b> Rocks</div><div><br></div>';
    }

    ngAfterViewInit() {
        // this hook gets called after the view has been fully initialized, and
        // should set the cursor position immediately before the word 'World'
        this.editor.getQuill().setSelection(6);
    }
}

您可以在以下位置找到setSelection（）方法的Quill Editor API文档：https://quilljs.com/docs/api/#setselection

如何在Primeng的p编辑器中的特定位置显示光标

1 个答案: