Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Share: Codemirror for CKEditor source or Page editor
#1
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.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:
[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",
                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.


Attached Files Thumbnail(s)
       
Reply


Messages In This Thread
Share: Codemirror for CKEditor source or Page editor - by ceva - 2013-03-03, 14:46:47



Users browsing this thread: 1 Guest(s)