How to enable code editing in CKEditor (Classic) in Metronic with Bootstrap 5?
Hi,
I'm using the CKEditor integrated with the Metronic theme (Classic Editor) built on Bootstrap 5. Is it possible to enable a feature for editing HTML code directly in the editor?
I am initializing the editor with the following code:
ClassicEditor
.create(document.querySelector("#kt_docs_ckeditor_classic"))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});Do I need to include a specific plugin or create a custom CKEditor build for this?
Thanks!
Replies (1)
Hi,
To enable HTML code editing in CKEditor (Classic Editor) integrated with Metronic and Bootstrap 5, you need to include the Source Editing plugin. This plugin allows users to toggle between the WYSIWYG editor and the raw HTML source code editor.
Here’s how you can achieve this:
Steps to Enable Source Editing in CKEditor
1.Include the SourceEditing Plugin
The SourceEditing plugin is not included in the standard CKEditor build by default. You may need to create a custom build or use the online builder provided by CKEditor to include it.
2.Modify the Initialization Code
Update your initialization code to include the SourceEditing plugin in the toolbar.
3.Initialization Code with Source Editing
Here’s the updated code:
ClassicEditor
.create(document.querySelector("#kt_docs_ckeditor_classic"), {
toolbar: {
items: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"|",
"outdent",
"indent",
"|",
"blockQuote",
"insertTable",
"mediaEmbed",
"undo",
"redo",
"|",
"sourceEditing" // Add the Source Editing button
]
},
plugins: [
Essentials,
Heading,
Bold,
Italic,
Link,
List,
Outdent,
Indent,
BlockQuote,
Table,
TableToolbar,
MediaEmbed,
Undo,
Redo,
SourceEditing // Include the SourceEditing plugin
]
})
.then(editor => {
console.log("Editor initialized successfully", editor);
})
.catch(error => {
console.error("Error initializing the editor:", error);
});
