Posted by Zurbonium on March 14, 2010 at 3:44am
Is there a way to get the CKeditor mediaembed plugin to work with WYSIWYG? With the CKeditor module, it requires uncommenting a couple lines of code in the ckeditor.config.js file and adding 'MediaEmbed' to one of the toolbars in the same file. Is there an equivalent way to do this in the WYSIWYG module?
For reference:
plugin download: http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor
how-to install: http://jesox.com/posts/how-add-youtube-vimeo-or-any-other-embed-content-ckeditor
Comments
I'm looking for the exact
I'm looking for the exact same thing - is there a way to do this? I haven't figured it out.
HOOK_wysiwyg_editor_settings_alter
Since wysiwyg 2.1, you can use the wysiwyg_editor_settings_alter hook to add custom settings. This is what I used to get templates working for CKEditor for example, assuming you put it in a module named 'custom.module':
function custom_wysiwyg_editor_settings_alter(&$settings, &$context) {if($context['profile']->editor == 'tinymce') {
$settings['forced_root_block'] = '';
}
if($context['profile']->editor == 'ckeditor') {
$settings['toolbar'][0][] = 'Templates';
$settings['stylesCombo_stylesSet'] = 'my_styles:/sites/default/themes/blindfold/javascripts/ckstyles.js';
$settings['templates_files'] = array('/sites/default/themes/blindfold/javascripts/cktemplates.js');
$settings['templates'] = 'my_templates';
$settings['templates_replaceContent'] = false;
$settings['bodyId'] = 'content';
}
}
(see http://drupal.org/node/313497#comment-2762226)
There's a better way
If you want to use a 'native' plugin like mediaembed, you can implement hook_wysiwyg_plugin() (documentation/example in the file wysiwyg.api.php) and it'll show up in the "Buttons and Plugins" list just like any other plugin. You can also place the plugin files in some other directory (say that of the custom module) and have the hook implementation point - and make the editor load it from - there so you don't have to keep track of it when upgrading the editor. =)
The hook can also provide a list of settings to override the default settings of the editor, but only when the plugin is enabled.
Of course, nothing stops you from implementing both hooks to provide advanced settings, like we had to do in http://drupal.org/node/769830 for a bug workaround.
Found a solution
Thanks for the posts! After a bit of trial and error, I've figured out how to get this to work with CKEditor and the WYSIWYG module. I created a custom module called "mediaembed" and placed the plugin in a directory called "plugin" inside my module's directory. Then I used this code for the module:
/*** Implementation of hook_wysiwyg_plugin().
*/
function mediaembed_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'MediaEmbed' => array(
'buttons' => array(
'MediaEmbed' => t('Media Embed'),
),
'path' => drupal_get_path('module', 'mediaembed') . '/plugin/',
'url' => 'http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor',
'load' => TRUE,
),
);
}
}
Hopefully this can save someone else a bit of time.
Daniel
CKEditor not showing
Hi Daniel,
I've followed your instructions and ended up with the CKEditor disappearing completely from the node after enabling the media embed button in the CKEditor profile.
Here is my setup:
I use latest rev of wysiwyg, ckeditor and media embed plugin
- ckeditor resides in sites/all/libraries
- Created module mediaembed containing directory plugin and files mediaembed.info and mediaembed.module
- Downloaded plugin zip file, unzipped and copied mediaembed folder into plugin directory
- Enabled mediamed module
- Check Media Embed in CKEDitor profile -> Editor doesn't show in node; if Media Embed unchecked, editor shows.
Any idea what I'm missing?
Thanks!
CKEditor not showing
Hi Daniel,
I've followed your instructions and ended up with the CKEditor disappearing completely from the node after enabling the media embed button in the CKEditor profile.
Here is my setup:
I use latest rev of wysiwyg, ckeditor and media embed plugin
- ckeditor resides in sites/all/libraries
- Created module mediaembed containing directory plugin and files mediaembed.info and mediaembed.module
- Downloaded plugin zip file, unzipped and copied mediaembed folder into plugin directory
- Enabled mediamed module
- Check Media Embed in CKEDitor profile -> Editor doesn't show in node; if Media Embed unchecked, editor shows.
Any idea what I'm missing?
Thanks!
CKEditor not showing - solved
Here is the module code that resolved my issue:
<?php
/**
* Implementation of hook_wysiwyg_plugin().
*/
function mediaembed_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'MediaEmbed' => array(
'buttons' => array(
'MediaEmbed' => t('Media Embed'),
),
// 'path' => drupal_get_path('module', 'mediaembed') . '/plugin/',
// 'url' => 'http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor',
'load' => TRUE,
'internal' => TRUE,
),
);
break;
}
}
I have the same problem but
I have the same problem but unfortunately zuriwest's code didnt fix the problem. Anyone else got it to work?
I finally got around to
I finally got around to trying out these solutions. Thanks everyone! However, I also ran into the problem of my module causing CKeditor to not show up on my node edit page. In the above code, I don't think the 'path' line was complete. I tried changing it to:
'path' => drupal_get_path('module', 'mediaembed') . '/plugin/plugin.js',which got CKeditor to show up again, but the mediaembed icon was blank and wasn't working correctly.
So I tried using the "internal" native plugin method instead and that worked!
Here are the full steps I did (note this is the first time I've made a module so it might not be perfect):
1) Extract the mediaembed zip file to sites/all/libraries/ckeditor/plugins
2) Make a folder under sites/all/modules called mediaembed (to make your own module)
3) In that folder create a file called mediaembed.info that has this in it:
; $Id$name = Media embed
description = Adds the mediaembed plugin to CKeditor in the Wysiwyg module
core = 6.x
package='User interface'
4) Create another file called mediaembed.module that has this in it:
<?php// $Id$
function mediaembed_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'MediaEmbed' => array(
'url' => 'http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor',
'buttons' => array(
'MediaEmbed' => t('Media Embed'),
),
'load' => TRUE,
'internal' => TRUE,
),
);
break;
}
}
5) Enable the custom module, then enable the mediaembed button in your Wysiwyg profile
a little problem
follow all the steps, but do not see the checkbox to activate the plugin
Enabling the Media Embed button makes my editor disappear
I am using http://drupal.org/project/wysiwyg with ckeditor too. I followed Zurbonium's solution, and here is what happened:
Are there any steps you didn't mention above, or that I missed that will get this to work? I went on to try every version of mediaembed_wysiwyg_plugin shown in the posts above, and none worked. I tried adding a closing ?> tag to Zurbonium's mediaembed.module file and that didn't help either. I also tried adding different variation of path to the mediaembed.module code shown above, because I noticed there is no path (is it needed?), but that didn't work. Any help you can give would be appreciated!
I can't think of any steps I
I can't think of any steps I missed. I double checked my current code with what I posted, and it all seems to match. It shouldn't need a path when 'internal' is set to TRUE, and I believe the ?> should be left off according to the Drupal coding standards. Not sure if it matters, but I'm using Wysiwyg version 6.x-2.1 and CKeditor version 3.2.0.5205. I wish I could be of more help!
I am using version 3.4.0.5825 of CKeditor
I have version 6.x-2.1 of Wysiwyg as well, but I have version 3.4.0.5825 of CKeditor. I will keep looking into it and if I find anything I'll post it here. You are correct about the Drupal standard of ?> being left off. My co-worker informed me of that after I submitted my post.
It was a pathing issue
Hello again. My issues turned out to be a pathing issue. I'm on a Linux server, and so capitalization matters. The internal => TRUE parameter was resulting in having one of the directories called /MediaEmbed/ when in reality it needs to be /mediaembed/. Therefore, I removed that parameter, and added the following path parameter:
'path' => 'sites/all/libraries/ckeditor/plugins/mediaembed/',
That solved the problem I was having with the editor not appearing. However, I still have one remaining issue. When I use the new Media Embed button to embed something like this:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/nahjN8y2Pgk?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/nahjN8y2Pgk?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>The resulting code inputted into the ckeditor is actually:
<div class="media_embed"><img align="" alt="Flash Animation" src="../../sites/all/libraries/ckeditor/images/spacer.gif?t=A7HG4HT" style="width: 480px; height: 385px;" /></div>That aint right... thoughts anyone?
Your issue is most likely
Your issue is most likely caused by input filters stripping out tags like "object". Try switching the HTML filter off.
Localization
AperoMedia's solution has worked for me but I can't figure out how to localize this plugin. I even tried hardcoding another language into the plugin.js file but this does not work.
Firefox Issue
In my previous post, I noted that it wasn't quite working because the resulting code was not correct. I had another staff member test it and it worked for him. So I started trying it in different browsers, and it seems that it only does this issue in Firefox. When I used the mediaembed button in IE, it worked perfectly. I'm not sure why it wouldn't be working in Firefox, so if anyone has any ideas, let me know. Thanks!
Javascript error
Hello all
I was so happy to find finally a tutorial mediaembed with Wysiwig, but I got some problems to make it working
I followed the steps of AperoMedia and the internal method too but each time I've got the same javascript error :
"u is null" ckeditor.js line 22
My config is :
CKEditor 3.4.0.5825
Wysiwyg 6.x-2.1
My code:
<?php// $Id$
function mediaembed_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'mediaembed' => array(
'buttons' => array(
'MediaEmbed' => t('Media Embed'),
),
'url' => 'http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor',
'load' => TRUE,
'internal' => TRUE,
),
);
}
}
Did somebody already have the same problem?
What did I do wrong?
Thanks.
Is there a way to define
Is there a way to define where the ckeditor lib is located? I'm using Drupal Commons which has the CKeditor placed in the /profiles/drupal_commons/libraries folder.
Thanks!
Anybody has a success story with this plugin
I read through all your comment and tried all but non seem to work.. can any one there help me out.
This isn't working
My module is this:
mediaembed.info
; $Id$name = Media embed
description = Adds the mediaembed plugin to CKeditor in the Wysiwyg module
core = 6.x
package='User interface'
mediaembed.module
<?php// $Id$
function mediaembed_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'MediaEmbed' => array(
'url' => 'http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor',
'buttons' => array(
'MediaEmbed' => t('Media Embed'),
),
'load' => TRUE,
'internal' => TRUE,
// 'path' => drupal_get_path('module', 'mediaembed') . '/plugin/plugin.js',
'path' => drupal_get_path('module', 'mediaembed') . '/plugin/',
),
);
break;
}
}
?>
It works
Try the code from this link it works perfectly
http://www.wootenswebdesign.com/adding-better-embed-plugin-wysiwyg-ckeditor
Editor not appearing
I had the same problem as reported many times here: once I enabled the plugin (configured using 'path', not 'internal'), my editor failed to appear.
It turned out it was simply a permission problem on my plugin directory. Web server did not have read/execute access on the plugin directory and its content.
There is a module for that
Hey, I just released a module for that: http://drupal.org/project/wysiwyg_mediaembed
works very well
This works great - I tweaked the .info file to make it work on D7 and posted a patch. good stuff!