Skip to content

Instantly share code, notes, and snippets.

@carmelodevuz
Created October 4, 2022 21:06
Show Gist options
  • Save carmelodevuz/78a18d194b2a4fd8f3c1edc8a65730e5 to your computer and use it in GitHub Desktop.
Save carmelodevuz/78a18d194b2a4fd8f3c1edc8a65730e5 to your computer and use it in GitHub Desktop.
Metronic 8 Angular CKEditor integration

!!! Check out the official documentation of CKEditort first https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html.

  1. Run the command: yarn add ckeditor4-angular.
  2. import CKEditorModule to your application.
  3. Add variable editorData and method onChange into code behind (See example in your.component.ts file).
  4. Add ckeditor into your HTML markup (See example in your.component.html file).
<div>
<ckeditor [data]="editorData" (change)="onChange($event)"></ckeditor>
</div>
import { CKEditor4 } from 'ckeditor4-angular';
export class YourComponent implements OnInit {
public editorData = '<p>Hello, world!</p>';
public onChange(event: CKEditor4.EventInfo) {
this.editorData = event.editor.getData();
console.log(this.editorData);
}
}
import { CKEditorModule } from 'ckeditor4-angular';
@NgModule( {
imports: [
...
CKEditorModule,
...
],
})
...
@andreyzag
Copy link

asdf fas d asdf

@andreyzag
Copy link

dsaffasd fsad

@andreyzag
Copy link

asdfsd fad

@andreyzag
Copy link

asdfasdf

@ozzpy
Copy link

ozzpy commented Feb 5, 2023

poiolp;kj c pz[xoic opizxj

@Jagan004
Copy link

jhjvjhjhbjhvh

@Naeemkhan456
Copy link

dsfdsf

@Snorky35
Copy link

Snorky35 commented Nov 3, 2023

fghfghsfhhsfgh

fgsdg

@artur33s
Copy link

Hello, but is ckeditor4 is old, not supported right now. ckeditor5 is available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment