Problems adding CKEditor plugins

For Wysiwyg to know there's a new [native] plugin available, one must implement hook_wysiwyg_plugin(). It basically provides some "meta" information about the plugin, like where to load it from (no need to place it in the editor folder), which buttons it uses etc. There should be no need to modify any files in the editor library, Wysiwyg or the plugin itself when this hook is used. Wysiwyg will pass the appropriate settings to the editor when the plugin/button is enabled via the "Buttons and Plugins" GUI, which have been provided by the hook implementation.

Implementation details can be found in wysiwyg.api.php in your Wysiwyg folder and some examples are scattered about the issue queue.

Btw, there was a discussion earlier in another issue about creating a Wysiwyg contrib module, to gather small modules like the one you're working on in one place. If you're interested, you can probably find that issue somewhere near the top of the queue. (Sorry, I don't remember its name or what it was originally about.)

Btw, there was a discussion earlier in another issue about creating a Wysiwyg contrib module, to gather small modules like the one you're working on in one place. If you're interested, you can probably find that issue somewhere near the top of the queue. (Sorry, I don't remember its name or what it was originally about.)

I am trying to implement the same mediaembed plugin for ckeditor in wysiwyg.
Here's what the small (quick and dirty) custom module looks like... and it does not work :( The check-box for 'MediaEmbed' shows up in the settings, but when enabled, the complete editor disappears and i can see an error in IE;

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 2.0.50727; MS-RTC LM 8)
Timestamp: Tue, 7 Sep 2010 11:51:56 UTC

Message: 'onLoad' is null or not an object
Line: 22
Char: 665
Code: 0
URI: http://10.58.23.74/drupal/sites/all/libraries/ckeditor/ckeditor.js?1

I am suspecting problem with the 'buttons' array element, as i can't really figure what to have there.........
Can someone help troubleshoot?

cust.info:

; $Id$
name = cust
description = Custom mods for my site
package = "Custom"
core = 6.x
version = 6.x-1.x-dev

cust.module:

// $Id$

/**
 * Implementation of hook_wysiwyg_plugin
 */
function cust_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      return array(
        'mediaembed' => array(
          'url' => 'http://www.fluidbyte.net/embed-youtube-vimeo-etc-into-ckeditor',
          'path' => 'sites/all/libraries/ckeditor/plugins/mediaembed/plugin.js',
          'buttons' => array('mediaembed' => t('MediaEmbed')),
          'load' => TRUE,
          'internal' => FALSE,
        ),
      );
  }
}

edit: i have also added config.extraPlugins = 'MediaEmbed' in config.js as per plugin instructions

Undo the config.js change. We have this hook to avoid having to manually alter any file belonging to Wysiwyg or the editor library. Wysiwyg module will take care of loading the appropriatr plugin when one or more of its buttons are enabled.

The 'buttons' array looks alright, if the internal name of the MediaEmbed is 'mediaembed'. The array key is used by Wysiwyg to know which button to insert in the toolbar, and the value is what's displayed under "Buttons and plugins" when you configure the editor profile.

I'm not at home right now so I can't debug this to see what causes the error, but your hook implementation looks good and probable works since the button appears under "Buttons and plugins".

Btw, this issue is marked closed (fixed) due to being fixed once and having no more activity. It was pure luck that I spotted your reply when browsing the closed issue list.

Thanks TwoD. I tried this after undoing the change in config.js. But the error remains same....

Oh, I figured it out.
We're seeing a couple of issues here.
First one is that the plugin was placed in the CKEditor plugin folder. This should not be needed (but we'll have to do it anyway this time around, see below) since we don't want to have to modify the library in any way, and the hook provides the 'path' and 'internal' keys. 'internal' => FALSE tells Wysiwyg the plugin is not bundled with CKEditor itself (which is true in this case), and that it should load it from where 'path' points to.
I would have put the plugin in cust/plugins/MediaEmbed and then used 'path' => drupal_get_path('module', 'cust') . '/plugins/MediaEmbed/plugin.js'. (Or even better, maybe in the sites/all/libraries/ folder, but I'd need to do some more things then to check if it was placed in sites/sitename/libraries/ instead.)

Anwyay, when I tried that, two new things came up:
First, the module author is probably using Windows, which is case insensitive, as in plugin.js he names the plugin "MediaEmbed", but the folder is "mediaembed". Not good because CKEditor expects the plugin name to be the same as the folder name, and on Linux this causes problems. Easiest fix was to rename the "mediaembed" folder to "MediaEmbed" and update the hook implementation accordingly.

Second, we've got an annoying bug in Wysiwyg: #767550: $meta['path'] value is expected to be a directory in wysiwyg.admin.inc:116, and file elsewhere.
The MediaEmbed plugin expects to be able to use the path it was loaded from to load its dialog contents and toolbar image, but we've added the filename there as well.
Without hacking Wysiwyg, the easiest way to go around that problem is to go against the 'no file modification' policy and place the "MediaEmbed" folder in CKEditor's plugins folder.
That means we can instead do 'internal' => TRUE and skip the entire 'path' key. Things fix themselves after that.

Summary:
cust.module

// $Id$

/**
* Implementation of hook_wysiwyg_plugin
*/
function cust_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      return array(
        'MediaEmbed' => array(
          'url' => 'http://www.fluidbyte.net/embed-youtube-vimeo-etc-into-ckeditor',
          'buttons' => array('MediaEmbed' => t('Media Embed Dialog')),
          'load' => TRUE,
          'internal' => TRUE,
        ),
      );
  }
}

Extract plugin to sites/[all/sitename]/ckeditor/plugins/MediaEmbed/plugins.js. The "images" and "dialogs" folders to the same place of course.

Enable the module and check the button under "Buttons and plugins".

Thanks TwoD! Works like a charm..... :)

wow I got it working too :)
I've noticed in my logs an access to
"/sites/all/libraries/ckeditor/plugins/MediaEmbed//dialogs/mediaembed.html"
notice the double //
but I guess the server is smart enough to get it working with the double slash.

Subscribing for reference...

have packaged this into a module for the not-so-coder kinds like me...
(rename the tar_.gz to tar.gz)

subscribing for reference

Tried all this, but mediaembed field broke CKeditor when enabled and nothing worked. Then i lowercased MediaEmbed everywhere, even in plugin.js and that made it work.

@deepM, I'm assuming you're not on Windows.
As you can see in #9, I solved that by instead using "MediaEmbed" for both the plugin foldername and in the implementation, which didn't require internal modifications in the plugin itself.
So far, this is the only plugin I've seen that mixes how it identifies itself ("mediaembed" foldername vs "MediaEmbed" in code). This is fine on Windows because it doesn't know the difference, but causes a lot of confusion on other systems where matters. I guess that's why other plugins just use lowercase letters in internal references to itself.

I observed that this hack is good enough for single user sites. But on public sites, this may lead to users posting links for complete webpages (instead of videos) in the video frame thus screwing up the design and the purpose of this feature.. which in some ways may be a bug. I have, hence, posted a request on the Paid services forum... if someone is interested in refining this for D6, please contact me.

I have implemented the code above (#9) and I am seeing the button on the toolbar OK. However, when I have this button added, the rest of the buttons stop fully working.....

When I type text, and highlight it w/ cursor and then click bold (or any button) the text bolds, but the button does not get highlighted, and I am then unable to un-bold the text via the button. I have to delete the text and type over. The same applies to all buttons. Like usually when I just put cursor in box, the "align left" button is automatically highlighted, but it does not.

If I uncheck the MediaEmbed checkbox on the "Buttons and Plugins" page, and save, and reload node add page, everything works again.

FF 3.6.13 does not report any JS errors when button is enabled. I am seeing same behavior on Safari 4.x.
I have the 6.x-2.x-dev WYSIWYG module installed and am running CKEditor 3.5.0.6260. I also just tried using CKEditor 3.4.3.6236 and same issue.

This was working before I upgraded to 6.x-2.2 WYWIWYG module.

I have now disabled the WYSIWYG dev module and then un-installed it. I then installed the 6.x.2.1 WYSIWYG module and re-did my settings. All is working now, using both CKEditor 3.4.3.6236 or CKEditor 3.5.0.6260 so it looks like something has changed between 6.x-2.1 and 6.x-2.2.

I'm open to trying any suggestions and thanks so much for your work on this module. One side note about my setup is that I'm not using this on a drupal node body field, but a cck text area field. Not sure if that matters.

thanks!
divbox

Some more info. I upgraded to 6.x-2.3 and same issue I described above still exists. Attaching a screen shot to show the BOLD button not highlighted.

thx
div

Hmm, 6.x-2.2 introduced the regression described in #19 - and another one (there's an FAQ entry about them) - but it was soon fixed in 6.x-2.x-dev, and that code is now in 6.x-2.3.

Maybe you've still got the 6.x-2.2 wysiwyg/editors/js/ckeditor-3.0.js file cached in the browser or on the site?
The editor version or which field it is attached to does not affect the behavior, it only depends on whether a "Drupal cross-editor
plugin" like Teaser Break (as opposed to a 'native editor plugin' like MediaEmbed) was also enabled or not.
(Actually, not having any cross-editor plugins enabled triggered one regression, and having at least one enabled triggered the other.)

Has anyone gotten this to work with CKEditor 3.6? It was working with CKEditor 3.5 for me just fine, but after upgrading (and replicating the changes you need to make, like in config.js) it still isn't showing up in the "Buttons and plugins" checklist.

Sorry, meant to re-open this. I could start a new issue if the maintainers would like, but it seems like a similar thing to what was affecting earlier versions.

@rootwork, changes made in CKEditor's config.js won't have any effect since that file isn't loaded by Wysiwyg module.
The the hook implementation in #9 should be all you need if you've placed the plugin in CKEditor's plugins folder. Just don't forget to activate the new module implementing the hook. (The package provided in #13 should have all things needed.)

Hmm. Well, I'm not sure what to do here. Can anyone else confirm that this is working with CKEditor 3.6?

I have:

- put the custom module from #13 above in /sites/all/modules
- turned on the custom module
- downloaded the mediaembed code and ensured that /sites/all/libraries/ckeditor/plugins/MediaEmbed/plugin.js

As of CKEditor 3.5, the button showed up when I edited a WYSIWYG profile, and the functionality worked, and was working for several months. As soon as I installed CKEditor 3.6 (and yes, I made sure the mediaembed plugin is still there and wasn't removed in updating to the new version) the button disappeared from the profile configuration page.

Does anyone else have this working with CKEditor 3.6?

Update: I started from scratch, removed everything I'd done and re-downloaded things, and now it's working. So, sorry to add to the issue queue :)

Since I re-opened this issue, I'll close it since it's fixed for me.