Blog » Adding YouTube and Vimeo buttons to embed content using the SilverStripe WYSIWYG editor.
Adding YouTube and Vimeo buttons to embed content using the SilverStripe WYSIWYG editor.
Currently i'm developing a new web presence for Jodie Lee and I thought that it would be cool to make it easier for her to add YouTube and Vimeo videos to her site. I first had a look at the short codes but then decided that I would give modifying the WYSIWYG editor a crack. First of all, this requires changes to some of the core files, which is advised against if you ever need to upgrade the SilverStripe to a newer version.
Give me the code mofo!
First of all, I modified SilverStripe 2.4.5 All you need to do is just paste the code into your root directory. I've only included the files in the zip which I've modified
To keep with the style of the SilverStripe editor, I have used the ssbuttons style of adding content to the editor:
The editor with the included YouTube and Vimeo buttons.
The YouTube SilverStripe properties box
The Vimeo SilverStripe properties box.
What happens is these 2 property boxes will embed the old version of the YouTube embed code and the Vimeo embed code. The new version uses the iframe tag and this is not supported within the WYSIWYG editor.
The code modifications
Lets get to the details of what had to be modified!
cms/css/layout
We had to add some styles for the 2 new forms.
cms/javascript/tinymce_ssbuttons/langs/de.js
Added language definations for insertyoutube and insertvimeo.
cms/javascript/tinymce_ssbuttons/langs/en.js
Added language definations for insertyoutube and insertvimeo.
cms/javascript/tinymce_ssbuttons/editor_plugin_src.js
Added editor button references to the 2 new buttons.
cms/javascript/tinymce_ssbuttons/img
A couple of images were used for the buttons called vimeo.png and youtube.png
cms/templates/LeftAndMain.ss
Added the 2 new form placeholders. $YoutubeForm and $VimeoForm.
cms/_config.php
Change HtmlEditorConfig to reference the 2 new buttons.
sapphire/forms/HtmlEditorField.php
Added the YoutubeForm and VimeoForm functions which create the forms.
sapphire/javascript/tiny_mce_improvements.js
Added javascript code to make the 2 forms functional.
sapphire/lang/en_US.php
Added language variables for the 2 forms.
Furthur modifications:
- At the moment, when a video is embedded, it just puts the default flash object placeholder into the admin. It would be nice to show an image of the video with the play button on it.
- Upgrade it to use the new version of the embed code with an iframe.
- Enable 'Use HTTPS' for YouTube. When I added this, security errors appeared.
- Add some configuration options for things such as default height and width.
- Adding language support to the other lang files within the sapphire/lang directory
Lets get it in the core:
I can see any problems which this shouldn't be included into the core. At the moment, the editor supports embedding a swf file and this is basically the same, except its sourced from another server.
Code Diff
Here is all of the code differences as from trac. For some reason, a lot of spaces have been added to the source code and count as differences.
Eh, wheres the code
Post your comment
Comments
CW says:
Sorted it. I have a en_GB site and not a en_US one. I made the lang changes to the en_GB file instead. Cheers
Posted by CW, 30 March 2012 (1 year ago)
CW says:
I'm having the same trouble as Katie. Firebug is telling me:
showForm is null
showForm.toggle(ed);
Line 55 of editor_plugin_src.js
Posted by CW, 30 March 2012 (1 year ago)
Katie says:
PS running 2.4.5 locally
Posted by Katie, 12 January 2012 (1 year ago)
Katie says:
Hi, I really like the look of this addition - I think it would be great if it was a standard inclusion.
I updated all the files and the Vimeo and YouTube icons are visible in the SS editor. However, when I click on the icons nothing happens.
Is there something that I have overlooked?
Posted by Katie, 12 January 2012 (1 year ago)
Markus says:
hi ,
thanks for the code helped me much to get deeper in the MCE editor. as mentioned earlier, i too changed the vimeo and youtube code to iframe instead of object. further more i added a html5 video pane. for those who are interested - the modified files in the link.
cheers
markus
Posted by Markus, 3rd September 2011 11:57 am (2 years ago)
gav says:
Hey Marina. I've just done a quick search and it appears that you can add an iframe to tinyMCE by modifying the extended_valid_elements. If this works, I\'ll write an editor button to insert a google map. I'll also update the youtube & vimeo buttons to you the iframe as this is the preferred way. I'll see if have some time today to give this a go.
Posted by gav, 29th May 2011 11:26 pm (2 years ago)
Marina says:
any chances you could do the same for googlemaps or an "add iFrame" tab in general? Greatly missing this feature in the tinyMCE and couldn´t really find help in the forums :-/
great job you did here btw :-)
Posted by Marina, 29 May 2011 (2 years ago)
RSS feed for comments on this page | RSS feed for all comments
