CKEditor

Hi Roderik,

thanks a lot for for your implementation and for sharing it with the CKEditor community.

I downloaded your code and gave it a quick test. The plugin works, so congratulations on that

My first comment: it would be nice to be able to download the uncompressed source code in the development phase as its production form does not look too readable, especially if you want to encourage others to check and comment it.

Second thing: the dialog window states: "Please copy and paste the Youtube URL here", but in YouTube's case it is not entirely clear which URL you really mean: the one from the browser's address bar (http://www.youtube.com/watch?v=XXXXXX), the "Share" link (http://youtu.be/XXXXXX) or the "Embed" code/link (<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/Y4AFfpytCWU" frameborder="0" allowfullscreen></iframe>). Different YouTube solutions available not just for CKEditor, but for various forum/blog etc. engines require different approaches and end-users might be confused as to what you really mean.

As for the dialog window, why make it so huge? I see no reason for a dialog window that just contains one text field to be bigger than standard CKEditor dialog windows.

The text field is also missing the type="text" declaration and so the cursor is wrong.

Last but not least, the plugin does not support editing an already pasted YouTube video -- both the context menu and the double-click action opens the IFrame Properties dialog window and not your custom YouTube plugin dialog window. This may or may not be the desired behaviour, depending on your purpose.

Finally, the official spelling is "YouTube", so I would recommend sticking to that.

Just my two cents and thumbs up for the next revision. Thanks again for posting it!

PM is OK, although please note that it might make more sense to continue the discussions here, for future reference and for others to join/comment/add feedback.

I noticed that the plugin button was not visible in Firefox 8.0.1 in the toolbar and I had to undergo the following steps to have it working:

0) please do include a small readme in your tar-file how to install and integrate the plugin (maybe with a small info how to add language codes )

1) as everything seems to be casesensitive, I defined the toolbar entry in small letter:

 'youtube'

2) I took care that all mentions of 'youtube' in plugin.js where in small letters:

youtube

3) as the image-file youtube.png was not recognized in Firefox (other plugins also do not use png as far as I checked), I converted youtube.png to youtube.jpg and replaced youtube.png with youtube.jpg in the plugin.js

Now I got it to work.

Cheers, Connie

I checked the files which are contained in your package and I have some points:

1)
the language file uk.js is really wrong

CKEDITOR.plugins.setLang('vimeo', 'en',
{
  vimeo : 
  {
    title : "Embed Vimeo Video",
    button : "Embed Video",
    pasteMsg : "Please copy and paste the Youtube URL here"
  }
});

it points to vimeo and to english language!

2)
the image youtube_large.png is too large! I modifiedit for my purposes to a width of 140px.
I modified the youtube.js so you get a smaller dialogue window with a smaller image:

(function(){CKEDITOR.dialog.add('youtube',
   function(editor)
   {return{title:editor.lang.youtube.title,minWidth:CKEDITOR.env.ie&&CKEDITOR.env.quirks?200:250,minHeight:240,
   onShow:function(){this.getContentElement('general','content').getInputElement().setValue('')},
   onOk:function(){
                   val = this.getContentElement('general','content').getInputElement().getValue();
                   val = val.replace("watch\?v\=", "v\/");
               var text='<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/'
               //+this.getContentElement('general','content').getInputElement().getValue()
               + val
               +'?rel=0" frameborder="0"></iframe>';
   this.getParentEditor().insertHtml(text)},
   contents:[{label:editor.lang.common.generalTab,id:'general',elements:
   [{type:'html',id:'pasteMsg',html:'<div style="white-space:normal;width:140px;"><img style="margin:5px auto;" src="'
   +CKEDITOR.getUrl(CKEDITOR.plugins.getPath('youtube')
   +'images/youtube_large.png')
   +'"><br />'+editor.lang.youtube.pasteMsg
   +'</div>'},{type:'html',id:'content',style:'width:180px;height:90px',html:'<input size="40" style="'+'border:1px solid black;'+'background:white">',focus:function(){this.getElement().focus()}}]}]}})})();

Its not working w/ the new url addressing scheme that YouTube provides.

Example: http://youtu.be/Qdoe_gI_fSs

Weird how they have changed this.

Hello Everyone,

I have many many tried youtube plugin use in my latest version.
and also implement. doesn't load plugin.

anyone help me or send me complete script for ckeditor

Thanks in advance

There is a way to do it without any plugins. Use the iFrame button (furthest button to the right on the second row). Go to Youtube, get your "embed" code, then in CKEditor’s iFrame Properties menu simply put the URL part of the code in the URL field without the quotation marks. You can also set the video’s dimensions in the iFrame menu.

you can now put sharing address like.. http://youtu.be/9eYTgSGbb_M .. and popup box resizing and small logo..