Share: Codemirror for CKEditor source or Page editor

[ceva]

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:


The step is:

1. I use CKEditor v.4.0.1.1, you can download it here: http://ckeditor.com/download
   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 http://ckeditor.com/addon/codemirror
   
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
   
   Code:

   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 http://codemirror.net/demo/theme.html
   
10. Go to Page to see the result.
    

Use Codemirror if HTML Editor is disabled.

This is the screenshot when we done:

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",
            mode:"application/x-httpd-php",
            tabMode: "shift",
            onCursorActivity: function() {
                editor.setLineClass(hlLine, null);
                hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
            }
        });
        var hlLine = editor.setLineClass(0, "activeline");
    }  
    </script>
<?php } ?>
5. To show the blue active line, put code bellow at the end of admin\template\js\codemirror\lib\codemirror.css
   
   Code:

   .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.

[Connie]

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, http://alexgorbatchev.com/SyntaxHighlighter

see here

http://get-simple.info/wiki/how_to:editor_configuration_syntaxhighlight

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

[ceva]

Thank you and feel free to put it in WIKI. I hope it will usefull for other user.

[kohai]

A life saver ! Tip worked great

Thx a bunch

[shawn_a]

Or just install
Stable patched to ckeditor to 4.1 branch
https://github.com/GetSimpleCMS/GetSimpleCMS/wiki/testing

[kohai]

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

So i added :

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

{...}

Seems to fix it.

[lnickel]

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?

[shawn_a]

patch_cke is a separate branch, under other downloads

[lnickel]

patch_cke is a separate branch, under other downloads

Ok thanks!