Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CodeMirror support #8

Closed
sergeche opened this issue Dec 2, 2010 · 20 comments
Closed

CodeMirror support #8

sergeche opened this issue Dec 2, 2010 · 20 comments
Labels
Plugin

Comments

@sergeche
Copy link
Member

sergeche commented Dec 2, 2010

Create plugin for CodeMirror: https://github.com/marijnh/CodeMirror/
@maxart
Copy link

maxart commented Dec 4, 2010

This is awesome news, I cannot wait for the plugin to be released!

@egeozcan
Copy link

any updates yet?

@itaccess
Copy link

I would really like to see this in wordpress theme editor - code mirror already has a wordpress plugin for back end theme editing - and with zen coding as a tag expander and snippet manager - it would finally be almost worth using instead of editing theme files locally.

@sergeche
Copy link
Member Author

I'll try to create CodeMirror plugin on this weekend, so stay tuned for commit updates

@egeozcan
Copy link

looking forward to updates

@sergeche
Copy link
Member Author

I've pushed beta version of ZC for CodeMirror plugin, see Downloads section.

How to use:

  1. Download plugin: https://github.com/downloads/sergeche/zen-coding/Zen.Coding-CodeMirror.v0.7.zip
  2. Add zen_codemirror.js to the HTML page with CodeMirror editor
  3. When creating new CodeMirror instance, you have to add two options, syntax and onLoad, like this:

CodeMirror.fromTextArea('code', {
height: "200px",
parserfile: "parsexml.js",
stylesheet: "./CodeMirror/css/xmlcolors.css",
path: "./CodeMirror/js/",
continuousScanning: 500,
lineNumbers: true,

syntax: 'html',
onLoad: function(editor){
    zen_editor.bind(editor);
}

});

Available syntax: 'html', 'xml', 'css', 'xsl', 'haml'

Now you're ready to go. Type some abbreviation and hit Tab. You can also call zen_editor.showInfo() method to see all available actions and shortcuts (note that your page should be in UTF-8 encoding to properly display some symbols).

Let me know if it works for you

@itaccess
Copy link

Not working by initializing with editor - but works a bit by executing:
// var editor = CodeMirror.fromTextArea('code', { etc... });
setTimeout(function(){ zen_editor.bind(editor); },1500)

Tab expands 'html' correctly on mac firefox, but win IE6 expands as 'html'. Same for other tags.

All semicolon extensions are ignored - I assume because the 'syntax' property is not set int the correct place the way I am doing it. So, 'html:5' expands to 'html:5/html:5'.

I have latest version of code mirror installed.

@itaccess
Copy link

Sorry, my code was not formatted correctly - so cut previous post - here it is again:

Not working by initializing with editor - but works a bit by executing:

// var editor = CodeMirror.fromTextArea('code', { etc... })
setTimeout(function(){ zen_editor.bind(editor); },1500)

Tab expands 'html' correctly on mac firefox, but win IE6 expands as:

html<html></html>

Same for other tags.

All semicolon extensions are ignored - I assume because the syntax is not set int the correct place the way I am doing it. So 'html:5' expands into:

<html:5></html:5>

@sergeche
Copy link
Member Author

There were a few bugs in CodeMirror package, including broken minified version and empty abbreviations vocabulary. You may re-download CodeMirror bundle. Also I've created online demo: http://zen-coding.ru/codemirror/

About IE6: I'll investigate this problem but it looks like a CM problem because I'm using provided API only.

@sergeche
Copy link
Member Author

I've tested in IE and confirm that CodeMirror incorrectly performs selected text replacement in this browser. I'll contact Marijn on this issue

@itaccess
Copy link

Everything works great on mac by Firefox, and Safari.

Thanks for your through efforts.

IE6 on WinXP now has error as follows:

Line: 168
Char: 7
Error: Permission denied
Code: 0

I set as trusted site, and lowed privacy levels etc...

Not the most important issue - as IE6 is a poor quality browser, that is losing popularity - but the best feature of codemirror is that you can use it on any computer where sometimes you don't have a better alternative.

Cheers

@itaccess
Copy link

I have gone through and tested all the features using zen_editor.showInfo()

I had to change the zen_codemirror.js encoding from 'UTF-8 without BOM' to 'UTF-8' to get a correct list of keys to use.

There were a few small bugs as follows

  • Wrap with abbreviation works - but then prompts a second time, and if you cancel, it inserts a null tag
  • Remove tag removes two tags
  • All the incrementing numbers increment by twice what they should

All the problems seem to be executing a function twice, I have only bound zen-coding once.

@sergeche
Copy link
Member Author

I can't see any double execution on demo page: http://zen-coding.ru/codemirror/
What browser you're using?

@egeozcan
Copy link

Functions well on Firefox 3.6 & 4 Beta under Windows 7 Enterprise. I've seen one or two errors but couldn't find a reliable way of recreating them. I'll post further updates.

@itaccess
Copy link

For me there is double execution happens on demo page too - the same. I am using Firefox 3.6.12 on Mac OS X 10.6.5.

I tried from Safari, and there is no problem with double execution.

@sergeche
Copy link
Member Author

Fixed double-execution bug in Firefox and Opera, see demo page

@egeozcan
Copy link

Heavily tested with various examples found over the net. Not a single problem or quirk, yet. Thank you, thank you, thank you.

@itaccess
Copy link

It all works great for me - thanks for your sterling work!

@sergeche
Copy link
Member Author

There are still issues with IE that requires patching CodeMirror and minor issues with expanded abbreviations (sometimes caret placed in wrong position) so I can't officially release it. The latest CM plugin is available on demo page only.

@sergeche
Copy link
Member Author

Fixed IE issue with non-replaceable selection and some minor bugs. It still doesn't work in IE6 because of CM issues. The plugin is officially released (please re-download plugin again).

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Plugin
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@maxart @sergeche @egeozcan