Making oEmbed module work with WYSIWYG and CKeditor [#2108973]

My goal is writing a bit of documentation for oEmbed module, because oEmbed is a sweet system that can potentially make life easier for every Drupal site content manager out there.
I decided oEmbed + WYSIWYG + CKeditor is a nice usecase to document: the goal is to have someone be able to paste a youtube url into the page content and have the embedded video show after node save. (using the text format filter from oEmbed module)
So I'm trying to get it to work on my test server so I can create screenshots and a step-by-step instruction, but so far I have failed spectacularly.

What I tried so far:

enabled the oEmbed text format filter

oEmbed filter
and placed it as the first filter.

Tried several versions of oEmbed module

including latest 1.x dev (2013-Oct-01)

Tried several versions of WYSIWYG module

including latest 2.x dev (2013-Oct-01)

Tried several versions of CKeditor library

including 3.6.6.1 (2013-02-20) and the latest Version 4.2.1 (2013-09-10)

Tested using oEmbed modules' test page

at admin/config/media/oembed/test
result: video shows up perfectly

Tested using plain text / without CKeditor

results:
P and embed: converts to embed code
[embed]http://www.youtube.com/watch?v=SO6RNO8t06c[/embed]

P: doesn't convert
http://www.youtube.com/watch?v=SO6RNO8t06c

Url only: converts to embed code
http://www.youtube.com/watch?v=SO6RNO8t06c

Tested using Full HTML / with CKeditor

Pasting the url (clean link): doesn't convert
http://www.youtube.com/watch?v=SO6RNO8t06c

What piece am I missing?

Is this a WYSIWYG issue or should I look for solutions in oEmbed module (or CKeditor library)?

Comment	File	Size	Author
#3	WYSIWYG_with_oEmbed___Propellernet__LOCAL_-_Mac_Pro_.png	20.59 KB	dddbbb
	Schermafbeelding 2013-10-10 om 13.14.18.png	10.44 KB	silkogelman

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

funana CreditAttribution: funana commented 11 October 2013 at 19:15

Hi Sil,

I will have to get our developer here into the thread to give you better informations than I can give you.
Saying that, I doubt that we have it running flawless already. Never the less I will happily share our experience here.

Comment #2

silkogelman CreditAttribution: silkogelman commented 11 October 2013 at 20:46

Thanks Fu Nana, any help is appreciated!
Even the smallest clue can possibly lead to a solution.

Comment #3

dddbbb CreditAttribution: dddbbb commented 21 October 2013 at 15:40

File	Size
WYSIWYG_with_oEmbed___Propellernet__LOCAL_-_Mac_Pro_.png	20.59 KB

@S1l

I have this working (as you noticed). I created a new Text Format and have organised the filters as per the attached screen grab. You can probably ignore the "Media tags" & "CKEditor link" filters if you're not using those modules. In short, make sure that the oEmbed filter is at/near the top.

Comment #4

silkogelman CreditAttribution: silkogelman commented 21 October 2013 at 17:39

@danbodea Thank you for your input.
I always had oEmbed filter as the first filter, adding a new text formatter unfortunately didn't help.

What versions of the modules / library are you using?

Comment #5

dddbbb CreditAttribution: dddbbb commented 22 October 2013 at 10:50

wysiwyg dev version: ee64524b3edb2aa21098a2309b0736e292010247 (specific Git commit)
oembed: 7.x-1.0-rc2+6-dev
CKEditor 4.2.2.f98db6d8

The wysiwyg version was auto-downloaded via a drush make file. The 3 lines required in the make file to do this are:

projects[wysiwyg][download][type] = "git"
projects[wysiwyg][download][revision] = "ee64524b3edb2aa21098a2309b0736e292010247"
projects[wysiwyg][type] = "module"

Comment #6

silkogelman CreditAttribution: silkogelman commented 23 October 2013 at 14:17

I tried the #5 config on a clean Drupal installation, but had no luck.

Are there specific settings I need to be aware of?

Comment #6.0

silkogelman CreditAttribution: silkogelman commented 23 October 2013 at 14:17

Issue summary:

View changes

added the information about placing oEmbed as first text format filter

Comment #7

Reinmar CreditAttribution: Reinmar commented 8 November 2013 at 11:34

Just to let you know - during the sprints on DrupalCon in Prague we created a prototype of CKEditor's oEmbed plugin. It uses CKE's widgets system, so it can load any kind of complex HTML markup into the editable area (and it keeps it safe) and it outputs structured data (as you can see here: https://github.com/cksource/ckeditor-dev/blob/t/10925/plugins/oembed/dev...)

Ticket on CKEditor's issue tracker: http://dev.ckeditor.com/ticket/10925
Code: https://github.com/cksource/ckeditor-dev/tree/t/10925

This is a prototype, but it worked very well and it's very likely that we'll work on this plugin to make it to official plugins.

Comment #8

dddbbb CreditAttribution: dddbbb commented 15 November 2013 at 15:24

@Reinmar That sounds very cool. Is there a particular D.O issue where I can follow progress on this?

Comment #9

Reinmar CreditAttribution: Reinmar commented 15 November 2013 at 15:33

@danbohea It is a generic CKE's PoC so it hasn't got an issue on D.O yet.

Comment #10

Anonymous (not verified) CreditAttribution: Anonymous commented 19 November 2013 at 22:43

Running into the same issue today. Trying to get oembed working with CKEditor 4.3 and CKEditor module. No luck.

Oddly, I can get an oembed link to work only on a node that has an unrelated error that crashes js and disables ckeditor in the associated content type!

Comment #11

Anonymous (not verified) CreditAttribution: Anonymous commented 19 November 2013 at 22:47

Just to follow up. I am been through every user permission, text format, and CKEditor module setting with a fine toothed comb. No joy. Filters laid out as above, tried different layouts etc.

Not sure if this is an option? Tried downloading, installing in plugins, and editing config.js as per instructions but again, no luck.

http://ckeditor.com/addon/oembed

Comment #12

Anonymous (not verified) CreditAttribution: Anonymous commented 20 November 2013 at 04:11

Has anyone tried this module?

https://drupal.org/project/video_filter

Comment #13

Reinmar CreditAttribution: Reinmar commented 20 November 2013 at 13:30

@trainingcity: Just to avoid confusion - http://ckeditor.com/addon/oembed is not the plugin I mentioned in #7. It is a 3rd party plugin, not maintained by CKEditor core developers.

Comment #14

Anonymous (not verified) CreditAttribution: Anonymous commented 20 November 2013 at 14:44

@Reinmar Yes, I know, the namespace for this is very confusing. I have tried to get that ckeditor oembed addon working as well as the oembed module (Media 7.x-2).

I have exactly the same problem as @s1l getting the Drupal oembed module working with CKEditor enabled fields. Just doesn't seem to work no matter what filter layout. Does work fine on "plain" text fields that do not have CKEditor.

As for the CKEditor supporting Drupal modules, I have tried running CKEditor with both the Drupal WYSIWYG Module and the Drupal CKEditor module. I definitely prefer the design of the Drupal CKEditor module for running CKEditor. It has more features and makes the button layout a breeze.

I tried the addon you mention as well. I initially installed it as per the CKEditor website instructions, then realized that the config needs to be done within the Drupal CKEditor module, so I reinstalled the addon there. The addon uses a subdirectory called "images" instead of the more (apparently) common "icons". In any case, unlike other addons such as mediaembed, the button does not show up in the Drupal CKEditor module configuration, despite what appears to be an install in the correct (Drupal CKEditor Module) install location.

This addon is associated with the CKEditor 4.3 release, which I suppose could be causing problems with the way the Drupal CKeditor module reads the plugin.js file?

Comment #15

Anonymous (not verified) CreditAttribution: Anonymous commented 20 November 2013 at 14:46

@Reinmar would you mind providing some install instructions for your project with Drupal using the CKEditor Module to run CKEditor 4.3?

Comment #16

Anonymous (not verified) CreditAttribution: Anonymous commented 20 November 2013 at 15:03

Just for reference, anyone planning to install CKEditor 4.3 with the Drupal WYSIWYG module, you may need to make the following code changes:

http://www.webopius.com/content/717/how-to-get-ckeditor-4-x-working-with...

I prefer running CKEditor with the Drupal CKEditor Module as it has a much, much better way to control the layout of the menu buttons. These days I try to enable just the absolute minimum buttons for my social site http://www.RealLifeEnglish.com users. They don't need to be making text bold, changing fonts, etc, but the do need automatic spell check (easy with Drupal CKEditor Module), language detection, and they need the text entry field to be able to easily add a link to YouTube, etc; which of course, is the reason we need oembed to work with CKEditor!

Comment #17

Anonymous (not verified) CreditAttribution: Anonymous commented 4 December 2013 at 02:35

Install and configure either: Simple Editor or Simple oembed module:

Simple Editor Module - https://drupal.org/project/seditor

Simple oembed Module - https://drupal.org/project/soembed

Simple editor works with Tinymce only, but Simple oembed seems to work with CKEditor as well. Enable the module, then move the Simple oembed filter to the top of your filter list. Seems to work. To test I disabled all other filters at admin/config/content/formats/full_html

Comment #18

Anonymous (not verified) CreditAttribution: Anonymous commented 4 December 2013 at 13:23

Note that #17 only works with the WYSIWYG Module, not the CKEditor Module.

Also, after testing with any one of the content formats such as "full html" it is critical that you re-enable your other filters. You can also build a new content type and test the Simple oembed filter with that specific content type.

Comment #19

gmclelland CreditAttribution: gmclelland commented 16 January 2015 at 21:25

If you want to be able to paste the url on a separate line and have that converted to the ombed object, you will need #2269433: Support URLs on a line by themselves in ckeditor/WYSIWYG

Comment #20

suffering drupal CreditAttribution: suffering drupal commented 15 October 2015 at 14:49

I don't really understand this thread. I thought Oembed was a module to include ANY other page into your page in the same way you can do that on Facebook. But here it seems you are talking about including youtube and vimeo, while those are already splendidly covered by both the Media module as the Googtube module.
Anyhow, I installed Oembed, but I do not even see how I can have "it" (something - a form field?) appear on my website to then include external stuff in that Facebook way... In other words, offering visitors and myself the possibility to add links on the page itself through some form-field plus button, without the need to go to "EDIT" and then save. Is this actually even possible with oEmbed or at all in Drupal?

Comment #21

TwoD

Swedish

Sweden

CreditAttribution: TwoD as a volunteer commented 17 October 2015 at 15:27

Hmm, how did I miss this issue? I'm sorry, I don't have time to read through the details now, will have to get back to reading it later. Just going to answer the last question here:

As far as I understand it, oEmbed is about embedding content while editing a field, currently only supported on the "Edit node/entity" pages in Drupal 7.x. Basically, it just displays the embedded content as a block inside the embedding content.

Some modules have tried to implement "inline/quick editing" by loading just a minimal form for editing say the body field while viewing the node, but I can't say how mature any of those projects are right now. They have slightly different purposes so I can't tell exactly which one you need, and the ones I know about off the top of my head are Quick Edit and Editor.

If you can get those working with Wysiwyg (I have not tried it myself), you can edit some content pieces/fields while viewing a node, but it's not really directly comparable to the Facebook-like "add a link" or "add an image" buttons. Maybe you could get it to work similar to that by having additional link/image fields and allowing "inline" editing of those fields. I don't think you need to use oEmbed for that, but may be tedious to make it look as integrated as it does on Facebook.

Comment #22

Anonymous (not verified) CreditAttribution: Anonymous commented 9 November 2015 at 17:18

It has been a while since I looked at this issue. I just gave up and opted to have separate oembed link fields. The issue is that users would prefer to simply be able to include an inline link in their posts, as they can with facebook, rather than have to add links in a separate field.

As I recall (and it has been two years) I think the primary outstanding issue with wysiwyg at this point is the lack of responsiveness with oembed links. Hence a user can add a link "in line" but the added video will not be responsive, and hence makes a mess when displayed on a mobile device. I was able to make oembed link field responsive with a bit of CSS, but it never seemed to work with a wysiwyg text field. If anyone has solved this problem, please share.