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
#2
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:edito...xhighlight

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:   http://get-simple.info/forums/forumdisplay.php?fid=18
Reply
#3
Thank you and feel free to put it in WIKI. I hope it will usefull for other user.
Reply
#4
A life saver ! Tip worked great Smile

Thx a bunch
Reply
#5
Or just install
Stable patched to ckeditor to 4.1 branch
https://github.com/GetSimpleCMS/GetSimpl...ki/testing
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#6
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.
Reply
#7
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?
Reply
#8
patch_cke is a separate branch, under other downloads
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#9
(2014-11-20, 03:26:33)shawn_a Wrote: patch_cke is a separate branch, under other downloads

Ok thanks!
Reply




Users browsing this thread: 1 Guest(s)