Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
codemirror.zip
place entire folder in couch/addons/
(467.25 KiB) Downloaded 459 times
Hi All,

I am trying to create an addon using codemirror to provide syntax highlighting etc for a style.php (for style sheet editing in the couch end).

I thought this would be relatively simple to implement but it's not working for some reason - maybe fresh eyes can help. I've attached the addon zip and below is my style.php code

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:content_type 'text/css' />

<cms:template clonable='0' nested_pages='0' executable='0' title='Style'>

<cms:editable name='codemirror' type='message'>

    <style type="text/css">
      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
      .CodeMirror-activeline-background {background: #e8f2ff !important;}
    </style>

    <link rel="stylesheet" href="<cms:show k_couch_link/>addons/codemirror/lib/codemirror.css">
    <script src="<cms:show k_couch_link/>addons/codemirror/lib/codemirror.js"></script>
    <script src="<cms:show k_couch_link/>addons/codemirror/mode/css/css.js"></script>
    <script src="<cms:show k_couch_link/>addons/codemirror/addon/selection/active-line.js"></script>
    <script>
   var editor = CodeMirror.fromTextArea(document.getElementById("f_code"), {
   mode: "application/xml",
   styleActiveLine: true,
   lineNumbers: true,
   lineWrapping: true
});
</script>   
</cms:editable>

<cms:editable name='code' label='CSS Code' type='textarea' />

</cms:template>

<?php COUCH::invoke(); ?>
Hi Patrick,

The following seems to be working (I've moved the initialization code to within window.addEvent('domready')-
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:content_type 'text/css' />

<cms:template title='Style'>

    <cms:editable name='codemirror' type='message'>
        <style type="text/css">
            .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
            .CodeMirror-activeline-background {background: #e8f2ff !important;}
        </style>

        <link rel="stylesheet" href="<cms:show k_couch_link/>addons/codemirror/lib/codemirror.css">
        <script src="<cms:show k_couch_link/>addons/codemirror/lib/codemirror.js"></script>
        <script src="<cms:show k_couch_link/>addons/codemirror/mode/css/css.js"></script>
        <script src="<cms:show k_couch_link/>addons/codemirror/addon/selection/active-line.js"></script>
        <script>
            window.addEvent('domready', function(){
                var editor = CodeMirror.fromTextArea(document.getElementById("f_code"), {
                    mode: "application/xml",
                    styleActiveLine: true,
                    lineNumbers: true,
                    lineWrapping: true
                });
            });
        </script>   
    </cms:editable>

    <cms:editable name='code' label='CSS Code' type='textarea' />

</cms:template>

<?php COUCH::invoke(); ?>
Thanks KK! working now, however since this is just for CSS I've used the basic var so my working code thanks to your dom ready is now:

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:content_type 'text/css' />

<cms:template title='Style'>

    <cms:editable name='codemirror' type='message'>
        <style type="text/css">
            .CodeMirror {border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
            .CodeMirror-activeline-background {background: #eeeeee !important;}
        </style>

        <link rel="stylesheet" href="<cms:show k_couch_link/>addons/codemirror/lib/codemirror.css">
        <script src="<cms:show k_couch_link/>addons/codemirror/lib/codemirror.js"></script>
        <script src="<cms:show k_couch_link/>addons/codemirror/mode/css/css.js"></script>
        <script src="<cms:show k_couch_link/>addons/codemirror/addon/selection/active-line.js"></script>
        <script>
            window.addEvent('domready', function(){
               var editor = CodeMirror.fromTextArea(document.getElementById("f_code"), {});
            });
        </script>   
    </cms:editable>

    <cms:editable name='code' label='CSS Code' type='textarea' />

</cms:template>

<?php COUCH::invoke(); ?>

I'll throw this into the tips and tricks thread
3 posts Page 1 of 1
cron