Mecha CMS

Add extra functionality to the core engine.

CKEditor 4

Table of Contents
  1. Features 
    1. Styles 
    2. Languages 
    3. Codes 

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available under open source and commercial licenses.

Download Stable Version Download Development Version

Something looks broken? We accept bounties to fix them faster.

v2.3.051 Downloads
v2.2.025 Downloads
v2.0.222 Downloads
v2.0.124 Downloads
v2.0.027 Downloads
CKEditor 4

This extension works only for pages with type of HTML or text/html.



Images that will be inserted to the editor content will use the CSS class as follows:

<!-- `Full` -->
<figure class="image">
  <img alt="" src="/path/to/image.jpg">
  <figcaption>Image caption.</figcaption>

<!-- `Align Left` -->
<figure class="image align-left">
  <img alt="" src="/path/to/image.jpg">
  <figcaption>Image caption.</figcaption>

<!-- `Align Center` -->
<figure class="image align-center">
  <img alt="" src="/path/to/image.jpg">
  <figcaption>Image caption.</figcaption>

<!-- `Align Right` -->
<figure class="image align-right">
  <img alt="" src="/path/to/image.jpg">
  <figcaption>Image caption.</figcaption>

You might need to add some special treatment to the generated HTML markup:

.image {
  display: block;

.align-left {
  float: left;

.align-center {
  float: none;

.align-right {
  float: right;


All language files stored in .\lot\x\c-k-editor.4\lot\asset\@ckeditor\ckeditor4\lang and .\lot\x\c-k-editor.4\lot\asset\@ckeditor\ckeditor4\plugins\*\lang folders has been removed except en.js to reduce the file size.


The codetag plugin is a modified version of this plugin with some tweaks to make it possible to toggle the <code> tag based on this pull.

The codesnippet plugin has been modified so that it doesn’t use any syntax highlighter features. The main function of this plugin has been simplified just to insert a piece of code snippet with some HTML classes. You can apply the external syntax highlighter plugin on the public view of the site later. If you don’t like it, you can download the original codesnippet plugin here to replace the current codesnippet plugin.


Alexander Liebrecht

Taufik?! After page editing and publishing, I have in the backend a message:

This page is not real, and has never existed before.

Is this an error message, and can I fix this?

Taufik Nurrohman

Need more details about what kind of URL you are currently in, and what panel version you are currently use.

Please use the forum feature for better conversations.