很抱歉，如果之前已经讨论过这个问题，但我已经进行了详尽的搜索，只找到了旧版本的解决方案，而不是 5。我想为我的表单设置两个按钮，SEND 和 RESET。当有人点击重置按钮时，我希望表单清除所有输入。我知道在旧版本中我可以执行以下操作:
CKEDITOR.instances['#editor'].setData('');
但这不适用于版本 5。所以我尝试了
$("#reset").click(function() {
$('.ck-editor__editable').html( '' );
});
这有效并清理了表单。但问题是刚刚清除的数据在清除后点击返回表格时又重新出现。请参阅下面的完整代码。
预先感谢您的帮助
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Classic editor</title>
</head>
<body>
<style>
.ck-editor__editable {
min-height: 200px;
}
</style>
<h1>Classic editor</h1>
<textarea name="content" id="editor"></textarea>
<button id="getdata">Print data</button>
<button id="reset">Reset data</button>
<div>
<p>The Textarea output goes here</p>
<div class="form-output"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-beta.2/classic/ckeditor.js"></script>
<script>
$(function(){
let theEditor;
ClassicEditor
.create( document.querySelector( '#editor' ) , {
toolbar: [ 'heading', '|' , 'bold', 'italic', 'underline', 'bulletedList', 'numberedList', 'blockQuote', 'alignment', 'link', 'undo', 'redo', '' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading2', view: 'h2', title: 'Heading', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Sub Heading', class: 'ck-heading_heading3' }
]
}
})
.then( editor => {
theEditor = editor; // Save for later use.
} )
.catch( error => {
console.error( error );
} );
function getDataFromTheEditor() {
return theEditor.getData();
}
document.getElementById( 'getdata' ).addEventListener( 'click', () => {
form_data = getDataFromTheEditor();
//alert( form_data );
} );
showData = $('#getdata');
showData.click(function(){
$(document).ready(function() {
$('.form-output').html( form_data );
});
});
$("#reset").click(function() {
$('.ck-editor__editable').html( '' );
});
});
</script>
</body>
</html>最佳答案
代替
$('.ck-editor__editable').html( '' );
使用
theEditor.setData( '' );
它几乎与 v4 中的相同，只是您必须保存对创建的编辑器的引用(正如您所做的那样)，因为 there's no global editor registry在 v5 中。
关于javascript - 重置 CKEditor5 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49847030/