w8tcha / ckeditor-oembed-plugin

oEmbed Plugin for CKEditor

Hi there 👋

ckeditor-oembed-plugin's Issues

Gist embed is not working

Hi,

first thanks for you development +1

I tried to insert a Gist in your demo, but it does not work.
The URL i tried is:
https://gist.github.com/hostianer/dbe96e6ab414af208372

How about more stylish icon?

Hi, sorry for bad English.

For now it looks out of all style of ckeditor moono style

I saw it in another repo rsanchez@4a34314

not sure about copyrights

French translation

Hello,
Although I can not see the box in cfeditor 4, I give you the French translation of your pluging.
happy New Year

CKEDITOR.plugins.setLang('oembed', 'fr', {
title : "Intgrer des contenus multimédia externe. (Photo, Video, Audio, ...)",
button : "Insérer des contenus multimédia à partir de divers sites de contenu.",
pasteUrl : "Coller l'URL de partage que vous voulez publier. De nombreux services sont pris en charge (YouTube, Flickr, Qik, Vimeo, Hulu, Viddler, MyOpera, etc.). Vous pouvez aussi utiliser les URLs courtes.",
width : "Max. Largeur :",
height : "Max. Hauteur :",
invalidUrl : "Merci de fournir une adresse valide !",
noEmbedCode : "Aucun code d'intégration trouvé ou le site n'est pas supporté !"
});

Bug - Inserts an empty div on CKEditor 4 if you set a wrapper class.

Just tried to get this working on CKEditor 4. It works fine until you set the wrapperclass variable in your config. If you do that, it instead places an empty div with nothing in it. So for example:

config.oembed_WrapperClass = 'embeded';

would result in only this being put into the editor when you put a (valid) media link in:

As soon as you comment out the WrapperClass line in the config, it works.

Doesn't work on HTTPS

Remove the "http" in 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
=> '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'

and it will work ;)

Youku

when I add a youku video, everything is fine, except if I want to edit again, it doesn't shoe up in ckeditor.

Embedded content duplication in case of resize

At the demo page for oembed do the following
http://w8tcha.github.io/CKEditor-oEmbed-Plugin/

1. Embed a slideshare content e.g http://www.slideshare.net/OCTannerCompany/ss-6-career-celebrations
   No resize (use default) chosen
2. After the content is embedded , double click to open the editor . In the editor now select 'specific resize' and click 'ok' .
   Now sometimes the embedded content gets duplicated in the view .

Next try to edit again say select 'Responsive resize' it will definitely duplicate content

You can again repeat the process and after each save the embedded content gets duplicated .

Expected is that the original embedded content is resized.

Does "responsive resize" work?

As far as I understand "responsiveness" content must become smaller when I shrink browser window, but iframe stays the same size and goes out of the parent div.embeddedContent block.

I have tried this with youtube, vimeo, dailymotion videos and plugin acts the same.

Do not show icons

This is my config.js and i don't know why i can't see button to use...

/**
 * @license Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'pl';
    config.uiColor = '#bf610d';
    config.removePlugins = 'forms,save,flash,iframe,newpage,specialchar,pagebreak,about';
    //config.filebrowserBrowseUrl = '/upload/upload.ph';
    //config.filebrowserUploadUrl = '/upload/';
    config.filebrowserImageUploadUrl = '/upload/upload.php';
    //config.contentsCss = 'font.css';
    //config.font_names = 'Custom Text/customFontTekst' + 'Ariel/Ariel' + config.font_names;
    config.toolbar = 'Basic';
    config.extraPlugins = '[ oembed ]';
    config.allowedContent = true;
    config.oembed_maxWidth = '560';
    config.oembed_maxHeight = '315';
    config.oembed_WrapperClass = 'embededContent';
    config.toolbar_Full = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Preview', 'Print', '-', 'Templates' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
       { name: 'insert', items: [ 'Image', 'Table', 'oembed', 'HorizontalRule', 'Smiley', 'PageBreak' ] },
    [ 'oembed' ],
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        '/',
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
        { name: 'others', items: [ '-' ] },
        { name: 'about', items: [ 'About' ] }
    ];
    config.toolbar_Basic =
    [
        ['Source', '-', 'Preview'],
        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
    ];
};

Tweet embed

Hi!

How to add twitter embed

Which Premier League manager are you? Take this TEST: http://t.co/nblhK6ifHR . pic.twitter.com/ds5fZsXqfP

— Sky Sports Football (@SkyF00tball) 27 августа 2014

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Firing "change" event after content has been embedded

Hi there,

I am relying on the "change" event fired by ckeditor to update the Angular models in an application. This works great and fires correctly after adding content via this plugin, but I end up with only the wrapper div (i.e. <div class="embeddedContent"></div>) being added, before oembed has filled it with the correct contents. It seems that oembed then does its thing but the change event does not fire again so I never see the actual content after it has loaded (e.g. including an <iframe>).

Is there a way that the plugin can fire the "change" event after it has finished loading as well?

Thanks!

Text after an embed is placed in a DIV instead of a P

An example using the official demo:

To reproduce:

1. Enter the URL via the dialog (I only tried with a Youtube URL)
2. Click OK
3. Type "Return" twice
4. Type some text
5. Check source - you're in a DIV instead of a P.

I believe the expected behavior is that it should go back to a P tag (or whatever the default wrapper is, as defined in config.enterMode).

http://www. is replaced by http:www. with youtube since last update

Hi and thank you for your great plugin !

Since your last commit with the resize options, all my youtube links are bad formatted like http:www.youtube.com/embed/.......

Thanks

jquery-oembed-all version.

The current Readme states:

This Plugin uses the jquery-oembed-all Plugin located at https://github.com/starfishmod/jquery-oembed-all.

That project is dead. You could use https://github.com/nfl/jquery-oembed-all instead (as suggested by @starfishmod), it has some updates.

If you use your own modified version, you could rebase it and clarify this in the Readme.md.

cannot redp property 'json' of null

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 submitted a post here

Doesn't work in inline editing

Hi and thank you for your nice plugin :) but... it doesn't work in inline edition mode (tested with a youtube link).
All I see is a big square with a red IFRAME inside, and if I remove my contenteditable tag in my div, it works :(

responsive videos not seem to work

Hello,
I've installed your plugin to be able to embed videos in a responsive way but it does not seem to work… Even looking at the code on your demo page (I embed a video and then click "source") I see nothing "responsivizing" it.
On your demo page I also read I have to add a jquery script http://w8tcha.github.io/CKEditor-oEmbed-Plugin/ to make it work. But have I to activate it somehow or just add the js in my header?
thanks in advance

Uncaught TypeError: Cannot read property 'icons' of null

Console reports Uncaught TypeError: Cannot read property 'icons' of null
CKEditor 4.3 + latest oEmbed

Vimeo media ignores resize settings

Some videos from vimeo ignore the size settings. Regardless of settings (no resize/responsive/specific)

It seems the demo at http://w8tcha.github.io/CKEditor-oEmbed-Plugin is till suffering from Issue (#39) and as such I've verified this issue on both the demo site and a local test environment running the latest commit (7534f12)

Verified on:
Windows 7
Chrome (v32.0.1700.76)
Firefox (v26.0)

Reproduction:
Use the following URL: http://vimeo.com/85217548

This results in an oversized embedded media.

The same thing happens when using both responsive- and specific resize. Regardless of what sizes I specify.

Getting error while pasting from youtube

Hi, today i pulled lastest version from master branch and got error when pasting link from youtube.

Flickr or Stackoverflow for example still works.
link http://www.youtube.com/watch?v=XDg8uQXHuoo
same problem with this link http://youtu.be/XDg8uQXHuoo
And just tried Vimeo. Also same error.
Sorry for bad English.

From Google Chrome

Uncaught TypeError: Cannot read property 'isBlock' of undefined
d
f
(anonymous function)
CKEDITOR.editable.CKEDITOR.tools.createClass.proto.insertHtml
(anonymous function)
c
CKEDITOR.event.CKEDITOR.event.fire
CKEDITOR.editor.CKEDITOR.editor.fire
CKEDITOR.tools.extend.insertHtml
jQuery.oembed.onEmbed plugin.js:52
success jquery.oembed.min.js:1
embedCode jquery.oembed.min.js:1
(anonymous function) jquery.oembed.min.js:1
jQuery.extend.each jquery.js:649
jQuery.fn.jQuery.each jquery.js:271
$.fn.oembed jquery.oembed.min.js:1
onOk plugin.js:48
(anonymous function)
c
CKEDITOR.event.CKEDITOR.event.fire
CKEDITOR.tools.extend.onClick
(anonymous function)
c
CKEDITOR.event.CKEDITOR.event.fire
CKEDITOR.ui.dialog.button.CKEDITOR.tools.extend.click
c
CKEDITOR.event.CKEDITOR.event.fire
(anonymous function)

Impossible to resize oembedded content by dragging bottom right corner

It impossible to resize oembedded content by dragging bottom right corner. From user point of view, it should behave identical to picture widget. Resize is possible from both UI dialogue and dragging right corner.

Uncaught TypeError: Cannot read property 'isBlock' of undefined

Hi,

I'm encountering this error Uncaught TypeError: Cannot read property 'isBlock' of undefined when using inline editing for ckeditor. I got the plugin from http://ckeditor.com/builder. I also tried to get the updated plugin here but no luck. Can you please help me? Thanks in advance

Cannot view video after insert in editor

When I try to insert a video, instead of a video I get a big box with the text "IFRAME" in the middle.

Previously, I was able to see the video.

YouTube Max.Width / Max.Height

Setting a Max. Width / Max. Height for YouTube videos does not seem to work at all. Width and height are always set to 480 / 270, respectively.

Yahoo Pipes is going away

http://pipes.yqlblog.net/post/120705592639/pipes-end-of-life-announcement

Looks like this plugin might break as a result, given that YQL is used.

Responsive resize/specific resize bug

Console reports a Uncaught TypeError: Object # has no method 'getContentElement' when I try to embed a video with responsive resize or specific resize.

CKEditor 4.3
oEmbed Plugin 1.12

Responsive resize not filling parent div

Perhaps I'm misunderstanding how the responsive resize is supposed to work - but as far as I can see responsive resize does not resize to the parent frames size, no matter what size is set as max width/height.

A nice feature would be to able to just use a "fill parent"/width=100% without a need to enter width/height at all. Not all of our users are comfortable or competent enough to edit video size by hand using the specific size option, and as such the proportional option is very sought after.

Steps to reproduce issue:

• Link a youtube video using a custom responsive resize width
  
• The embedded video seems to ignore the width/height settings and does not fill the parent frame.
  

Opens iframe dialog on double click after embeding

After embeding a video, when i double clicked the video, it opens an iframe dialog which instead should have opened oembed dialog to let me edit video url.
If you enter video url in the iframe in

Possible to playback video in editor itself?

Hi, it seems it is not possible to playback a video in the editor. Is this correct?

ACF support

See http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter.

As it is now:

1. ACF removes all iframes if Iframe button is disabled.
2. ACF removes div class attributes if CreateDiv button is disabled.
3. ACF removes all properties that are not whitelisted. This includes the allowfullscreen property for YouTube embed iframes.

All the possible allowed tags and properties should be whitelisted.

https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/iframe/plugin.js and https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/div/plugin.js could be used as a reference.

wistia.com not properly parsed

Please have a look at the bug I reported at nfl/jquery-oembed-all#23

oEmbed Plugin not working in safari mac machine

oEmbed videos are not getting displayed in Safari mac machine in CKEditor.
Please find the screenshot attached in the issue

Size parameters are not restored when re-editing video

When editing a previously saved embed video, the resize setting and parameters are not stored/propagated back to the editor window.

Steps to reproduce issue:

• Link a youtube video using a custom responsive or specific size
  
• Save and then re-open the video for editing - the previous size settings are now missing
  

Problem with config.oembed_

Hello,
It seems that the following line prevents the display of the box.

config.oembed_maxWidth = '560';
config.oembed_maxHeight = '315';

In addition, the text height and width overlaps textarera.

thank you

Renders abnormal preview with some Vimeo videos

Steps to reproduce:
Go to demo page http://w8tcha.github.io/CKEditor-oEmbed-Plugin/ (or any instance of CKEditor with this plugin).
Try to paste the following video https://vimeo.com/122969101

Expected: Regular small preview window is shown
Actual: Giant preview window is shown

Add ACF settings to avoid allowedContent:true flag

We're having issues keeping allowedContent:true set blocking some other functionality. Sounds like there are some simple tweaks to the plugin that could avoid having to add that flag?

​http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf

Here's the issue we're having and the suggestion others have put forward. http://dev.ckeditor.com/ticket/10496

Not sure if it's trickier in deed than thought with the variety of tags being dropped in though.

Twitt embed re-edit problem

Hello,

Twitter embed works well first time I embed it and save my content but it does not work anymore when I re-edit my content. I have to delete my tweet and re-embed it... it's a bit annoying.

Maybe i'm doing something wrong but i don't think so.

Thx for your help.

Plugin conflicts with Mootools

When using the plugin in CKEditor on a page which uses the Mootools library, the $ function is overridden causing Mootools code to no longer function.

To reproduce, create a new HTML page containing the latest CKEditor and oEmbed plugin on a page which brings in the Mootools library.

In the Chrome dev console enter: $

function (e,t){return new b.fn.init(e,t,r)} jquery.js

Here we can see the $ function has been overridden by jQuery.

hidpi icon (for CKEditor 4.2).

CKEditor 4.2 is out, and it supports (and includes) hidpi icons (32x32px), for devices with window.devicePixelRatio >= 2.

Probably, you want to add one.

Example code: ChALkeR@ae2757d

I'm using a different iconset, so no pull request.

Demo page doesn't work

http://w8tcha.github.io/CKEditor-oEmbed-Plugin/
No Media embed button

Impossible change source URL after switching to source view and back

Steps to reproduce on oEmbed plugin demo page:

a) Click oembed, and paste YouTube video URL
b) Click ok in dialog
c) Click source button on toolbar - URL is processed and wrapped to div.
d) Click source button again to go back to WYSIWYG editing
e) Click on eombedded video - URL is gone, it is impossible to change size of video.

Module unreachable.

Hello,
I have to update your module without problem.
However, putting as current "ckeditor.js" with the latest version, the button pluging oEmbed is no longer visible in the toolbar and I can not activate it.
How?

For your information, I I download the new version of ckeditor customizing plugins I are needed.

I also noticed that the customized version does not contain the file "plugin.js."

Thank you for your help

Problems with lang and pyrocms

Hi,

I'm trying to implement the plugin into pyrocms, I pasted oembed in plugins folder, but for some reasons I think that language file doesn't get pulled into, because I get this js error

TypeError: editor.lang.oembed is undefined
label: editor.lang.oembed.button,

If I disable that label, I can load editor and see the button, but when button is pressed I get another lang error from oembed, I guess lang files doesn't get into oembed plugin. do you have some tips where I can look to debug this?

thank you

Won't embed SlideShare with 'secret' link

The case is:

A slideshow at SlideShare;
private;
Who can view: People with the secret link;
Allow embeds: Only on domains I choose [domain].

The plugin throws alert saying it cannot get the media.

Embedding the slideshow into the HTML source works.

Changing the privacy to Public makes it work in the plugin as well.

My guess is that /secret/ part of URL confuses the plugin. The fix should be easy.

Hide the resize type and the alignement

Hi, can you add options to hide the "resize type" and the "alignement" options in the dialog, please ?

Thanks a lot

Impossible to align embedded content from configuration dialog

It is impossible to align content from UI (left/right/middle/no alignment). Popup dialog just allows to change size, but alignment options (similar to image widget) would be really useful.

It would be great to have identical functionality to new image widget dialog.

New mixcloud embeds doesn´t work

The reason is, that od "new" mixcloud.com the generated embed codes are followed by div with the link to the dj mix. Is there any simple solution? I think that I can´t help myself with simple removal of the div part of the code before inserting in the database, because it doesn´t even save it there, it fails somewhere in the plugin..

Dialog doesn't close in IE 8

After entering a url and clicking OK, the dialog remains open (though in the background the video does appear).

After Post no Video

First great Plugin, but i have a Problem.

I have insert the Plugin in a Boardsoftware named "Burning Board" they use CKEditor 4.1. The Oembed Button works fine and i can post some pictures from flickr... , but when i will post a youtube or vimeo video it dosn´t works. I see a blank post. The preview works.

here my config:

var __CKEDITOR_TOOLBAR = [
    ['Source', '-', 'Undo', 'Redo'],
    ['Bold', 'Italic', 'Underline', '-', 'Strike', 'Subscript','Superscript'],
    ['NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    '/',
    ['Font', 'FontSize', 'TextColor'],
    ['Link', 'Unlink', 'Image', 'Table', 'Smiley'],
    ['Maximize'],
            ['oembed']
];
if (__CKEDITOR_BUTTONS.length) {
    var $buttons = [ ];

    for (var $i = 0, $length = __CKEDITOR_BUTTONS.length; $i < $length; $i++) {
        $buttons.push('__wcf_' + __CKEDITOR_BUTTONS[$i].name);
    }

    __CKEDITOR_TOOLBAR.push($buttons);
}

var $config = {
    smiley_path: '{@$__wcf->getPath()|encodeJS}',
    extraPlugins: 'wbbcode,wbutton,oembed,autosave',
    removePlugins: 'contextmenu,tabletools,liststyle,elementspath,menubutton,forms,scayt',
            oembed_ShowIframePreview: true,
            allowedContent: true,
    language: '{@$__wcf->language->getFixedLanguageCode()}',
    fontSize_sizes: '8/8pt;10/10pt;12/12pt;14/14pt;18/18pt;24/24pt;36/36pt;',
    disableObjectResizing: true,
    disableNativeSpellChecker: false,
    toolbarCanCollapse: false,
    enterMode: CKEDITOR.ENTER_BR,
    minHeight: 200,
    toolbar: __CKEDITOR_TOOLBAR,
    smiley_images: [
        {implode from=$defaultSmilies item=smiley}'{@$smiley->smileyPath|encodeJS}'{/implode}
    ],
    smiley_descriptions: [
        {implode from=$defaultSmilies item=smiley}'{@$smiley->smileyCode|encodeJS}'{/implode}
    ]
};

Embedding a video and switching to Source view kills IE 8

After embedding a video in IE 8, when I switch to source view, the browser goes all black