We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Hi everyone,
    some time ago I have done port CodeMirror 2 into MODX Evolution (originaly posted at http://www.modxcms.cz/forums/tema-codemirror-pro-modx-evolution-plugin-aktualizovano-29-1-2012).

    GitHub repository: https://github.com/hansek/MODX-Evolution-CodeMirror

    Install:
    Just copy extracted two directories from archive into your MODX Evo root folder.
    In second step go to URL of your modx slash install (etc. http://localhost/install/). This will install main plugin inside MODX manager.

    Problems:
    If you used plugin EditArea, then disable or delete it!

    Changelog:



    • 2.25 (2012-06-05)
      - updated CodeMirror JS core to 2.25
      - added CodeMirror themes to settings
      - added new CodeMirror settings (thx dmit3yy)
      - improvment in path definition (thx yama)

    • 2.23 b (2012-04-15)
      - fixed bug with rendering of CM on document Content

    • 2.23 (2012-03-29)
      - updated CodeMirror JS core to 2.23
      - fixed problem with bad rendering of CodeMirror on inactive tab

    • 2.22 b (2012-03-20)
      - Minor fixies of path in plugin

    • 2.22 (2012-03-19)
      - update to CodeMirror 2.22
      - possibility to choose theme via Plugin properties
      - render CodeMirror for textarea TVs

    • 2.21 b (2012-01-29)
      - minor changes (cleanup in markup), ability to choice theme by variable $theme in codemirror.plugin.php
    [ed. note: Hansek last edited this post 11 years, 9 months ago.]
      Freelance Web Developer who likes MODX, PHP, jQuery, ExtJS, SASS and other cool web things. Currenty doing great stuff at COEX CZ.

      GitHub: https://github.com/hansek
      Follow me: https://twitter.com/jantezner
      Or follow us: https://twitter.com/coexcz

      http://www.modx.cz || http://www.coex.cz
      • 36595
      • 29 Posts
      HI, its Great solution.

      find 1 bug:
      if load on non general tabs codemirror not loaded correct sad

      and want to see next mode:
      -add hightlight MODx tags
      codemirror.net/demo/mustache.html
      -add fullscreen mode
      codemirror.net/demo/fullscreen.html
        • 39007
        • 2 Posts
        Hi, thanks for plugin.

        It will be good if plugin can be configured by manager. For example, theme dropdown list.
        • Hi,
          I have done few changes (update to CodeMirror 2.22, CodeMirror for textarea TVs, ...)

          Now is project at GitHub, if you are familiar then use from repo https://github.com/hansek/MODX-Evolution-CodeMirror or download current version from first post. [ed. note: Hansek last edited this post 12 years ago.]
            Freelance Web Developer who likes MODX, PHP, jQuery, ExtJS, SASS and other cool web things. Currenty doing great stuff at COEX CZ.

            GitHub: https://github.com/hansek
            Follow me: https://twitter.com/jantezner
            Or follow us: https://twitter.com/coexcz

            http://www.modx.cz || http://www.coex.cz
            • 19369
            • 1,098 Posts
            Thank you for your work. This plugin is incredibly useful, before I used "It's all text!" plugin for Firefox and also Editarea, but CodeMirror 2.0 is way better.

            Anyway, I have always had problems with the path when installing the plugin out of the box. I changed it in the first version I downloaded from that forum, my code was like this:
            // relative path to CodeMirror path from /manager
            $_CM_URL = '../assets/plugins/codemirror/';
            require($_CM_URL .'codemirror.plugin.php');


            That worked, however I can't get the new version to work. With the new version the source html of the manager is like this:
            <link rel="stylesheet" href="{$_CM_URL}cm/theme/{$theme}.css">    
            <script src="/assets/plugins/codemirror/cm/lib/codemirror.js"></script>
                <link rel="stylesheet" href="/assets/plugins/codemirror/cm/lib/codemirror.css">
            
                <script src="/assets/plugins/codemirror/cm/mode/xml/xml.js"></script>
                <script src="/assets/plugins/codemirror/cm/mode/javascript/javascript.js"></script>
                <script src="/assets/plugins/codemirror/cm/mode/css/css.js"></script>
                <script src="/assets/plugins/codemirror/cm/mode/clike/clike.js"></script>
                <script src="/assets/plugins/codemirror/cm/mode/htmlmixed/htmlmixed.js"></script>
                <script src="/assets/plugins/codemirror/cm/mode/php/php.js"></script>
            
                <link rel="stylesheet" href="/assets/plugins/codemirror/codemirror.plugin.css">
                <script src="/assets/plugins/codemirror/codemirror.plugin.js"></script>


            If I click the url in the source I get a 404 page not found error. Also, if I go to that folder, the "cm" folder is actually empty, so it is impossible that codemirror can find the files.

            I have XAMPP and MODX Evo 1.0.6 (fresh installation), Friendly URL disabled.

            I don't have any error during installation.

            I tried to put the "mode" folder on "cm", but that still return a 404 error page not found. Something is wrong with the path.
            • I have made few fixies in path settings, so I think now it should not be problem with path.

              Specifically to your problem with empty cm folder. My repository at GitHub uses git submodules (standard component of GIT). After cloning of repository stay in root of repository and run this:
              git submodule init
              git submodule update

              After, you should have content of cm folder.

              Did it work? [ed. note: Hansek last edited this post 12 years ago.]
                Freelance Web Developer who likes MODX, PHP, jQuery, ExtJS, SASS and other cool web things. Currenty doing great stuff at COEX CZ.

                GitHub: https://github.com/hansek
                Follow me: https://twitter.com/jantezner
                Or follow us: https://twitter.com/coexcz

                http://www.modx.cz || http://www.coex.cz
                • 19369
                • 1,098 Posts
                Hi,

                I am not familiar with GitHub, but now it is working. I have downloaded the code from https://github.com/hansek/MODX-Evolution-CodeMirror and then I have copy/pasted the folders from "modx_evo_codemirror_2-22-b.zip" to "cm" folder.

                Thank you!

                Edit: I can just use the "modx_evo_codemirror_2-22-b.zip" version without GitHub, that works perfectly. [ed. note: microcipcip last edited this post 12 years ago.]
                  • 19369
                  • 1,098 Posts
                  What is the procedure to render CodeMirror on a TextArea TV?
                  • In codemirror.plugin.php at the end of file code:
                            if (document.getElementById('tv_body') !== null) {
                                var tv_textareas = document.getElementById('tv_body').getElementsByTagName('textarea');
                    
                                if (tv_textareas) {
                                    for (var i = 0; i < tv_textareas.length; i++) {
                                        var ta = tv_textareas[i];
                    
                                        CodeMirror.fromTextArea(document.getElementById(ta.id), config);
                                    }
                                }
                            }
                    
                    [ed. note: Hansek last edited this post 12 years ago.]
                      Freelance Web Developer who likes MODX, PHP, jQuery, ExtJS, SASS and other cool web things. Currenty doing great stuff at COEX CZ.

                      GitHub: https://github.com/hansek
                      Follow me: https://twitter.com/jantezner
                      Or follow us: https://twitter.com/coexcz

                      http://www.modx.cz || http://www.coex.cz
                      • 19369
                      • 1,098 Posts
                      Ok, thank you.