Hi!

I want to have MediaEmbed plugin functionallity in CKEditor, using Wysiwyg module in Drupal 7.
Which config files should I modify to make the icon appear in the toolbar and make it works?

Thank you a lot in advance for your help.

Comments

chama98’s picture

Any clue? Which are the modifications to do on Wysiwyg to add a plugin into CKEditor? Modify ckeditor.inc?

TwoD’s picture

Status: Active » Fixed

There's no need to modify any CKEditor or Wysiwyg files for this.
Create a new folder in your modules folder (I'll call it MYMODULE here). Put MYMODULE.info in there (Howto at Writing .info files (Drupal 7.x))

Then create MYMODULE.module and put an implemention of hook_wysiwyg_plugin() in there. Documentation about it can be found in wysiwyg.api.php in your Wysiwyg folder, but here's some additional info:

function MYMODULE_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      return array(
        'PLUGIN_INTERNAL_NAME' => array(
          'path' => 'PATH TO EXTERNALLY STORED PLUGIN FILE', // Keep 'internal' => FALSE below if the plugin is not bundled with the editor (instead stored in this module's folder, sites/libraries folder or similar).
          // No need for 'path' key for bundled plugins, just set 'internal' => TRUE.
          // A list of buttons provided by this native plugin. The key has to
          // match the corresponding JavaScript implementation. The value is
          // is displayed on the editor configuration form only.
          'buttons' => array(
            'INTERNAL_BUTTON_NAME' => t('Button name'),
          ),
          // No need for 'extensions' key if the plugin has buttons.
          'load' => TRUE,
          'internal' => FALSE,
        ),
      );
     break;
  }
}

Next, enable MYMODULE and go to admin/settings/wysiwyg, select a CKEditor profile and enable the button (with the title "Button name" as above).

There are more examples of this hook in the issue queue as well.

chama98’s picture

Thanx for your answer TwoD. I'm a drupal newby and maybe I explained things wrong. I need to add into CKEditor toolbar MediaButton icon, that is a plugin for CKEditor.
Your solution solves the problem?

TwoD’s picture

Yes, the cusstom module pasted above will do that for you. Without the need to modify any files belonging to the editor or Wysiwyg itself, there's no worrying about what will happen when either of them are updated. Just remove the old folder and drop in the new one in its place (and run update.php if Wysiwyg needs to modify its DB table).

Wysiwyg aims to avoid any (and hopefully all) situations where hacking its core or the libraries would be needed, by providing hooks to let other modules alter things. We're not quite there yet, but it's at least possible to have final say over the settings sent to each editor using hook_wysiwyg_esitor_settings_alter(). There's also hook_wysiwyg_plugin(), as used above, to tell editors about 'native' plugins - and the buttons they make available - that are either stored in an external (to the editor itself) folder, or an internal one that wasn't handled by Wysiwyg core for some reason. The GUi needed to properly configure it hasn't been implemented yet, it depends on yet another library being installed, or maybe we just haven't gotten around to it yet. Another module could, via the hooks, focus on and provide all that while we sort out more basic issues. Another module can even implement more editors (or cross-editor plugins) via hook_wysiwyg_include_directory() and let Wysiwyg handle them just like the bundles ones. A single module could "wrap" any number of editors and/or plugins, which is something I'm using in a small side-project meant to provide a GUI to do what the above code does, and more.

Until that's done, creating a small module is the best way to make that button appear under "Buttons and plugins", and it'll be a good exercise in the Drupal way of interacting with other modules. :)

chama98’s picture

Thank you very much TwoD for such a clear explanation!
I'll try to make things work the way you suggests.

Status: Fixed » Closed (fixed)

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

areikiera’s picture

Component: Editor - CKeditor » Code
Status: Closed (fixed) » Active

Hello!

Having trouble figuring out how to edit the module code posted above (comment #2: http://drupal.org/node/872868#comment-3287362) to make it work. I'm using DRUPAL (7.4) and WYSIWYG (7.x-2.1) with CKEditor.

In my case, I've named my module 'wysiwygmedia' and put the 'mediaembed' plugin folder in that module folder (sites/all/modules/wysiwygmedia). When I enable the 'Embed Media' button, then edit a node, the editor doesn't show up at all.

My module code looks like this:

<?php
function wysiwygmedia_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      return array(
        'mediaembed' => array(
          'path' => 'mediaembed/plugin.js', // Keep 'internal' => FALSE below if the plugin is not bundled with the editor (instead stored in this module's folder, sites/libraries folder or similar).
          // No need for 'path' key for bundled plugins, just set 'internal' => TRUE.
          // A list of buttons provided by this native plugin. The key has to
          // match the corresponding JavaScript implementation. The value is
          // is displayed on the editor configuration form only.
          'buttons' => array(
            'MediaEmbed' => t('Embed Media'),
          ),
          // No need for 'extensions' key if the plugin has buttons.
          'load' => TRUE,
          'internal' => FALSE,
        ),
      );
     break;
  }
}
?>

I've also changed the path to 'sites/all/modules/wysiwygmedia/mediaembed/plugin.js', which had no effect.

I'm not sure if I'm having trouble decoding the plugin.js file and I may be incorrectly replacing elements from the original code including PLUGIN_INTERNAL_NAME or INTERNAL_BUTTON_NAME.

Could someone show me what I've done wrong?

TwoD’s picture

Component: Code » Editor - CKEditor
Status: Active » Closed (fixed)
Issue tags: -wysiwyg, -ckeditor, -drupal 7

I suggest using the drupal_get_path() function so the path will stay correct also when your module is installed in sites/sitename/modules.

Also note that later versions of Wysiwyg have a separate "filename" key. It defaults to the editor's preferred filename, but it's good to set it anyway for clarity.

If using Firebug for Firefox - or a similar tool - you should be able to use its the "Net" tab to see which file is actually requested. If it shows up in red with HTTP Status code 404 or otherwise indicates there's an error, you should be able to spot any mistakes in the path. On the "Console" tab you should also be able to see any errors that prevent the editor from loading, but don't bother digging into those unless all files are properly requested and loaded.

function wysiwygmedia_wysiwyg_plugin($editor, $version) {
...
          'path' => drupal_get_path('module', 'wysiwygmedia') . '/mediaembed',
          'filename' => 'plugin.js',
...

I just remembered that this plugin was a bit stubborn, probably because it was most likely developed on a Windows server which doesn't care about cAsEsEnSiTiViTy...
There's a working module for Drupal 6 over at #848674-13: Problems adding CKEditor plugins and instructions at http://www.wootenswebdesign.com/adding-better-embed-plugin-wysiwyg-ckeditor, but that module had to rename the plugin's folder to "MediaEmbed" and place it inside CKEditor's internal plugins folder (hence 'internal' => TRUE, and no 'path' => ... in their hook implementation. I think the plugin had hardcoded paths for its icon files or something like that so the toolbar button would be empty otherwise.
If you run into the same problems here, try the wysiwyg_mediaembed_hack module from those links but change the "core" and "version" strings in wysiwyg_mediaembed_hack.info to "7.x" instead.

Hope that sorts things out. :)

areikiera’s picture

Thanks so much, TwoD! That did the trick! Really appreciate your helpfulness and clear explanations, and thanks for all your work on the wysiwyg module.

For anybody else having trouble with this on Drupal 7, this is what my module ended up looking like, based on TwoD's original code posted in comment #2, and the suggested modifications.

<?php
function wysiwygmedia_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      return array(
        'MediaEmbed' => array(
          'path' => drupal_get_path('module', 'wysiwygmedia') . '/MediaEmbed',
		  'filename' => 'plugin.js', 
		  // Keep 'internal' => FALSE below if the plugin is not bundled with the editor (instead stored in this module's folder, sites/libraries folder or similar).
          // No need for 'path' key for bundled plugins, just set 'internal' => TRUE.
          // A list of buttons provided by this native plugin. The key has to
          // match the corresponding JavaScript implementation. The value is
          // is displayed on the editor configuration form only.
          'buttons' => array(
            'MediaEmbed' => t('Embed Media'),
          ),
          // No need for 'extensions' key if the plugin has buttons.
          'load' => TRUE,
          'internal' => FALSE,
        ),
      );
     break;
  }
}
?>

Case-sensitivity is important! And this was with the MediaEmbed plugin folder located inside this custom module folder.

(*and sorry about accidentally changing the component in my previous post. didn't even realize i did it til it was too late :) )

CFW’s picture

TwoD awesome! I use your code to enable the imce plugin and it works!

wromero’s picture

Just awesome...tryning this a lot of time and you solved it easy...thank you!

janmetpet’s picture

Ok, went through the whole thread and I'm a step further, I can actually tick an option 'Embed media'. Doing so, however will make my complete CKEditor toolbar dissapear. Anyone suggestions? Thanks in advance.

mordonez’s picture

Thanks!

Rob_Feature’s picture

Status: Closed (fixed) » Needs work

@jnmetpet: That happepned to me as well. Check the file permissions on your mediaembed folder. Mine weren't allowing it to be read so it crashed the wysiwyg.

#9 works well (I actually implemented it in D6 just fine). However, if there are two WYSIWYG fields on a single form, it always puts the embedded code in the 2nd field (even if you click the embed button on the first field). Any help on how to make sure it embeds it in the proper field? (changing back to 'needs work' for this reason)

TwoD’s picture

Status: Needs work » Fixed

@Rob_Feature, I think the issue you're seeing - content always being embedded in the first field - happens because the plugin dialog doesn't use the correct reference to the "current" editor instance.
Had the plugin (found on http://www.wootenswebdesign.com/adding-better-embed-plugin-wysiwyg-ckeditor) not used the variable name "editor" on lines 43 to 46, and instead used something like "editorInstance", you would have seen an error saying "editorInstance is undefined". But since they used "editor" and the init method has an argument called "editor" (and JavaScript has closures), the onOk method accesses it instead of a local variable and finds a reference which has changed since CKEditor created the instance we're looking for.

The fix is simple as CKEditor provides the currently active editor instance as an argument to the function passed to CKEDITOR.dialog.add(), we just need to make sure we catch it so it is found before the init argument in the scope chain.

Change plugin.js line 11 from

            CKEDITOR.dialog.add( 'MediaEmbedDialog', function ()

to

            CKEDITOR.dialog.add( 'MediaEmbedDialog', function (editor)

and the OK button should use the instance which actually created the dialog.

Status: Fixed » Closed (fixed)

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