Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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);
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(