Laravel 5：使用 javascript 清除 ckeditor答案

【问题标题】：Laravel 5: Clear the ckeditor using javascriptLaravel 5：使用 javascript 清除 ckeditor
【发布时间】：2019-10-21 13:44:17
【问题描述】：

在我们的应用程序中，我们为 textarea 实现了 ckeditor。它正在工作，但我在提交后删除值时遇到问题。

添加.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("#description");然后在我的方法中我还添加了这个 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的值？

【问题讨论】：

标签： javascript vue.js laravel-5 ckeditor

【解决方案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>

【讨论】：

您好先生，我更新了我的帖子。正如你所提到的。我添加了这个 const textarea = document.querySelector("#description");还有 textarea.innerHTML = '';