Laravel 5: очистить ckeditor, используя javascript

Question

В нашем приложении мы реализовали ckeditor для нашей текстовой области. Это работает, но у меня проблема с удалением значения после отправки.

Файл Add.vue

<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' ]
        } );

Моя форма в отправке

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!");
        }
    });
},

РЕДАКТИРОВАНИЕ

Я добавил textarea = document.querySelector ("#описание");затем в моем методе я также добавил этот 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!");
        }
    });
},

Вопрос: Как удалить значение моего ckeditor после отправки?

Answer 1

Вы можете сделать что-то вроде этой простой функции, чтобы очистить свой textarea, и в случае использования vuejs вместо document.querySelector и document.getElementById используйте

vuejs- refs

вызов этой функции после того, как ваше представление работает тоже.

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>