如何在光标点动态添加数据到CKeditor

Question

我已经实现了 CKeditor，但在编辑器的特定位置添加数据时遇到问题。我浏览了 CKeditor 文档，所有代码都包含 CKEDITOR 关键字，所以我可以如何以及在哪里应用它。就像这个 http://zkfiddle.org/sample/22fu1pr/4-Insert-text-at-cursor-for-CKEditor#source-1 但 angular 实现

我试过了id，

HTML
  <div class="row mb-3">
                        <form role="form" 
  #myForm="ngForm" accept-charset="UTF-8" novalidate>
                            <div 
   class="form-group has-feedback"

   [ngClass]="{ 'has-error': myckeditor.invalid && myckeditor.touched }">

  <ckeditor [(ngModel)]="mycontent"

   #myckeditor="ngModel"

   id = "myckeditor"

  name="myckeditor"

  required

  [config]="ckeConfig"

  debounce="500">

  </ckeditor>
                                <div 
  *ngIf="myckeditor.invalid && myckeditor.touched" class="help- 
  block">Required field.</div>
                            </div>
                        </form>
                    </div>
                    <div class="row mb-3">
                        <button class="btn btn-secondary mr-2 ml-2" (click)="addValue()">CustomerNo</button>
                    </div>
 ts 
   export class AppComponent {
   name = 'ng2-ckeditor';
   ckeConfig: any;
   mycontent: string;
   log: string = '';
   @ViewChild("myckeditor") ckeditor: any;

    constructor() {
     this.mycontent = `<p>My html content</p>`;
   }

   ngOnInit() {
    this.ckeConfig = {
    allowedContent: false,
    extraPlugins: 'divarea',
    forcePasteAsPlainText: true
    };
  }

 public addValue(): void {
    this.CKEDITOR.instances['myckeditor'].setData('<p>This is the 
 editor data.</p>');
}

}

我希望能够通过单击按钮或使用超链接将值动态地附加到 CKeditor。

Answer 1

#myckeditor="ngModel" 限制了 ckeditor 的功能，因此请使用 #myckeditor 并在 ts 上使用 @ViewChild('ckeditor') public ckeditor: any; 访问编辑器并简单地执行此操作 this.ckeditor.instance.insertText(temp); 将文本插入到光标指针位置。

https://ckeditor.com/old/forums/CKEditor-3.x/heres-how-insert-text-and-tags-cursor

如何在光标点动态添加数据到CKeditor

How to add data to the CK editor dynamically at cusor point

ckeditor

ckeditor4.x

angular