Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2012-05-06 06:00:29

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

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
    • textpattern
    • etc…

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

#2 2012-05-06 13:24:45

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

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

#3 2012-05-07 01:56:00

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,051
Website

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

#4 2012-05-07 03:46:48

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

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

#5 2012-05-07 04:08:55

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

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

#6 2012-05-07 04:11:21

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style

Anyone want to jump in and get code folding working on forms and pages?

Offline

#7 2012-05-07 16:24:53

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

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!


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#8 2012-05-07 20:11:40

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

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

#9 2012-05-07 22:56:58

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

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.


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#10 2012-05-08 18:56:52

spiffin
Plugin Author
From: London, UK
Registered: 2004-06-08
Posts: 95
Website

Re: mrd_codeMirror: CodeMirror in Pages, Forms, Style

Thanks Dale.

I’ll give it a hack ..

Simon

Offline

#11 2012-05-09 23:05:31

spiffin
Plugin Author
From: London, UK
Registered: 2004-06-08
Posts: 95
Website

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

#12 2012-05-10 00:08:23

spiffin
Plugin Author
From: London, UK
Registered: 2004-06-08
Posts: 95
Website

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

Board footer

Powered by FluxBB