4

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

4

1 回答 1

8

代替

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

利用

theEditor.setData( '' );

它与 v4 中的几乎相同，只是您必须保存对创建的编辑器的引用（正如您所做的那样），因为v5 中没有全局编辑器注册表。

于 2018-04-16T07:47:35.393 回答