Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Share: Codemirror for CKEditor source or Page editor
I'm new to GetSimple and this is my first time to use it. GetSimple is indeed simple to use, love it!

I want to share how to use Codemirror for CKeditor source.
Since I don't know the GetSimple change from each version, for information, I use GetSimple 3.2.0.

This is the screenshot when we done:
[Image: attachment.php?aid=123]

The step is:
  1. I use CKEditor v., you can download it here:
    note: Make sure you download the full package. If you choose standard, some item at toolbar will not appear.
  2. Rename (or delete) current ckeditor in admin\template\js\ then copy the new version.
  3. Open: admin\edit.php
  4. Find skin : 'getsimple' and change it to skin : 'moono'
  5. Download Codemirror plugin for CKEditor
  6. Copy the codemirror folder to admin\template\js\ckeditor\plugins
  7. Open: admin\template\js\ckeditor\config.js
  8. Put code bellow before the config.toolbarGroups
    config.extraPlugins = 'codemirror';
    config.codemirror = {
        theme: 'default',
        lineNumbers: true,
        lineWrapping: true,
        matchBrackets: true,
        autoCloseTags: true,
        autoCloseBrackets: true,
        enableSearchTools: true, // Whether or not to enable search tools, CTRL+F (Find), CTRL+SHIFT+F (Replace), CTRL+SHIFT+R (Replace All), CTRL+G (Find Next), CTRL+SHIFT+G (Find Previous)
        enableCodeFolding: true,
        enableCodeFormatting: true,
        autoFormatOnStart: true,
        autoFormatOnUncomment: true,
        highlightActiveLine: true,
        highlightMatches: true,
        showFormatButton: true,
        showCommentButton: true,
        showUncommentButton: true
  9. If you want to change the Codemirror theme, you can see the available file in admin\template\js\ckeditor\plugins\codemirror\theme\. Codemirror theme demo at
  10. Go to Page to see the result.

Use Codemirror if HTML Editor is disabled.

This is the screenshot when we done:
[Image: attachment.php?aid=124]

  1. Open: admin\edit.php
  2. Find <?php } ?> at line 365 and make sure it is the closed bracket for the <?php if ($HTMLEDITOR != '') { ?> at line 320
  3. Replace it with code bellow:
  4. Code:
    <?php } else { ?>
        <script type="text/javascript" src="template/js/codemirror/lib/codemirror-compressed.js"></script>
        <link rel="stylesheet" href="template/js/codemirror/lib/codemirror.css">
        <link rel="stylesheet" href="template/js/codemirror/theme/default.css">

        <script type="text/javascript">
        window.onload = function() {
            var editor = CodeMirror.fromTextArea(document.getElementById("post-content"), {
                lineNumbers: true,
                lineWrapping: true,
                matchBrackets: true,
                indentUnit: 4,
                indentWithTabs: true,
                enterMode: "keep",
                tabMode: "shift",
                onCursorActivity: function() {
                    editor.setLineClass(hlLine, null);
                    hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
            var hlLine = editor.setLineClass(0, "activeline");
    <?php } ?>
  5. To show the blue active line, put code bellow at the end of admin\template\js\codemirror\lib\codemirror.css
    .CodeMirror {font:13px/1.4em monospace;}
    .CodeMirror .activeline { background: #e8f2ff; }
  6. Disable HTML editor in setting and go to Page to see the result.

I'm not fully understand -yet- how to make a plugin for this share.
So I decide to share it with manual modification. If someone can make a plugin for this, feel free to do it.

Attached Files Thumbnail(s)
Thank you for your infos!

This would be a fine topic for the WIKI, as we already show a HowTo for the Editor with the Syntaxhighlighter from Alex Gorbachev,

see here

I think we should add this info to the WIKI in the near future, as the WIKI gets overwhauled in the moment

Das deutschsprachige GetSimple-(Unter-)Forum:
Thank you and feel free to put it in WIKI. I hope it will usefull for other user.
A life saver ! Tip worked great Smile

Thx a bunch
Or just install
Stable patched to ckeditor to 4.1 branch
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
I don't know for the patch ( not tested yet ), but along with CEVA's tips, i add to edit edit.php where CKEditor is attached to the text area. It kept stripping html tags Sad

So i added :

var editor = CKEDITOR.replace( 'post-content', {
skin : 'moono',
allowedContent: true,
forcePasteAsPlainText : true,


Seems to fix it.
Shawn....I downloaded the latest 3.34 GS. I cannot get the codemirror syntax highlighter to work. I thought that the patch_cke was merged in that enabled the source highlighting in the cke editor?

Any thoughts? Did I forget to init it or something?
patch_cke is a separate branch, under other downloads
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
(2014-11-20, 03:26:33)shawn_a Wrote: patch_cke is a separate branch, under other downloads

Ok thanks!

Users browsing this thread: 1 Guest(s)