时间戳

首页 > 解决方案 > 如何在 ngx-ckeditor angular 7 中使用 insertText 方法

javascript - 如何在 ngx-ckeditor angular 7 中使用 insertText 方法

问题描述

我在我的项目中使用 angular 8 并且我正在尝试实现ngx-CKEditor。我需要在编辑器中添加自定义文本，当我单击列表时，我需要在 CKEditor 中添加内容。

我尝试使用此代码，但不适用于我。

<ck-editor name="editor" #myEditor [(ngModel)]="editorValue" skin="moono-lisa" language="en" [fullPage]="true"></ck-editor>

<ul>
        <li (click)="selectText('adasdasd1')">adasdasd1</li>
        <li (click)="selectText('adasdasd2')">adasdasd2</li>
    </ul>

在 ts 文件中

public editorValue;
@ViewChild("editor", { static: true }) myEditor: any;

ts文件中的点击事件

selectText(value) {
    this.myEditor.instances.insertText(value);
  }

我收到一个错误：ERROR TypeError: Cannot read property 'instances' of undefined

标签： javascriptangularckeditorckeditor4.x

解决方案

尝试使用{static: false}：

@ViewChild("editor", { static: false }) myEditor: any;

false意味着它在更改检测后解决。

更新：

您需要在.ts和.html（带#符号的名称）文件中使用相同的名称：

HTML：

<ck-editor name="editor" #myEditor [(ngModel)]="editorValue" 
     skin="moono-lisa" language="en" [fullPage]="true"></ck-editor>

打字稿：

 @ViewChild("myEditor", { static: false }) myEditor: any;

并像这样使用它：

this.myEditor.instance.insertText(value);

推荐阅读