Syntax Highlighting for CMSimple's back-end ?

[cmb]

Hello developers,

I've stumbled across this issue while developing Pagemanager. I didn't want to have too many config options, so I decided, the user can have additional functionality by customising the stylesheet. To make that easier, I've added comments and out-commented code to the stylesheet.

The current situation: if the user want to edit his content (i.e. the pages), he could use a modern WYSIWYG editor, with all the bells and whistles one could expect from a modern word processor. But if he wants to edit the template, the stylesheet or a plugin's stylesheet, all he has is a plain textarea.

An idea: what if the textarea would be replaced by a syntax highlighting editor? As I just found out, there several available under licenses, which would allow them to be shipped with CMSimple. Particularly I found CodeMirror which has recently released new version, and which seems to be easy to integrate, and could be used for either html or css.

My considerations: would that be really useful? Most end-users won't mess with the template or stylesheets at all, because they're not experienced in HTML or CSS; having syntax highlighting might not help them. Power users probably prefer to edit those files with an ftp capable editor of their choice.

OTOH: the possibility to edit template and stylesheets from the back-end is already given. And IMO it's a reasonable feature, so anybody is able to do at least minor changes to them, without the need to have a ftp capable editor available, or even the need to download-edit-upload the files. If this is already possible, why not increase the usability by including syntax highlighting (and perhaps some more common aids in writing source code)?

Because my considerations given above, I'm not sure if it should be integrated to CMSimple's core. But it can't be developed IMO as a plugin, because of missing hooks. Shouldn't those be added to the core, to make it possible to develop a plugin that will give better editing capabilities for template and stylesheets?

I will have a further look at the possibilities to implement such a solution, if there is interest.

Any comments appreciated.

Christoph

PS: You don't need to worry about the general overhead of having just another plugin. I've already found a very simple solution not to include any plugin files for back-end-only plugins, in the case there is no /plugins/PLUGINNAME/index.php.

[svasti]

Interesting Idea. I also thought about it. Would be nice, if you could find a solution... making CMSimply cooler.

[cmb]

Hello svasti,

Would be nice, if you could find a solution

I've just found a little time for a first experiment. I've adapted the Plugin Stylesheet to use syntax highlighting. If you want a demo, download CodeMirror, copy the CodeMirror directory to your CMSimple root, and change /plugins/index.php line 563ff to the following:

Code: Select all


        if($form['type']=='TEXT') {
            // cmb: added code mirror
            global $hjs, $sn;
            $hjs .= '<script src="'.$sn.'CodeMirror-2.11/lib/codemirror.js"></script>'.PHP_EOL;
            $hjs .= '<link rel="stylesheet" href="'.$sn.'CodeMirror-2.11/lib/codemirror.css">'.PHP_EOL;
            $hjs .= '<script src="'.$sn.'CodeMirror-2.11/mode/css/css.js"></script>'.PHP_EOL;
            $hjs .= '<link rel="stylesheet" href="'.$sn.'CodeMirror-2.11/theme/default.css">'.PHP_EOL;
            $saveform .= '<textarea '.$style['textarea'].' id="codemirror-textarea" name="'.$form['textarea_name'].'">'.$data.'</textarea>';
            $saveform .= '<script type="text/javascript">var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("codemirror-textarea"));</script>';
        }
 

Just the basics, but already cooler than before The biggest drawback might be the size of the CodeMirror directory. But I guess for a distribution this could be drastically reduced by removing unused parts, so perhaps only about 150KB will remain.

If my time permits, I will investigate further.

Christoph

[cmb]

Hello developers,

because of the overwhelming interest in syntax highlighting in CMSimple's back-end , I've decided to release a first version of CodeEditor_XH. You can get it from http://3-magi.net/?CMSimple_XH/CodeEditor_XH. I don't announce it in 'Addons and Plugins', because currently it's just a proof of concept.

It imposes a minimal overhead for a plugin. All the necessary JS files and stylesheets are only included when actually editing the template or a stylesheet.

Any comments appreciated.

Christoph

PS: And forget about any hooks from the core or the plugin loader. Those are not necessary

[Gert]

Hallo Christoph,

have installed it as a plugin - nothing happens, all looks like before ...

$hjs. is loaded.

Code: Select all

<script type="text/javascript" src="./plugins/codeeditor/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="./plugins/codeeditor/codemirror/lib/codemirror.css">
<script type="text/javascript" src="./plugins/codeeditor/codemirror/mode/css/css.js"></script>
<link rel="stylesheet" type="text/css" href="./plugins/codeeditor/codemirror/theme/default.css">
<script type="text/javascript" src="./plugins/codeeditor/codeeditor.js"></script>
</head>

Textarea:

Code: Select all

<textarea class="plugintextarea" name="plugin_text">

body:

Code: Select all

<body id="tplge_body"  onload="codeEditor('plugin_stylesheet');">

[cmb]

Hello Gert,

Should not there something be added?

No, there must something be removed!;) I've forgot a FF only console.log() debug statement in codeeditor.js line 11. You might want to remove it yourself.

IE should give a warning about a JS error (console is undefined) in the status bar.

I'll release an updated version soon.

Christoph

[Gert]

Sorry, crossposted, I just have removed what you have quoted

[cmb]

Hello Gert,

should be no problem. Just released 0.0.2 with that bug removed, and some minimal changes to layout and behaviour of Tabs.

Christoph

[svasti]

Hi Christoph,
very cool indeed!

[cmb]

Hello svasti,

very cool indeed!

And sooo easy!

Christoph