javascript - 获取 ' ng2-ckeditor'中的光标位置

Question

我是 Angular 2 的新手，并在 Angular 2 应用程序中使用“ng2-ckeditor 1.0.7”。编辑器在应用程序中运行良好。现在我想在光标位置附加文本。但无法使用 angular2 找到光标位置。我找到了使用 javascript 的代码，但我不知道如何使用 angular2/typescript。

我的 editor.component.ts 文件是 -

@Component({
    selector: 'editor',
    template:'
      <ckeditor [(ngModel)]="ckEditorContent" [config]="ckEditorConfig"></ckeditor>

})

export class EditorComponent implements OnChanges {
    @Input() panelData: string;
    constructor() {
        this.ckEditorContent = '';
}

ckEditorContent: string;
ckEditorConfig: {} = { "uiColor": "#CFD8D3", "removeButtons": "Save,Templates,Find,Replace,Scayt,SelectAll,Smiley,Flash,SetLanguage" };

ngOnChanges(): void {

    this.ckEditorContent += this.panelData;
    console.log("this.panelData = " + this.panelData);
    console.log("this.ckEditorContent = " + this.ckEditorContent);
}

}

`

Answer 1

在 html 文件中，您实现了 ckeditor 标签来实现。

<ckeditor [(ngModel)]="emailWidgetTemplate.content" id="email" [readonly]="false" 
     name="content" [config]="editorConfig" (contentDom)="onContentDom($event)"></ckeditor>

类似这样的事情。在此我实现了方法 contentDom 并在 ts 文件中实现了它。

onContentDom(e: any) {
        console.log('try e:', e);
        this.ckeditor = e.editor;
    }

将编辑器对象分配给某个局部变量 ckeditor。

单击按钮后，您可以在任何方法中使用此编辑器变量。

addText(someText){
  this.ckeditor.insertHtml(someText);
}

它将在当前光标位置添加文本。