CkEditor conflict with jquery form

I am using CKEditor and trying to submit my form with jquery but I have a conflict Jquery

        $(document).ready(function (e) {
        $("#form").on('submit',(function(e) {
            e.preventDefault();
            console.log(new FormData(this))
            $('.loading-container').show();
                $.ajax({
                url: "store-course-teacher",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,

                success: function(data)
                {
                    $('.loading-container').hide()
                    if(data.status == 'done')
                    {
                        $('#form').hide();
                        $('#add-section').show();
                        $('#course-title').html($('#title').val());
                        $('.course-id').val(data.course_id)

                    }
                }
            });
        }));
    });

and from my controller I dumped the result and all text area with ckeditor is NULL I am trying to be clear as possible but that's all I got

2 answers

  • answered 2019-03-13 18:56 Nicolay

    I believe with ckeditor, you have to get the HTML from the text editor like this:

    var data = CKEDITOR.instances.editor1.getData();
    

    So before calling your ajax, perhaps set data to a hidden input in your form so that your new FormData(this) remains intact?

    var data = CKEDITOR.instances.editor1.getData();
    $('#MyHiddenInput').val(data);
    

    More info here

  • answered 2019-03-14 10:29 user10076385

    best way to send ckEditor with the from was updating the ckEditor instanes

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
     }
    

    I found the solution here