I read an article today from chapterthree: http://chapterthree.com/blog/drupal-wysiwyg-best-practices
It seems that ckeditor can do colored syntax highlighting now with this plugin: http://ckeditor.com/addon/codemirror
There are also some commenst about Drupal,

If i am right as wysiwyh is not using the config.js of ckeditor i need this hook:

(i called my module "wysiwyg_settings")

/**
 * Implements hook_wysiwyg_plugin().
 */
function wysiwyg_settings_wysiwyg_plugin($editor, $version) {
  if ($editor == 'ckeditor') {
    return array(
      'codemirror' => array(
        'extensions' => array('codemirror' => t('CodeMirror')),
        'path' => wysiwyg_get_path('ckeditor_plugins') . '/codemirror',
        'internal' => FALSE,
        'load' => TRUE,
      ),
    );
  }
}

I am using ckeditor 4.4 and with this hook nothing happend

I then had the idea to bundle the plugin with the CKBuilder on the ckeditor site as that is what some comments said on the chapterthree article. When i did that i got "Uncaught TypeError: undefined is not a function".
I guess that is too because the plugin is not really loading.

Is there something wrong with my hook?

Thank you

Comments

TwoD’s picture

Sorry for the delay.

Yes, Wysiwyg module ignores the config.js file as it passes most settings directly into the new editor instance (any setting also in the config file would get overridden).

Try it this way instead:

/**
 * Implements hook_wysiwyg_plugin().
 */
function wysiwyg_settings_wysiwyg_plugin($editor, $version) {
  if ($editor == 'ckeditor') {
    return array(
      'codemirror' => array(
        'buttons' => array(
          'Source' => t('CodeMirror: Source'), // Overrides CKEditor's own button?? Probably shouldn't enable both at the same time.
          'autoFormat' => t('CodeMirror: Auto Format'),
          'CommentSelectedRange' => t('CodeMirror: Comment Selected Range'),
          'UncommentSelectedRange' => t('CodeMirror: Uncomment Selected Range'),
          'AutoComplete' => t('CodeMirror: Toggle Autocomplete')
        ),
        'path' => wysiwyg_get_path('ckeditor_plugins', TRUE) . '/codemirror', // Add TRUE to include base path.
        'options' => array(
          'codemirror' => array(  // Enable all buttons.
            'showFormatButton' => TRUE,
            'showCommentButton' => TRUE,
            'showUncommentButton' => TRUE,
            'showAutoCompleteButton' => TRUE,
          ),
        ),
        'internal' => FALSE,
        'load' => TRUE,
      ),
    );
  }
}

Note: I've not been able to test this snippet, but it should work in theory, so please report if it does or not.

What's confusing is that plugin authors have stopped telling you which buttons you need to add to your toolbar configuration, because CKEditor plugins have default positions for them and CKEditor is often in something like an "auto-toolbar-layout-mode". (Which Wysiwyg currently doesn't support. It always sends a toolbar config along with the other settings, which makes us have to inspect the plugin source code to find out which buttons are actually available.)

It's possible that some paths in the CodeMirror plugins are not recognized as relative to the plugin folder, so it won't actually work unless placed in the actual CKEditor plugins folder. In that case, just set 'internal' => TRUE, and remove the path property (it's ignored then anyway).

DarrellHQ’s picture

Here's what I did and it worked for me using WYSIWYG 7.x-2, Ckeditor 4.x, and codemirror 1.x

I created a module and put in this code:

<?php
/**
 * Implements hook_wysiwyg_plugin().
 */
function codemirror_wysiwyg_plugin($editor, $version) {
  if ($editor == 'ckeditor') {
    return array(
      'codemirror' => array(
         'extensions' => array('codemirror' => t('CodeMirror')),
         'path' => wysiwyg_get_path('ckeditor_plugins') . '/codemirror',
         'internal' => FALSE,
         'load' => TRUE,
      ),
    );
  }
}
?>

Then I put the codemirror plugin inside the libraries folder like this "libraries/ckeditor_plugins/codemirror"

TwoD’s picture

For safety, I think you should tell wysiwyg_get_path() to include the base path, or you could encounter problems if Drupal is not in the web root folder.

PhilY’s picture

It seems that the line
'path' => wysiwyg_get_path('ckeditor_plugins') . '/codemirror',
should be written as
'path' => wysiwyg_get_path('ckeditor') . '/plugins/codemirror',
in order to find the plugin if CKEditor is located in sites/all/libraries

TwoD’s picture

Status: Active » Fixed

@PhilY, actually, no. I intentionally placed the plugin in sites/all/libraries/ckeditor_plugins/codemirror instead of sites/all/ckeditor/plugins/codemirror to be able to nuke the ckeditor folder and upgrade it without having to re-add the plugin.

Some plugins do not like being loaded from an external folder though (they may be using paths relative to the ckeditor folder for icons etc). In that case, remove the entire 'path' => ... line and change 'internal' => FALSE, to 'internal' => TRUE, and Wysiwyg will know to load it from the correct folder (usually sites/all/libraries/ckeditor/plugins).

I'm closing this as fixed since there's been no activity from the OP.

PhilY’s picture

@TwoD, at least, I've learned something really clever, thanks also for the explanation ;-)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

mksweet’s picture

Rather than make a module to do this, you can also includeCodeMirror in your build of CKEditor from the CKEditor site.

Then all you need to do is enable the "source code" button in your CKEditor profile.

See comments: http://www.chapterthree.com/blog/drupal-wysiwyg-best-practices

marcoka’s picture

that sounds geart mksweet. thx 4 info

wdseelig’s picture

I was not able to get codemirror to work by downloading it into my build of CKEditor as suggested by mksweet in #8. However, creating a little module implementing the _wysiwyg_plugin hook as described by codefever in #2 worked just fine.

In addition to this, I also included in my little module the _wysiwyg_editor_settings_alter hook as suggested by Chris Eastwood here. This then enabled me to provide my own config.js file, which allowed me to configure CKEditor the way I wanted.

Thanks to all!