Append value to ckeditor 5 in textarea jquery in modal

127
March 05, 2022, at 1:40 PM

In a bootstrap 4 modal is located a form with a textarea using CKEditor 5. This form is for updating data from a database. When clicking on the update button the edit form is opened in the modal, I use jquery to get the text from the backend and append it to the textarea. If I don't use ckeditor the text is appended to the textarea properly, but with ckeditor I cannot see the text.

Any help would be very appreciated!

// modal form
 <div class="modal fade editPreaching" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-body">
<form action="{{  route('update.preaching.details') }}" method="post" id="update-preaching-form">
@csrf
<div class="form-group">
<label for="">Abstracto</label>
<textarea class="form-control ckeditor" rows="15"  name="resume" id="resume" ></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-success">Save Changes</button>
</div>
</form>
</div>
</div>

 // initiate ckeditor 5
 // As I have many textarea I use a class selector
document.querySelectorAll('.ckeditor').forEach(function (val) {
ClassicEditor
.create(val, {
language: 'es',
})
.then( editor => {
console.log( editor );
theEditor = editor;
} )
.catch(error => {
console.log(error);
});
});
// jquery
   // Show modal after clicking on edit button 
    $(document).on('click','#editPreachingBtn', function(){
    var preaching_id = $(this).data('id');
    $('.editPreaching').find('form')[0].reset();
    $.post('<?= route("get.preaching.details") ?>',{preaching_id:preaching_id}, function(data){
    $('.editPreaching').find('textarea[name="resume"]').val(data.details.resume);
    $('.editPreaching').modal('show');
    },'json');
    });
Rent Charter Buses Company
READ ALSO
How to create a TailwindCSS grid with a dynamic amount of grid columns?

How to create a TailwindCSS grid with a dynamic amount of grid columns?

I'm using Vue3 with TailwindCSS and want to create a grid with a dynamic grid-cols-{n} classI know that TailwindCSS supports up to 12 columns by default but I can't customize the theme because the amount of columns is completely dynamic

144
Background-color and spacing between posts in posting system [duplicate]

Background-color and spacing between posts in posting system [duplicate]

Now, I have a posting systemThere's an input field and a submit button

110
How to change default date format in JavaScript or in HTML

How to change default date format in JavaScript or in HTML

I've a input field as type date and the of that format is dd/mm/yyyy which is not defaultIn my desktop screen it's working properly and also I've a placeholder in the same field as DD/MM/YYYY

137
How to adjust Bulma Column height when one changes?

How to adjust Bulma Column height when one changes?

is it possible to make a column adjust its height when others change? I have all columns at the same height using flex but when I change one of them dynamically, the others stay the same

117