Setting value of CKEditor 5

Question

I'm developing a function on my website where a user should be able to edit his or hers own topic using ckeditor 5 and a textarea. The textarea is placed inside a modal. However, when I try to prefill the textarea when a user pushes a button, nothing goes inside the textarea. I have tried the following:

var editor;
ClassicEditor
  .create(document.querySelector('#edit-reply-modal'))
  .then(editor => {
    editor = editor;
  })
$(".toggle-edit-modal").click(function(e) {
  e.preventDefault();
  editor.setData("<p>Testing</p>"));
$("#edit-reply-modal").html("<p>Testing</p>");
});

Any help is appreciated.

Answer 1

I see you have one ')' more than needed editor.data.set("<p>Testing</p>"));

If you still can't set data, than try to set data like this :

 editor.data.set("<p>Testing</p>");

Answer 2

HTML Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>

<textarea id="edit-reply-modal"><p>Old Data</p></textarea>
<button id="toggle-edit-modal">Fill New Data</button>

JAVASCRIPT Code:

let YourEditor;
ClassicEditor
  .create(document.querySelector('#edit-reply-modal'))
  .then(editor => {
    window.editor = editor;
    YourEditor = editor;
  })

$('#toggle-edit-modal').on('click', function() {
  YourEditor.setData('<p>This is the new Data!</p>');
})



let YourEditor;
ClassicEditor
  .create(document.querySelector('#edit-reply-modal'))
  .then(editor => {
    window.editor = editor;
    YourEditor = editor;
  })

$('#toggle-edit-modal').on('click', function() {
  YourEditor.setData('<p>This is the new Data!</p>');
})
button{
  margin-top:20px;
  padding: 5px;
  color: white;
  background: #00F;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>

<textarea id="edit-reply-modal"><p>Old Data</p></textarea>
<button id="toggle-edit-modal">Fill New Data</button>