reset ckeditor
how can I reset CKeditor from javascript and jquery with Classic CKEditor.
and I also want to know how can I localize it to arabic.
I am using metronic Bootstrap and HTML version v8.2.7
Replies (5)
I have tried everything in the CKEditor docs but it does not work so I want to know how to reset it.
I am initiating it in the code:
let rules_editor = ClassicEditor.create(document.querySelector('#competition_rules'));
and in HTML:
<!--begin::Col-->
<div class="col-md-12 fv-row">
<label class="fs-6 fw-semibold mb-2">{% trans 'Rules' %}</label>
<textarea class="form-control form-control-solid" rows="3" name="rules"
placeholder="Enter the competition rules'" ></textarea>
</div>
<!--end::Col-->
I want the code to reset it. can you help me find this way
Hi,
Where are you executing your code ?
KTUtil.onDOMContentLoaded(function() {
// your code
});Also please try something below:
let initialContent = "<p>Initial content here</p>";
let editor;
// Initialize CKEditor
ClassicEditor.create(document.querySelector("#editor"))
.then(newEditor => {
editor = newEditor;
editor.setData(initialContent);
})
.catch(error => {
console.error(error);
});
// Reset Button Event Listener
document.getElementById("reset").addEventListener("click", () => {
editor.setData(initialContent);
});Regards,
Sean
it worked for me. now I want to know how can I localize it to Arabic language
Hi,
Glad to hear that it worked for you!
Please check to learn how to localize it.
Our support does not cover end-to-end support for 3rd-party plugins that were not developed by us.
Regards,
Sean
Hi
For the CKEditor usage please refer to the official documentation of CKEditor.
Metronic includes the CKeditors package assets in gulp config tools/gulp.config.js
ckeditorclassic: {
src: {
scripts: [
"{$config.path.node_modules}/@ckeditor/ckeditor5-build-classic/build/ckeditor.js",
],
},
dist: {
scripts:
"{$config.dist}/plugins/custom/ckeditor/ckeditor-classic.bundle.js",
},
},
ckeditorinline: {
src: {
scripts: [
"{$config.path.node_modules}/@ckeditor/ckeditor5-build-inline/build/ckeditor.js",
],
},
dist: {
scripts:
"{$config.dist}/plugins/custom/ckeditor/ckeditor-inline.bundle.js",
},
},
ckeditorballoon: {
src: {
scripts: [
"{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon/build/ckeditor.js",
],
},
dist: {
scripts:
"{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon.bundle.js",
},
},
ckeditorballoonblock: {
src: {
scripts: [
"{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon-block/build/ckeditor.js",
],
},
dist: {
scripts:
"{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon-block.bundle.js",
},
},
ckeditordecoupleddocument: {
src: {
scripts: [
"{$config.path.node_modules}/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js",
],
},
dist: {
scripts:
"{$config.dist}/plugins/custom/ckeditor/ckeditor-document.bundle.js",
},
},You can build your custom package here:
Regards,
Sean
