CKeditor implementation

1

I am trying to add CKeditor to my project but I seem to hit a roadblock, their tutorial and yours seem to cover me doing the whole set up, and I managed to get it on my page. But I fail to find a way to get the data out of it. Their documentation says I need to use

var data = CKEDITOR.instances.editor1.getData();

But any attempt I try to get that command to run only results in Radzen saying it can't find CKEditor... any suggestions?

2

We aren't familiar with the way CKEditor works. It is probably a good idea to use their Angular component.

3

I am using their Angular component, and I can get the text into the editor, my issue seems to be to get it to output a variable to radzen I can use, https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#manually-retrieving-the-data
Specifies what command I should run, though I fail to find a way to integrate that command into radzen and receiving a variable I can interact with on radzen so I can use it on a form.

If you guys aren't in the know how of how to do this, do you have any other examples of html editors that could fit better?

PS: I tried to grab the example you guys have in your github for PrimeNG editor, but the TypeScript version seems to be old, and fails to run in modern radzen, maybe update that sometime?

4

The CKEditor documentations says you can use ngModel as with any Angular input component:

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

This should work with Radzen - set ngModel to a page property and it would be two-way data-bound. This is what is used in the aforementioned PrimeNG Editor demo:

5

I followed the docs from CKEditor Angular page as @korchev suggested and wasn't being able to get it to work until I imported CKEditorModule in app.module.ts.