Question

很抱歉，如果之前已经讨论过这个问题，但我已经详尽地搜索过，只找到了旧版本的解决方案，而不是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>

Answer 1

而不是

$('.ck-editor__editable').html( '' );

使用

theEditor.setData( '' );

它与v4几乎相同，只是你必须保存对创建的编辑器的引用（正如你所做的那样）因为v5中的there's no global editor registry。

重置CKEditor5表单

1 个答案: