Laravel 5: Clear the ckeditor using javascript

Question

In our application, we implemented the ckeditor for our textarea. It is working but Im having a problem in removing the value after the submission.

Add.vue file

<label>Description</label>
<textarea class="form-control" name="description" id="description"></textarea>

App.js

ClassicEditor
        .create( document.querySelector( '#description' ), {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo' ]
        } );

My form in submission

createData(e){
    e.preventDefault();
    CKEDITOR.replace( 'description' );
    var formData = $('#add-vendor').serialize();
    swal({
        title: "Are you sure?",
        text: 'Transaction will be saved.',
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willSave) => {
        if (willSave) {
            axios.post("/configurations/vendors/addVendor", formData)
                .then((response)  =>  {
                    var span = document.createElement("span");
                    span.innerHTML = '<span class="loading-animation">LOADING...</span>';
                    swal({
                        content: span,
                        icon: "warning",
                        buttons: false,
                        closeOnClickOutside: false
                    });
                    $("#vendor-table").DataTable().destroy();
                    this.items  = response.data;
                    this.$emit('emitToVendorList', response.data);
                    $('.add-vendor-finish').attr('disabled','disabled');
                })
                .then(()=>{

                    VendorTableList();
                    swal("Success!", {
                        icon: "success",
                    });
                    $('#add-vendor').trigger("reset");
                    //CKEDITOR.instances.description.setData(''); ( didnt work )
                    $('#description').html(''); // didnt work
                    $("#department").select2("destroy");
                    getDepartmentLimit();
                    $('.add-vendor-finish').removeAttr('disabled','disabled');
                });
        } else {
            swal("Aborted!");
        }
    });
},

EDITED

I added the textarea = document.querySelector("#description"); then in my method I also added this textarea.innerHTML = '';

createData(e){
    e.preventDefault();
    var formData    = $('#add-vendor').serialize();
    const textarea  = document.querySelector("#description");

    swal({
        title: "Are you sure?",
        text: 'Transaction will be saved.',
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willSave) => {
        if (willSave) {
            axios.post("/configurations/vendors/addVendor", formData)
                .then((response)  =>  {
                    var span = document.createElement("span");
                    span.innerHTML = '<span class="loading-animation">LOADING...</span>';
                    swal({
                        content: span,
                        icon: "warning",
                        buttons: false,
                        closeOnClickOutside: false
                    });
                    $("#vendor-table").DataTable().destroy();
                    this.items  = response.data;
                    this.$emit('emitToVendorList', response.data);
                    $('.add-vendor-finish').attr('disabled','disabled');
                })
                .then(()=>{

                    VendorTableList();
                    swal("Success!", {
                        icon: "success",
                    });
                    $('#add-vendor').trigger("reset");
                    textarea.innerHTML = '';
                    $("#department").select2("destroy");
                    getDepartmentLimit();
                    $('.add-vendor-finish').removeAttr('disabled','disabled');
                });
        } else {
            swal("Aborted!");
        }
    });
},

Question: How to I remove the value of my ckeditor after the submission?

Answer 1

You can do something like that just a simple function to clear your textarea and in case of you're using vuejs instead of document.querySelector and document.getElementById use

vuejs - refs

calling this function after your submission works too.

 const textarea = document.querySelector("#description"); document.getElementById("#btn").addEventListener("click", function() { textarea.innerHTML = ""; })

 <textarea class="form-control" name="description" id="description">hello</textarea> <button id="#btn">clear</button>