Project:Wysiwyg
Version:7.x-2.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:needs review

Issue Summary

I hacked together a working piece of code for the CodePress editor using a stub found here. It's major features are HMTL, PHP, CSS, and JS syntax highlighting, autocomplete, line numbering, and code snippets.

I would like to integrate this with Wysiwyg and since this is new code I was wondering what the best approach would be. Should I create a new project or would you be open to having it reside within this project?

I've attached my working code for people to take a look. Basically install, enable, discover a text area (eg. go to node/add/page), then set the syntax at admin/settings/codepress. Code snippets are triggered by typing something like 'img' and hitting tab.

Hopefully this can find a good home as I think it is a great editor for savvy users.

AttachmentSize
codepress.zip70.53 KB

Comments

#1

#2

Title:CodePress plugin» CodePress editor

Wysiwyg Editor module still needs some abstraction to support multiple editors. However, when that is implemented, supporting CodePress would be interesting.

Additionally, I want you to point to the first paragraph in http://cvs.drupal.org/viewvc.py/drupal/contributions/sandbox/jjeff/codep... -- the code of CodePress itself is LGPL and thus, incompatible with d.o's CVS policies. It cannot be committed to drupal.org. (however, the editor integration code can)

#3

Status:active» postponed

Thanks for the quick response sun, I will be on the lookout for updates to Wysiwyg Editor. I noticed the LGPL license as well and will consider it carefully.

#4

Category:support request» feature request

#5

Status:postponed» needs review

Took some time tonight and put together integration for CodePress — everything seems to be working great. Both integration files wrapped up in a zip: /editors/codepress.inc and /editors/js/codepress_editor.js

Hoping it all works well!

AttachmentSize
codepress.zip 3.04 KB

#6

I'd like to test it, but http://codepress.org/ seems to be down (at least for me)...

#7

Ya I noticed that too, maybe not a good sign for the Codepress project...

The code is still hosted at SourceForge (I linked to this in the module for the download): http://sourceforge.net/project/platformdownload.php?group_id=186981

#8

Was also looking at some other syntax highlighted editors that seem more active:

#9

Version:5.x-1.x-dev» 6.x-1.x-dev

#10

Oh well. This editor is pretty lame. Anyway, rewrote it from scratch.

However, one needs to comment out the following two lines at the bottom of codepress.js:

if(window.attachEvent) window.attachEvent('onload',CodePress.run);
else window.addEventListener('DOMContentLoaded',CodePress.run,false);
AttachmentSize
wysiwyg-HEAD.codepress.patch 5.09 KB

#11

And yes, there are also other options (to be dealt with in separate issues)...

http://marijn.haverbeke.nl/codemirror/
http://los.php5.cz/simple-codearea/
http://www.cdolivet.net/index.php?page=editArea

#12

Title:CodePress editor» Add CodePress editor support
Status:needs review» postponed

To get this feature in, someone needs to convince the authors/maintainers of CodePress to remove the offending lines I mentioned in #10. This means, someone has to step up and create an issue in their tracker or communicate with them in other ways.

Marking as postponed until that happened.

#13

Title:Add CodePress editor support» Add editor: CodePress

#14

Hi,

It looks like codepress.org is dead, but the source code for the library is still available from SourceForge. I've got the module installed and connected up, but I'm getting the following error message when I try to activate it on a PHP node:

Error: self.editor.setCode is not a function
Source File: /sites/all/libraries/codepress/codepress.js?n
Line: 28

I've tried:

- Disabling the last two lines of codepress.js
- Changing 'self.editor = self.contentWindow.CodePress;' to:
- self.editor = parent.CodePress;
- self.editor = CodePress;

But I can't seem to get past this JavaScript error.

It seems that this would be an immensely useful editor to have in place and it would be really great if someone could help me get past this error. Has anyone gotten this editor to work? If so, could that person share their modifications?

#15

Given the situation with CodePress being a seemingly dead project, I've decided to write my own plug-in to use in place of CodePress. My module does not currently support syntax highlighting (I intend to add syntax highlighting in the future), but it does add what I think is a very important feature: line numbers and column numbers for the textarea field of a node. Since this is a new module, I'll post a new thread about it.

#16

Title:Add editor: CodePress» Add editor: CodeMirror
Version:6.x-1.x-dev» 6.x-2.x-dev
Status:postponed» active

Re-purposing.

http://marijn.haverbeke.nl/codemirror - I want. :)

Backed by major organizations actively contributing to its code. Awesome.

#17

OMG, sound the alarm! Sun called an editor awesome! ;P

/me looks at the examples.

Ok, I admit that is pretty awesome!

#18

subs

#19

Any progress on this?

subscrible.

#20

No, not that I'm aware of. I'm currently much too busy to do this myself (and this is a feature requesr so it is pretty far down on my todo list), but anyone is of course welcome to implement the editor and provide a patch. I've posted some documentation on how this is done elsewhere in the issue queue not long ago, and there's also some similar info on how to provide editor implementations via other modules so hacking Wysiwyg is not required. I can'r look for the issues now but I think they're among the open feature requestss and/or documentation tasks.

#21

I think the issue you are referring to is http://drupal.org/node/900220 I will check that out and see if I can find the time to roll out a patch.

#22

Can I use Codemirror with my drupal install?
Any help would be appreciated.

#23

@nick_helps, Wysiwyg module doesn't support this editor (yet), nor the other one you commented on. These issues are about adding support for these editors to Wysiwyg module. Since they are still open, nobody has gotten around to writing the code needed for this yet... You're welcome to help figure it out if you'd like to.

Answering your question with a yes or no would normally be pretty much impossible since we know nothing about your site, but if you want to use the editor with Wysiwyg module today, the answer would be no. I don't know if another module implements CodeMirror for Drupal, but in that case the question is better at home in their issue queue.

#24

I am interested in getting only syntax highlighting in drupal.
I was under the impression that its possible through colorer or codemirror. Is it not?

#25

If you want to try and enable it manually with your theme or something then you can. Codemirror does do syntax highlighting, but currently there is nothing built in. I have not gotten around to writing a patch that will make it work with the wysiwyg module and, as far as I know, no one else has either.

#26

Subscribe

#27

Version:6.x-2.x-dev» 7.x-2.x-dev

http://codemirror.net

#28

Is it unsavory for me to put up a $300 bounty for anyone willing to create a Codemirror Wysiwyg plugin for D6 in the issue queue?

#29

@mpaler - I'll take that bounty.

This patch add support for the CodeMirror UI package, which is a lightweight wrapper around CodeMirror that adds a toolbar. The CodeMirror UI includes a copy of CodeMirror in it, so you only need to download and unpack one package. I've tested this on a couple of my own D6 systems using CodeMirror UI 0.0.14 with the included CodeMirror 2.0.

Only the boolean options can be set via WYSIWYG's admin interface. If you need to set the other CodeMirror options, look around line 100 of codemirror_ui.inc.

Enjoy.

AttachmentSize
wysiwyg-codemirror_ui.patch 7.89 KB

#30

This patch is similar to the one in #29, except it is for the plain CodeMirror, not CodeMirror UI. These two patches can co-exist on the same system.

AttachmentSize
wysiwyg-codemirror.patch 6.75 KB

#31

Version:7.x-2.x-dev» 6.x-2.3
Status:active» needs review

#32

sub

#33

subcribing

#34

subscribing

#35

Subscribing

Posted duplicate: CodeMirror implementation.

I can not understand why there is codepress - this issue is for codemirror that is stable and can be used already, instead I see many reports about codepress - this way we will never commit codemirror.

#36

Version:6.x-2.3» 7.x-2.x-dev
Status:needs review» needs work

@mac2000: Can you compare your patches with the ones from @John Franklin in here, and possibly try to add or fix anything that wasn't accounted for yet?

Actually, now that I skimmed both patches, the one from @John Franklin looks superior. However, it has plenty of coding style issues (TABs instead of 2 spaces, trailing white-space, etc), which need to be corrected; see http://drupal.org/node/172169 for JavaScript coding standards.

Also, the codemirror.js support file should follow the other editor library support files in terms of structure and coding style. We're aware that the current structure is sub-optimal, but by keeping the files in comparable structures, others can understand them more easily, and we're able to upgrade/port/migrate them to a new and better architecture more easily at some point.

#37

Priority:normal» minor
Status:needs work» needs review

fixed and merged files from me and @John Franklin, please review them.

What has been done:

  • added "css files" in verions array
  • proper version detection
  • merged settings and plugins
  • added resizeable abilities to editor
  • overall code cleanup
AttachmentSize
wysiwyg_codemirror.patch 6.05 KB
editors.zip 2.51 KB

#38

"Multiple Editors"?
does that mean what we have now, or multiple per Textformat?
I ask, because my hope is for a way to switch between Wysiwyg and CodeMirror while editing.

The solution worked on here seems not to achieve that, as i see it.
This will add CM only as anothe Editor besides CKEditor etc. right?

My wish would need an integration with another Editor.

OR, and this is why i ask, if Wysiwyg would let me configure eg. CK and CM for textformat X at the same time, there could be a select that says editor: CK, CM, None instead of the link "disable Rich Text".
This would give maximum freedom for anyone to choose a favorite Wysiwyg- and Source editor.

#39

@sirtet: That's a separate issue and not to be discussed here. See #748980: Allow multiple editor profiles for the same format

#40

Well I think you could make 2 input formats that have the exact same formatting except 1 uses CK and the other uses CM. Then you remove the 'disable editor' link, use something like String Overrides to change the "input filters" language and train your people to click between those radio bubble if they want wyziwig or code edit mode. Would that work cause that's what I'm thinking of doing.

I take it the patch was upgraded to 7.x as the original John Franklin one seems to be 6.x. Still on 6.x so I'll take a look at that one unless you'res is actually supposed to be marked 6.x

#41

@btopro
ah yes, this sounds like a quick easy way to do it.
i applied the patch in #37 on Wysiwyg module 7.x-2.x-dev - 2011-Jun-23.
I could configure CM, but is shows up only as a box with the linenumbers and a hor. scrollbar, no text visible inside. not really working yet for me.
(my first time to use the "patch <" command, but it seemed to work, so don't know where the problem lies...)

@sun
thanks. I've been asking about "source-editors" on a more general level here:
http://drupal.org/node/1196592
maybe yet another place is needed to discuss everybody's needs and ideas?

#42

Can you please look at javascript console (firebug or something) to see is there is any javascript error?

Also provide way to reproduce problem.

In my case all is ok, i go to /admin/build/block/add, fill some text in tinymce, then switch to phpfilter (which is powered by codemirror) and all is ok, i see all text with markup entered in tiny.

Also notice - if you see codemirror - all is ok with wysiwyg and this patch.

When you switch input format - drupal calls detach method of current editor (it must save all data to textarea), and the call attach method of selected input format (it must read all data from textarea and put it into editor), so if you see codemirror but not see your content - probably there is no data in textarea, use firebug (or something like it) to see is there is something in textarea.

#43

ok, did some testing, till i got really confused...
first, clarifying my first post (#41): the CM-Editor-box showed the correct amount of line-numbers, so it worked to some extent already, just the actual content was invisible.
I see no JS-errors, and then i found out, that disabling line numbers, CM highlighting works, but an invisible cursor renders it quite unusable, but still, it is one step further...
I assume it might have to do with my template's CSS...

next i installed a new D7.7, wysiwyg-dev, applied patch, configured wysiwyg-profiles, but here, less works, guess i did sth. wrong somewhere.

On node-edit:
Switching to the textformat with CM:
i see only an empty box instead of the textarea.
clicking "Disable rich-text" i get a JS-Err:

Fehler: instances[params.field] is undefined
Quelldatei: http://[path cut out]/sites/all/modules/wysiwyg/editors/js/codemirror.js?lp8vf5
Zeile: 32

the "Disable rich-text"-link does not change, but re-clicking it throws more JS-Errors,

Fehler: phpMode.startState is not a function
Quelldatei: http://[path cut out]/sites/all/libraries/codemirror/mode/php/php.js?lp8vf5
Zeile: 80
Fehler: phpMode.startState is not a function
Quelldatei: http://[path cut out]/sites/all/libraries/codemirror/mode/php/php.js?lp8vf5
Zeile: 80

while the empty box is duplicated (see attached image).
every 2nd click creates another duplicate.

Saving the node
i get the drupal-error-message

Notice: Undefined index: buttons in wysiwyg_codemirror_settings() (line 117 of /usr/www/[path cut out]/sites/all/modules/wysiwyg/editors/codemirror.inc).

and JS-errors

Fehler: instances[params.field] is undefined
Quelldatei: http://[path cut out]/sites/all/modules/wysiwyg/editors/js/codemirror.js?lp8vf5
Zeile: 32
Fehler: instance is undefined
Quelldatei: http://[path cut out]/sites/all/libraries/codemirror/lib/codemirror.js?lp8vf5
Zeile: 1590
Fehler: instance is undefined
Quelldatei: http://[path cut out]/sites/all/libraries/codemirror/lib/codemirror.js?lp8vf5
Zeile: 1590

AttachmentSize
CM-error.jpg 16.99 KB

#44

Priority:minor» normal

#37 worked for me in 6.x-2.4 using Chrome 13.0.782.99 beta

Pushed everything onto 1 line but that's probably because of the remove spaces formatter I had running previously

#45

Added a quick screencast showing it working -- http://screencast.com/t/RpSpHvbe7

Anyone know of an option in other editors to NOT destroy the line spacing? Solution proposed in #40 using the patch from #37 would be perfect if there was a way to block white space from being dumped when using CKeditor (might be true of all other editors and I'm missing a setting or something)

#46

i am confused about 6.x and 7.x, the version has been moved forth and back here...
i was trying with D7, the original work was for D6 as i read it.

Should this work with D7 too, or only D6?

#47

I think it'll work with both, I can confirm it at least works with 6.x

#48

still not working under D7, but i got to write a module that adds CodeMirror to the TinyMCE Editor:
http://drupal.org/node/1242044
My solution is directly in the Editor, which has maybe better integration, but less flexibility and no Option to go without Wysiwyg but Rich Source Editing only.

#49

Just reporting in - patch in #37 worked for me with Drupal 6.20, wysiwyg 6.x-2.4, and codemirror 2.12. . Tried it out with Aquia Prosper and a custom Garland-based theme. No JS or Drupal errors seen.

One note - at first it looked like it wasn't working when i switched over to php input format while creating a new page - the editor window shrunk to 1 line in height, with no menubar. When I pasted in some JS, though, the window expanded to display the 5 lines or so of JS, and the code was highlighted.

Beautiful - I've wanted this on so many sites I've worked on! :)

#50

Here's an updated patch. It mainly cleans up some coding standards issues, but it applies cleanly via git, and I wanted to make it easier for people to test it to help move this issue forward. Here are the outstanding issues from my perspective:

  • There are JavaScript errors as mentioned above.
  • Themes and modes should be editor settings so they can be selected through the UI. So should settings like auto height (which I commented out in my patch, btw).
AttachmentSize
wysiwyg-4807832-50.patch 6.4 KB
nobody click here