how to get data from CKEditor?

I am trying to get the data from CKEditor? I am trying getData function but it doesnt seem to be working.

Below is the HTML

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

Below is the 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);
    });

if I try this.Editor.getData() I am getting an error saying getData is not a function.

Solution

this is the complete path:

1) install the ckEditor as below:

npm i ng2-ckeditor --save

2) Add the ckEditor script in the index.html:

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

3) Add CkEditor Module to import section in AppModule like the following:

import { CKEditorModule } from 'ng2-ckeditor';

imports:
[
  BrowserModule,
  FormsModule,
  CKEditorModule
],

4) Define the following line in the top of the component

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

5) Define a specific name for your ckEditor (default name is editor1): here I set content

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

6) in your app.component.html (add a ckEditor component and one button to get data):

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

Now, if you want to get data, use the following command:

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

StackBlitz Here.

DEMO (check your browser's console)

For CKEditor Classic:

If you want to get data there are two options:

1) @ViewChild decorator

Define a @Viewchild in your component:

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

Then in your Html:

<ckeditor #myEditor [editor]="editor" [data]="data" [(ngModel)]="data"></ckeditor>

Now, you can get data with the following code :

this.myEditor.data

2) Change Event

Import the following line in your component :

import { ChangeEvent } from "@ckeditor/ckeditor5-angular/ckeditor.component";

Define a variable in your component named retrieveddata to store data

retrieveddata: string = null;

Put the following method in your component as chagneEvent

public onChange({ editor }: ChangeEvent) {
 const data = editor.getData();
 this.retrieveddata=data;
}

Then in your Html :

<ckeditor [editor]="editor" [data]="data" [(ngModel)]="data" (change)="onChange($event)"></ckeditor>

Now, your data is stored in retrieveddata variable. console it to see.

StackBlitz Here.

DEMO (check your browser's console)