How to get data from CKEditor 5 instance

user3691644

I know that for CKEditor 4, you can get the textarea data like this:

var content = CKEDITOR.instances['comment'].getData();

How is this done for CKEditor 5?

Reinmar

You can find the answer in the Basic API guide.

Basically, in CKEditor 5 there's no single global editors repository (like the old CKEDITOR.instances global variable). This means that you need to keep the reference to the editor that you created and use that reference once you'll want to retrieve the data:

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.getData(); // -> '<p>Foo!</p>'
    } )
    .catch( error => {
        console.error( error );
    } );

If you need to retrieve the data on some other occasions (who would read it just after initializing the editor, right? ;)), then save the reference to the editor in some shared object of your application's state or some variable in the scope:

let theEditor;

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        theEditor = editor; // Save for later use.
    } )
    .catch( error => {
        console.error( error );
    } );

function getDataFromTheEditor() {
    return theEditor.getData();
}

See this JSFiddle: https://jsfiddle.net/2h2rq5u2/

EDIT: If you need to manage more than one editor instance, see CKEDITOR 5 get editor instances.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Symfony 5 Delete methods, Unable to guess how to get a Doctrine instance from the request information for parameter

How to get data from two related tables in laravel 5?

How to get value of CKEditor 5?

How do I get toolbar available items in CKEDITOR 5?

How to get validated data from Validator instance in Laravel?

How to get the text from an Insert event in CKEditor 5?

CKEditor 5 – get editor instances

From @ctrl/ngx-codemirror library, how to get the codeMirror instance with typeScript and angular 5

Getting xml from ckeditor 5

How to set CKEditor 5 height

Get iframe element of current CKEDITOR instance

How to get data in form of QString from QVariant in Qt5?

Ckeditor 5 removing line-breaks from copying data

How to get data from the last 5 FULL minutes?

How to retrieve data from ckeditor 5 in angular 7?

Get data from filepond object instance

Cannot get instance of CKEditor

How to trigger CKEditor 5 image file system dialog from code?

How to set data to CKEDITOR after CKEDITOR load?

How to get data from DB in Test Laravel 5

Get data from mysql to edit on CKEditor

How to get the img url from CKEditor 5 getData method?

How to add plugins to CKEditor for Angular "@ckeditor/ckeditor5-angular"?

How do I get rid of paragraph tags in CKEditor from CDN

How to get data from two related tables in laravel 5

how to get data from CKEditor?

How to set Data with document editor in CKEditor 5

Symfony 5: how to get option data from route rules

How to compare and get data from less than 5 minutes only?

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive