对不起，如果这已经讨论过之前，但我已经彻底搜索，只找到解决方案的旧版本，而不是5。我想有两个按钮，我的形式，发送和重置。当有人点击重置按钮，我希望该表格是所有输入清除。我知道在旧版本中，我可以做到以下几点：
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>
2条答案
按热度按时间pepwfjgg1#
而不是
使用
它几乎与v4中相同，除了您必须保存对创建的编辑器的引用（正如您所做的那样），因为在v5中没有全局编辑器注册表。
roejwanj2#