Sorry if this has been discussed before, but I have searched exhaustively and only found solutions to the older version, not 5. I want to have two buttons for my forms, SEND and RESET. When someone clicks on the reset button I want the form to be clear of all input. I know in the older version I could have done the following:
CKEDITOR.instances['#editor'].setData('');
But this doesn't work with version 5. So I tried
$("#reset").click(function() {
$('.ck-editor__editable').html( '' );
});
This works and clears up the form. But the problem is the data that just cleared reappears as soon as you click back on the form after clearing it. Please see below for the full code.
Thank you in advance for your help
<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>