как получить данные из CKEditor?

Question

Я пытаюсь получить данные от CKEditor?Я пытаюсь использовать функцию getData, но, похоже, она не работает.

Ниже приведен HTML

<ckeditor [editor]="Editor" id="Editor" [data]="editorData"></ckeditor>

Ниже приведен Typescript

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
public Editor = ClassicEditor;
ClassicEditor.create(document.querySelector('#Editor'), {
      toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
      heading: {
        options: [
          { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
          { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
          { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
        ]
      },
    }).then(newEditor => {
        this.Editor= newEditor;

      }).catch(error => {
        console.log(error);
    });

, если я попробую это.Editor.getData () Я получаю сообщение об ошибке, в котором говорится, что getData не является функцией.

Answer 1

это полный путь:

1) установите ckEditor, как показано ниже:

npm i ng2-ckeditor --save

2) Добавьте сценарий ckEditor в index.html:

<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>

3) Добавьте модуль CkEditor в раздел импорта в AppModule следующим образом:

import { CKEditorModule } from 'ng2-ckeditor';

imports:
[
  BrowserModule,
  FormsModule,
  CKEditorModule
],

4) Определите следующую строку в верхней части компонента

import { Component, OnInit } from '@angular/core';
declare var CKEDITOR: any;

5) Определитеконкретное имя для вашего ckEditor (имя по умолчанию - editor1): здесь я устанавливаю содержимое

ngOnInit(): void {
 CKEDITOR.on('instanceCreated', function (event, data) {
    var editor = event.editor,
    element = editor.element;
    editor.name = "content"
 });
}

6) в вашем app.component.html (добавьтеКомпонент ckEditor и одна кнопка для получения данных):

<ckeditor #myEditor [(ngModel)]="ckeditorContent" [config]="{uiColor: '#a4a4a4'}" debounce="500"> </ckeditor> <input type="button" value="Get Data" (click)="getData()" />

Теперь, если вы хотите получить данные, используйте следующую команду:

getData() {
  console.log(CKEDITOR.instances.content.getData());
}

StackBlitz Here.

DEMO (проверьте консоль браузера)

Answer 2

Вам нужно получить ссылку на экземпляр редактора, который будет this.Editor.ckeditorInstance.getData()

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element