jobs list

Manually retrieving the data

When you:

• Use Ajax requests instead of the classic integration with HTML forms,
• Implement a single-page application,
• Use a different editor type than the Classic editor (and hence, cannot use the previous method),

Getting the editor data with getData()

If the editor content needs to be retrieved for any reason, like for sending it to the server through an Ajax call, use the getData() method:

const data = editor.getData();

Setting the editor data with setData()

To replace the editor content with new data, use the setData() method:

editor.setData( '<p>Some text.</p>' );

For that, you need to store the reference to the editor because there is no global CKEDITOR.instances property. You can do that in multiple ways, for example by assigning the editor to a variable defined outside the then()'s callback:

let editor; ClassicEditor    .create( document.querySelector( '#editor' ) )    .then( newEditor => {        editor = newEditor;    } )    .catch( error => {        console.error( error );    } ); // Assuming there is a <button id="submit">Submit</button> in your application. document.querySelector( '#submit' ).addEventListener( 'click', () => {    const editorData = editor.getData();    // ... } );

Updating the source element

If the source element is not <textarea>, CKEditor 5 clears its content after the editor is destroyed. However, if you would like to enable updating the source element with the output coming from the data pipeline, you can use the updateSourceElementOnDestroy configuration option.

ClassicEditor.create( document.querySelector( '#editor' ), {    // ...    updateSourceElementOnDestroy: true } );

Enabling the updateSourceElementOnDestroy option in your configuration might have some security implications, depending on the plugins you use. While the editing view is secured, there might be some unsafe content in the data output, so enable this option only if you know what you are doing. Be especially careful when using the Markdown, General HTML Support, and HTML embed features.