Setting value of CKEditor 5 - ckeditor

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 :
<!-- The editable element in the editor's DOM structure. -->
<div class="... ck-editor__editable ..." contenteditable="true">
<!-- Editable content. -->
</div>
vanilla Javascript :
// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );
// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;
// Use the editor instance API.
editorInstance.setData( '<p>Hello world!<p>' );
Docs : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html

Answer 3

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>

Answer 4

According to the documentation unlike ckeditor4 there is not any CKEDITOR.instances, so if you want to update your editor content, you can create a global instance of yor editor and then use setData() in order to update content by ajax.
Sample Code:
let myEditor;
ClassicEditor
.create(document.querySelector('#menuContent'), {
language: {
// The UI will be English.
ui: 'fa',
// But the content will be edited in Arabic.
content: 'fa'
},
placeholder: 'متن منو را وارد نمایید...'
})
.then(editor => {
window.editor = editor;
myEditor = editor;
})
.catch(err => {
console.error(err.stack);
});
function ShowMenuDetails(id) {
$.ajax({
url: '#Url.Action("MenuDetails", "Admin")',
type: 'POST',
data: JSON.stringify({ id: id }),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (data) {
$("#menuTitle").val(data.MenuTitle);
$("#order").val(data.MenuOrder);
myEditor.setData(data.MenuContent);
$("#myModal").modal();
},
error: function (err) {
alert(err);
},
statusCode: {
404: function (content) { alert(content); },
500: function (content) { alert(content); }
}
});
}