Log in or register to post comments
Last post
sebstefanov's picture
Joined: 03/02/2012
Posts: 1361
oEmbed Plugin
Hmmm, doesn't work. When I press "Ok" with code in the dialog nothing happens. When there's no code the dialog simply closes. It happens in all the newest browsers. I tested with Youtube, blip.tv and vimeo. Opera is kind enough to give me an error message when I click on the oEmbed icon and another when I press Ok (the other browsers simply don't do anything). Also, in FireFox the dimension text is misaligned and the code should be config.extraPlugins = 'oEmbed'; without brackets. Here's a screenshot of the Opera messages and FF dialog:

Attachments: 

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, Google+, LinkedIn

If you think you found a bug in CKEditorread this!

sebstefanov's picture
Joined: 03/02/2012
Posts: 1361
Re: oEmbed Plugin
Oh I tried every url on blip: page url, embed url, link url. In the error message the url doesn't appear. I even tried it on a live site, figuring maybe it doesn't work on a local host.

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, Google+, LinkedIn

If you think you found a bug in CKEditorread this!

sebstefanov's picture
Joined: 03/02/2012
Posts: 1361
Re: oEmbed Plugin
Awesome, it works! I'll reserve you a +1 for when we get the new site. ;)

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, Google+, LinkedIn

If you think you found a bug in CKEditorread this!

uniterre's picture
Joined: 16/07/2012
Posts: 12
Re: oEmbed Plugin
doesn't work on Internet explorer.

We have to remove comas after labels :
               }, {
                    type: 'hbox',
                    widths: ['50%', '50%'],
                    children: [{
                        type: 'text',
                        id: 'width',
                        'default': '560',
                        label: editor.lang.oEmbed.width[b],[/b]
                    }, {
                        type: 'text',
                        id: 'height',
                        'default': '315',
                        label: editor.lang.oEmbed.height[b],[/b]
                    }]



There is a bug with minWidth too.
I changed :
minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 368 : 350,

by
minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 568 : 550,
zoey's picture
Joined: 29/08/2011
Posts: 10
Re: oEmbed Plugin
tha_watcha wrote:

Installation

1. Extract the contents of the file into the "plugins" folder of CKEditor.
2. In the CKEditor configuration file (config.js) add the following code:

config.extraPlugins = '[ oEmbed ]';
Please add step #3 to the Installation notes.

3. In the same CKEditor configuration file (config.js) add the 'oEmbed' in the toolbar, similar to the following example:
    { name: 'insert',      items : [ 'Image','oEmbed','Youtube','Video','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },

After following the directions and loading jquery on the editor page, this plugin menu loads and when entering a YouTube url and clicking OK, the box closes but there is no code updated in the editor. I'm using Chrome version 20x. I hope these notes are helpful in resolving this problem and making this plugin work with the major browsers.
zoey's picture
Joined: 29/08/2011
Posts: 10
Re: oEmbed Plugin
tha_watcha wrote:Works perfectly for me in chrome and in other browser. It depends on which url you provide like http://www.youtube.com/watch?v=123456 or http://youtu.be/123456 are supported. If it still not working please take a look at the chrome javascript error log if there are any errors
Thank you for your reply, I appreciate it very much. I hope these notes help others in similar circumstances. Downloaded oEmbed1.03.zip, followed the directions, and also added the following in the <head>...</head> section of the CKEditor form page.

<script src="/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/jquery/jquery.oembed.min.js" type="text/javascript"></script>
Result: The oEmbed Plugin menu accepts the YouTube URL (including other sources) and closes. However, there is nothing on the editor box of the URL information, it's blank. Chrome version 20x, there are no errors in javascript. If there is any step I've missed, please clarify if this plugin works with the current CKEditor version: 3.6.3.
project1's picture
Joined: 31/07/2012
Posts: 1
Re: oEmbed Plugin
Does not work in IE 8 :(
After pressing OK button log error write: console is not defined at oEmbedDialog.js at line 32. How fix it?
uniterre's picture
Joined: 16/07/2012
Posts: 12
Re: oEmbed Plugin
same prb on IE : console is undefined
brad000123's picture
Joined: 15/09/2012
Posts: 1
Re: oEmbed Plugin
good work thanks , useful thread to start,
ingo's picture
Joined: 16/09/2012
Posts: 12
Re: oEmbed Plugin
Updated Version now available

Description
This Plugin allows to insert embedded content (such as photos, videos, audio, and other rich media) via the OEmbed API. You only have to provide the url to the site (It works also when the url is shortened) you want to embed and the plugin does the rest.

Currently Supported Sites...

Video


  • Youtube - oembed - YQL

  • Blip - oEmbed

  • Hulu - oEmbed

  • Vimeo - oEmbed

  • National film board of Canada - oEmbed

  • Qik - oEmbed

  • Dotsub - oEmbed

  • Clikthrough - oEmbed

  • Kino Map - oEmbed

  • Funny Or Die - Embedded

  • College Humour - Embedded

  • Metacafe - Embedded

  • embedr - Embedded

  • 5min - oEmbed is XML only - using YQL to translate it

  • ustream.tv - oEmbed is not JSONP enabled - using YQL to translate it

  • viddler - OGP

  • twitvid - Embedded

  • bambuser - Embedded

  • xtranormal - Embedded

  • Gametrailers - Embedded

  • Vzarr - Embedded

  • VHX - oembed

  • bambuser - oembed

  • dailymotion.com - oembed

  • animoto - oembed

  • justin.tv - YQL JSON

  • livestream - OGP

  • scivee - embedded

  • veoh - embedded

  • minoto-video - oembed using YQL

  • TrailerAddict - OGP

  • vodpod - oembed YQL - broken as the oembed has absolute positioning which breaks the display

  • fora.tv -OGP YQL

  • TED - OGP YQL

  • Aniboom - embedded

  • Comedy Central - OGP

  • snotr - embedded

  • zapiks - OGP

  • youku - embedded

  • wistia - Oembed


Audio


  • Soundcloud - oEmbed

  • HuffDuffer - oEmbed

  • BandCamp - YQL and Embedded

  • podomatic - OGP

  • rdio.com - oEmbed

  • hark.com - OGP

  • chirb.it - YQL and oembed

  • official.fm - YQL and oembed

  • mixcloud - YQL and oembed

  • shoudio - oembed

  • audioboo.fm - OGP

  • Spotify - OGP YQL


Photo


  • flickr - oEmbed

  • photobucket - oEmbed

  • instagram - oEmbed

  • yfrog - oEmbed

  • 23HQ - oEmbed

  • Smugmug - oEmbed

  • twitpic - OGP YQL

  • 500px.com - OGP

  • visual.ly - YQL Lookup

  • img.ly - Thumbnail view

  • imgur.com - Thumbnail view

  • twitgoo.com - Thumbnail view

  • gravatar - Thumbnail view when using mailto

  • pintrest - YQL - Embedded view of a sort.

  • circuitlab - image view

  • skitch - YQL oembed

  • graphic.ly - OGP

  • dribble - jsonp lookup

  • Lockerz - YQL lookup

  • AsciiArtFarts - YQL Lookup

  • lego cusoo - OGP over YQL

  • plannary - OGP over YQL

  • propic - OGP

  • avairy.com - OGP

  • lomography - ogp

  • weheartit - ogp

  • glogster - ogp

  • chart.ly - embedded

  • twitrpix - OGP

  • chictopia - OGP


Rich


  • Meetup - oEmbed

  • gigapans - Embedded

  • Slideshare - oEmbed

  • ebay - Embedded

  • scribd - Embedded

  • screenr - Embedded

  • tumblr- JSONP lookup

  • imdb - JSONP lookup via imdbapi.com

  • wikipedia- JSONP lookup

  • github- JSONP lookup (CSS)

  • eventful - OGP

  • myspace - OGP

  • live Journal - JSONP Lookup (CSS)

  • wordpress - oEmbed (wordpress.com, wp.me, blogs.cnn.com, techcrunch.com). I can add other wordpress sites as well.

  • circuitbee -Embedded

  • stack overflow - JSONP Lookup (CSS)

  • Facebook - JSONP Lookup (CSS)

  • Pastebin - Embedded

  • Pastie - YQL lookup

  • kickstarter - Embedded

  • issuu - OGP

  • reelapp.com - Embedded

  • Etsy - OGP over YQL

  • Amazon - Embedded - Requires Affiliate code

  • linkedin - Embedded IFRAME - found a link that works :)

  • Lanyrd - YQL (CSS)

  • twitter - Oembed - status only - but that is ok I think

  • github gist - oembed

  • speakerdeck - yql oembed

  • dipity - yql oembed

  • dailymile - oembed

  • deviantart - oembed

  • Roomshare Japan - oembed

  • mobypictures - oembed

  • prezi - embedded

  • popplet - embedded

  • authorstream - OGP

  • googlecalendar - Iframe

  • cacoo - oembed

  • pearltrees - embedded

  • urtak - oembed - is broken in iframe return atm -seems to be an embed.ly issue??

  • jotform - embedded

  • Urban Dictionary - YQL lookup

  • Ars Technica - YQL Lookup

  • Eventbrite - OGP YQL

  • last.fm OGP YQL

  • Rotten Tomatoes - OGP YQL

  • iFixit - OGP

  • qwiki - OGP

  • brighttalk - Meta info

  • tinychat - OGP

  • tourwrist - embedded

  • bnter - OGP

  • bigthink - OGP

  • wirewax - OGP

  • whosay - OGP

  • timetoast - embedded

  • tripline - OGP

  • jsfiddle - embedded


Screenshots

Image

License

Licensed under the terms of the MIT License.

Download

for CKEditor 3.6.x
oEmbed_CKEditor3.zip

for CKEditor 4
oEmbed_CKEditor4.zip

Installation

1. Extract the contents of the file into the "plugins" folder of CKEditor.
2. In the CKEditor configuration file (config.js) add the following code:

config.extraPlugins = '[ oEmbed ]';


3. and also include the plugin in the toolbar

toolbar :[ ... ['oEmbed']...]

Attachments: 

sebstefanov's picture
Joined: 03/02/2012
Posts: 1361
Re: oEmbed Plugin
If I did, I apologize. It's a fight to the death here: me vs. the spam bots. I guess you were caught in the crossfire. For some reason the system keeps flagging you.

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, Google+, LinkedIn

If you think you found a bug in CKEditorread this!

uniterre's picture
Joined: 16/07/2012
Posts: 12
Re: oEmbed Plugin
Hi,

Have you tested your plugin in Internet Explorer ? It doesn't work for me.
I saw little differences between the file you provided and this one : https://github.com/starfishmod/jquery-o ... .oembed.js

Regards,
Alexandre

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET4.0C)
Horodateur : Tue, 2 Oct 2012 05:20:25 UTC

Message : Identificateur, chaîne ou nombre attendu
Ligne : 230
Caractère : 9
Code : 0
URI : /oEmbed/dialogs/jquery.oembed.js?t=C6HH5UF

Message : Cet objet ne gère pas cette propriété ou cette méthode
Ligne : 30
Caractère : 6
Code : 0
URI : oEmbed/dialogs/oEmbedDialog.js?t=C6HH5UF

Attachments: 

AttachmentSize
bug_1.png36.16 KB
uniterre's picture
Joined: 16/07/2012
Posts: 12
Re: oEmbed Plugin
well, I remove the comments for 2 lines :
error: settings.onError.call(container, externalUrl, embedProvider)

and it works on IE

Why ?
ingo's picture
Joined: 16/09/2012
Posts: 12
Re: oEmbed Plugin
uniterre wrote:well, I remove the comments for 2 lines :
error: settings.onError.call(container, externalUrl, embedProvider)

and it works on IE

Why ?


Well if it works with that code i re-add that code.
cosmonaut's picture
Joined: 12/09/2012
Posts: 7
Re: oEmbed Plugin
When I paste in a youtube URL like:
http://www.youtube.com/watch?feature=pl ... tXtSGRV0xc

(note v= param is at the END of URL)

nothing happens in FF or chrome.

In IE, I get this error:
Unable to get the value of the property 'json': object is null or undefined
jquery.oembed.js
line: 444
char: 6

- - - - - - - - - - - - - -

Unfortunately, this URL format is quite common.
ingo's picture
Joined: 16/09/2012
Posts: 12
Re: oEmbed Plugin
cosmonaut wrote:When I paste in a youtube URL like:
http://www.youtube.com/watch?feature=pl ... tXtSGRV0xc

(note v= param is at the END of URL)

nothing happens in FF or chrome.

In IE, I get this error:
Unable to get the value of the property 'json': object is null or undefined
jquery.oembed.js
line: 444
char: 6

- - - - - - - - - - - - - -

Unfortunately, this URL format is quite common.


the youbute oembed service can not handle such urls with mor then the v query string. The only way is to fix the url before its send to youtube. I updated the plugin downloads are updated.

https://github.com/w8tcha/CKEditor-oEmbed-Plugin
inmarelibero's picture
Joined: 27/10/2012
Posts: 1
Re: oEmbed Plugin
Hi, I'm experiencing the following problem:

I loaded correctly oEmbed plugin for CKEditor 3.x, but when I try to embed

http://www.youtube.com/watch?v=IlHRSpFGtQk


chrome debug console returns:

Uncaught TypeError: Cannot read property 'json' of null


Am I making something wrong?

I opened a github issue: https://github.com/w8tcha/CKEditor-oEmbed-Plugin/issues/1
buzoganylaszlo's picture
Joined: 11/03/2013
Posts: 4
CKEditor 4.1 OEmbed fix

The current version (4.0) of the OEmbed plugin is not compatible with CKEditor 4.1, thwors an error of Uncaught TypeError: Cannot read property 'isBlock' of undefined. The fix is really easy. In the ombed plugin directory find the plugin.js and change the following rows

editorInstance.insertHtml(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');
editorInstance.insertHtml(e.code);

to

editorInstance.insertHtml(editor.config.oembed_Wrapper != null ? $('<div>').append($(editor.config.oembed_Wrapper).append(e.code)).html() : e.code);

From now on instead of specifying a wrapper class like

config.oembed_WrapperClass = 'embededContent';

specify any wrapping tag with additional attributes and/or styles, like

config.oembed_Wrapper = '<p style="text-align:center">';

And that's all.