How to get text from CKEditor 5 using JS or jQuery?

Question

I have this code to enable CKEditor from their website, but I don't know how to interact with it. How do I get data from it using javascript or jquery?

ClassicEditor
  .create(document.querySelector('#editor'))
  .then(editor => {
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<textarea name="content" id="editor">
<p>Here goes the initial content of the editor.</p>
</textarea>

Have you read the (Docs)[https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html] about ckEditor? Maybe here is the answer — Sfili_81, Jun 18 '18 at 14:17
Possible duplicate of [Get text from CK Editor textarea in JQuery](https://stackoverflow.com/questions/28379925/get-text-from-ck-editor-textarea-in-jquery) — Troyer, Jun 18 '18 at 14:25
Possible duplicate of [How to get value of CKEditor 5?](https://stackoverflow.com/questions/47013985/how-to-get-value-of-ckeditor-5) — Reinmar, Jun 19 '18 at 06:50

Penny Liu · Accepted Answer · 2018-06-19T02:53:02.653

Please see the changes I have applied to your code snippet.

let theEditor;

ClassicEditor
  .create(document.querySelector('#editor'))
  .then(editor => {
    theEditor = editor;

  })
  .catch(error => {
    console.error(error);
  });


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

document.getElementById('getdata').addEventListener('click', () => {
  alert(getDataFromTheEditor());
});

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<textarea name="content" id="editor">
<p>Here goes the initial content of the editor.</p>
</textarea>
<button id="getdata">Print data</button>

How to get text from CKEditor 5 using JS or jQuery?

1 Answers1