Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
mrd_codeMirror: CodeMirror in Pages, Forms, Style
mrd_codeMirror
Got off my ass and bent hak_editarea to my fiendish ends. grab it here mrd_codeMirror »
Description
This plugin uses a javascript library called “codeMirror” to format and syntax color textareas in Textpattern’s Forms, Pages and Style tabs
About CodeMirror
CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
Requirements
This plugin requires the following files (included) to be present in the /scripts directory of your site root.
- yoursite.com
- scripts
- codeMirror
- codemirror.css
- themes_min.css
- htmlmixed_min.js
- css_min.js
- codeMirror
- textpattern
- etc…
- scripts
History
- 0.1 Initial release
- 0.2 Included XML style autocomplete
Credits
This plugin was prompted by Simon Finch’s CodeMirror admin theme and was made possible by blatatl ripping off Patrick Woods’s hak_edit_area plugin.
Please, oh please, would someone do a better job of this plugin? I’m beggin’.
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
Mr Dale,
Wow, so very fast of you and very nice. Works as intended.
Some quick observations
In your distribution there is no codeMirror sub-folder in the scripts folder, the css and js files are in the scripts folder. Easy enough here to create the codeMirror folder and move the ccs and js into it to make the plugin work but you would want to fix it.
Interferes with CSS in Remora, the navigation dropdowns don’t have enough “Z” to appear in front of the codeMirror edit areas. In Hive, it does a neat job of deconstructing a lot of Mr Wareham’s good works.
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
Just another quick observation: you should provide a stylesheet that only covers the styling needed for the plugin instead of overwriting the rest of the theme (side columns, font-sizing, colours, etc).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
phiw13 wrote: Just another quick observation: you should provide a stylesheet that only covers the styling needed.
Yeah, I totally spaced that. Like a total dozer I just copied the whole theme. I just updated the css to only include the codeMirror specific stuff.
Last edited by mrdale (2012-05-07 04:05:12)
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
joebaich wrote: In your distribution there is no codeMirror sub-folder in the scripts folder, the css and js files are in the scripts folder… Interferes with CSS in Remora…
These issues (relating to my brainless inclusion of the whole admin theme style sheet) should now be fixed…
Last edited by mrdale (2012-05-07 04:09:08)
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
Anyone want to jump in and get code folding working on forms and pages?
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
Support for JavaScript in editors created by the spf_js or stm_javascript plugins would be great!
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
MattD wrote: Support for JavaScript in editors created by the spf_js or stm_javascript plugins would be great!
feel free to hack it in.
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
mrdale wrote:
feel free to hack it in.
I was trying before I posted but I get a javascript error and haven’t had a chance to look into it further. It seems the version of javascript.js I found doesn’t work the same as css_min.js and htmlmixed_min.js that are included with your download.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
Thanks Dale.
I’ll give it a hack ..
Simon
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
So .. I have a new version .. a minor cleanup with some added features:
- theme selector;
- support for JavaScript editor (spf_js required) and external files (spf_ext required).
Remaining issues:
- Remora drop-down menus are still hidden behind the text area;
- Textarea resizing is disabled (enabling gives erratic results);
- Plugins editor not supported;
- Code-folding requires input to the Javascript (which lines to fold) and is therefore disabled;
- Theme selector is bottom-right: not the most elegant solution but works consistently across most admin themes (specifically Classic, Hive, Steel).
Bearing in mind Phil’s comment re. new admin themes it’s likely to be a short-lived interim version.
To make it easy to fork, adapt, amend, update I’m thinking of putting it on GitHub, though I’ll have to use my own spf_ prefix: — Dale: if you’d prefer I submitted updated files to you – just let me know.
Last edited by spiffin (2012-05-09 23:56:19)
Offline
Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style
Quick update now on GitHub for easy forking/updating when new versions of CodeMirror are released – and Texpattern core admin themes are updated.
Last edited by spiffin (2012-05-10 00:29:51)
Offline