How to add Codemirror plugin

Can't get the Codemirror Plugin to work...
Can you post more detailed, what you did to get CodeMirror to work?

My confusion is, is your CodeMirror plugin ending up in the module's plugin directory?
sites/all/modules/ckeditor/ckeditor/plugins/codemirror
or the library's?
sites/all/modules/ckeditor/plugins/codemirror

Second, i am also unsure which file you refer to as the "editor profile":
the module's
sites/all/modules/ckeditor/ckeditor.config.js
or the library's
sites/all/modules/ckeditor/ckeditor/config.js

Third, also not sure about the "Advanced section".
The closest i found is a comment in sites/all/modules/ckeditor/ckeditor.config.js

//Toolbar definition for Advanced buttons

i found
http://docs.cksource.com/CKEditor_for_Drupal/Open_Source/Drupal_7/Configuration?page=0,3
which lets me think the module's file and directory are what i need to work with.
but this did not work.
so i tried the library's directory, also no avail...

Thanks,
Thomas

Thanks, got it working with the libraries API.
What did not work were customisations like

config.codemirror = {
	// Whether or not you want to show line numbers
	lineNumbers: false,
};

i tried to add that to sites/all/modules/ckeditor/ckeditor.config.js as described in the plugin's readme,
as well as the Custom JavaScript configuration textfield under Configuration > CKEditor > [profile] > Advanced options

New title reflects the issue much better

any progress on this? i would love to get codemirror customizations to work. especially the solarized theme. I tried different ways (as described above) but no success...

i was not able to configure it. could someone explain, please? thanks

Hi candelas.
Post #3 describes the needed steps.
Which steps could you execute, where did you fail? What exactly did not work?

For people asking how to add the customizations in order to use themes etc., add those to your ckeditor config.js file. I'm not using the wysiwyg module, but instead the ckeditor module, and I added the customizations to the ckeditor.config.js file and everything works great. Really nice to have those features right in ckeditor source.

PS. Just realized the items that should display buttons such as showFormatButton do not actually show any buttons, but the functions still exist using keyboard shortcuts.

No:
config.codemirror_theme : 'monokai';

Yes:
config.codemirror_theme = 'monokai';

Also, the only way I could make this plugin work was to add the two config lines in the "Advanced" textfield. Find this textfield at the bottom of the page at admin/config/content/ckeditor/edit/name-of-my-profile

config.extraPlugins = 'codemirror';
config.codemirror_theme = 'monokai';

See other themes here: http://codemirror.net/demo/theme.html

@kendouglass: yes, thats it! finally a decent theme in code editor. thanks a lot!!!

Thanks to @johns996 for #3 and @kendouglass for #11

I used #3 to get things working and #11 to set the theme. I did not need
config.extraPlugins = 'codemirror';
I am using:

1. ckeditor module 7.x-1.15+1-dev ( 7/29/2014)
2. CKEditor 4.4.3 (revision fd4f17c)
3. CodeMirror Version: 1.10

If you are having issues MAKE SURE YOUR CODEMIRROR VERSION MATCHES YOUR CKEDITOR VERSION. (Can you tell what I didn't do? Hours of my life I'll never get back)

To check your ckEditor version -> admin/config/content/ckeditor/edit/[your profile] under Editor Appearance, drag the Question Mark "?" icon to your current toolbar and view using the editor.

Additional codemirror releases are available by scrolling down http://ckeditor.com/addon/codemirror

great thank you Dave Kopeced.

BTW this does not worok with ckeditor 4.4.4 and codemirrro 1.11. I tried that first. It works if you download the exact versions Dave mentioned.

anyone got the config running? should this just work when placed in config.js?

config.codemirror = {

    // Set this to the theme you wish to use (codemirror themes)
    theme: 'default',

    // Whether or not you want to show line numbers
    lineNumbers: true,

    // Whether or not you want to use line wrapping
    lineWrapping: true,

    // Whether or not you want to highlight matching braces
    matchBrackets: true,

    // Whether or not you want tags to automatically close themselves
    autoCloseTags: true,

    // Whether or not you want Brackets to automatically close themselves
    autoCloseBrackets: true,

    // Whether or not to enable search tools, CTRL+F (Find), CTRL+SHIFT+F (Replace), CTRL+SHIFT+R (Replace All), CTRL+G (Find Next), CTRL+SHIFT+G (Find Previous)
    enableSearchTools: true,

    // Whether or not you wish to enable code folding (requires 'lineNumbers' to be set to 'true')
    enableCodeFolding: true,

    // Whether or not to enable code formatting
    enableCodeFormatting: true,

    // Whether or not to automatically format code should be done when the editor is loaded
    autoFormatOnStart: true,

    // Whether or not to automatically format code should be done every time the source view is opened
    autoFormatOnModeChange: true,

    // Whether or not to automatically format code which has just been uncommented
    autoFormatOnUncomment: true,

    // Whether or not to highlight the currently active line
    highlightActiveLine: true,

    // Define the language specific mode 'htmlmixed' for html including (css, xml, javascript), 'application/x-httpd-php' for php mode including html, or 'text/javascript' for using java script only
    mode: 'htmlmixed',

    // Whether or not to show the search Code button on the toolbar
    showSearchButton: true,

    // Whether or not to show Trailing Spaces
    showTrailingSpace: true,

    // Whether or not to highlight all matches of current word/selection
    highlightMatches: true,

    // Whether or not to show the format button on the toolbar
    showFormatButton: true,

    // Whether or not to show the comment button on the toolbar
    showCommentButton: true,

    // Whether or not to show the uncomment button on the toolbar
    showUncommentButton: true,

        // Whether or not to show the showAutoCompleteButton button on the toolbar
        showAutoCompleteButton: true

};

Here is working method:

1. Download CodeMirror http://ckeditor.com/addon/codemirror and place it to sites/all/libraries/ckeditor/plugins/codemirror folder.

2. Create custom module with code:

/**
 * Implements hook_ckeditor_plugin().
 */
function MYMODULE_ckeditor_plugin() {
  return array(
    'codemirror' => array(
      'name' => 'codemirror',
      'desc' => t('CodeMirror (Source) Syntax Highlighting'),
      'path' => base_path() . libraries_get_path('ckeditor') . '/plugins/codemirror/',
    ),
  );
}

3. Go to admin/config/content/ckeditor page, edit your profile and enable CodeMirror (Source) Syntax Highlighting plugin.

That's all!

I've created the CKEditor CodeMirror module https://www.drupal.org/project/ckeditor_codemirror.