Laravel 5:使用 javascript 清除 ckeditor

Question

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

Add.vue file

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

应用.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 的值？

Answer 1

你可以做类似的事情，只是一个简单的函数来清除你的textarea，如果你使用vuejs而不是document.querySelector和document.getElementById使用

Vuejs - 参考文献

在提交后调用此函数也可以。

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>