MODX :: CodeMirror for MODX Evolution

41

Hansek Reply #1, 3 months, 3 weeks ago

Link to this post#1

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

29

dmi3yy Reply #2, 2 months, 2 weeks ago

Link to this post#2

HI, its Great solution.

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

and want to see next mode: -add hightlight MODx tags
codemirror.net/demo/mustache.html
-add fullscreen mode
codemirror.net/demo/fullscreen.html

2

chernavin Reply #3, 2 months, 2 weeks ago

Link to this post#3

Hi, thanks for plugin.

It will be good if plugin can be configured by manager. For example, theme dropdown list.

41

Hansek Reply #4, 2 months ago

Link to this post#4

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.

917

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

microcipcip Reply #5, 2 months ago

Link to this post#5

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.

41

Hansek Reply #6, 2 months ago

Link to this post#6

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?

917

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

microcipcip Reply #7, 2 months ago

Link to this post#7

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.

917

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

microcipcip Reply #8, 2 months ago

Link to this post#8

What is the procedure to render CodeMirror on a TextArea TV?

41

Hansek Reply #9, 2 months ago

Link to this post#9

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);
                }
            }
        }