Using embed plugin on ckeditor

[apeisa]

CKeditor has nice "embed" plugin, which allows copypasting different kind of embeds (like youtube video or tweet) and it shows it nicely on editor as single widget. You can test it here: http://sdk.ckeditor.com/samples/mediaembed.html

I tried to add it into PW ckeditor and got it half working. This is what I have done so far:

Downloaded and moved http://ckeditor.com/addon/embed plugin and all the other plugins it requires (embedbase, lineutils, notification, notificationaggregator, widget) into /site/modules/InputfieldCKEditor/plugins folder and then activated those plugins through field config.

The demo page says: "When either Media Embed or Semantic Media Embed plugin is enabled, the [embed] button is automatically added to the toolbar". This is not happening. But I can edit toolbar config and add "Embed" there. This then shows the embed button and embedding works nicely. But after saving the page, ACF is cleaning divs and their params and embed is not widget anymore, just regular markup. Embed plugin should edit the ACF allowed content automatically, but for me it shows that embed plugin is not correctly loaded, only added into toolbar.

I tried to "autoload" it by adding /site/modules/InputfieldCKEditor/config.js this:

CKEDITOR.editorConfig = function( config ) {
  config.uiColor = '#AADC6E';
  config.extraPlugins = 'embed';
};

Color changes, but embed doesn't show up. Neither it work correctly, if I manually add it to toolbar.

 

Has anyone tried to add embed or any other more complex plugin? Embed (and all the other plugins it requires) are all official and made by CKSource.
 

[Robin S]

I managed to get the Embed plugin working by following the steps you outlined (adding all dependency plugins, manually adding toolbar button), and then also:

• Uncheck "Convert div tags to paragraph tags"
• Set "Use ACF?" to "No".

I suppose you could keep ACF active but then you would have to add all the elements/attributes/classes that could potentially be inserted by the plugin into the "Extra Allowed Content" field.

On 19/08/2016 at 5:51 PM, apeisa said:

Embed plugin should edit the ACF allowed content automatically

Looking at the Embed plugin source it only adds div[!data-oembed-url] as allowed content, but when you check the markup that is added for a YouTube embed (for example) you see a lot of other markup besides the div. There also something going on regarding allowed content in the Widget plugin but I found it difficult to decipher.

[OLSA]

On 8/19/2016 at 7:51 AM, apeisa said:

The demo page says: "When either Media Embed or Semantic Media Embed plugin is enabled, the [embed] button is automatically added to the toolbar". This is not happening. But I can edit toolbar config and add "Embed" there. This then shows the embed button and embedding works nicely.

Hello, yes that needs to be done to get visible plugin button inside CKEditor toolbar (sometimes it's problem to find right "call"/"trigger", eg. plugin name "btgrid", but to get toolbar button need to insert/write "Btgrid").

To solve problem with cleaning divs write this below inside Extra Allowed Content:

div(*)[*]{*}

Or next example will allow to use <p class="...">, <a class="...">, <div class="...">.

p(*)[*]{*}
a(*)[*]{*}
div(*)[*]{*}

All this examples also works if ACF or Purifer switched on.

Regards.

[apeisa]

Thanks @Robin S & @OLSA

Unfortunately with your tips I don't get any further than it works before. I do get initial embeds working (copy pasting twitter URL => nice looking embed => double click the embed, you can edit the twitter url => no possibility to edit the actual tweet text for example). But after page save the widget is gone, and only the tweet content is there. I cannot double click and edit the tweet anymore. Do you get the actual widget working? Meaning you can double click the tweet (or any other embed) and you can edit the embed source (instead of the content) - just like here:  http://sdk.ckeditor.com/samples/mediaembed.html

[apeisa]

Fighting with this got me thinking, that maybe this kind of feature could be shipped with ProcessWire's CKEditor? How do others feel, should nice media embedding be default?

[Robin S]

1 hour ago, apeisa said:

Thanks @Robin S & @OLSA

Unfortunately with your tips I don't get any further than it works before. I do get initial embeds working (copy pasting twitter URL => nice looking embed => double click the embed, you can edit the twitter url => no possibility to edit the actual tweet text for example). But after page save the widget is gone, and only the tweet content is there. I cannot double click and edit the tweet anymore. Do you get the actual widget working? Meaning you can double click the tweet (or any other embed) and you can edit the embed source (instead of the content) - just like here:  http://sdk.ckeditor.com/samples/mediaembed.html

Try turning off HTML Purifier for the field also. With ACF and HTML Purifier off everything works for me the same as in the demo.

59 minutes ago, apeisa said:

How do others feel, should nice media embedding be default?

I would say no if it requires having ACF and HTML Purifier off. These are pretty important or else careless editors can paste in all kinds of rubbish. And "Extra Allowed Content" should be kept to an absolute minimum - the allowances @OLSA suggested are so broad (plus you actually need other elements like iframe) that it's tantamount to turning ACF off altogether.

But if there's a way to get it working with a reasonably strict ACF and HTML Purifier then it would be cool.

Another thought: you could set up Hanna Codes for the different embeds, or even a single clever Hanna Code for all embeds that parses the URL and determines the markup needed for the embed. That would be cleaner and easier to lock down.

And there is the Textformatter OEmbed module too.

[apeisa]

Using embed (or autoembed or semanticembed) shouldn't require disabling ACF (those are official modules by cksource and they do handle acf correctly). The problems here are most probably because those modules aren't loaded correctly now with PW InputfieldCKEditor module config. I will look more into this when my time allows.

I believe disabling ACF (and purifier) are very bad practice and I don't allow that for sites that will be used by non-techies.

[OLSA]

I have working solution on PW 3.09 with this inside Extra Allowed Content:

div(*)[*]{*}
iframe(*)[*]{*}

But my opinion is that HTML Purifier strip some tags (like "data-oembed-url" and others) and to get working solution HTML Purifer need to be off.
Also edit works (2 clicks, open popup with url input).

[apeisa]

Thanks OLSA, that was it, I had left html purifier enabled. 

I still think that done this way is not how it should be. It shouldn't require any tweaks to extra allowed content. But I will continue playing with this and see if I can make it work without extra allowed content. 

Also maybe using the Semantic version of embed plugin would work better and be more markup agnostic. I will test that also. 

[renobird]

*ahem* 

@apeisa, you get this working without changes to Extra Allowed Content?

I just discovered the embed plugin, and it would be much nicer than what we do now.

 

[apeisa]

Unfortunately no. It only works with this on extra allowed content:

p(*)[*]{*}
a(*)[*]{*}
div(*)[*]{*}

Which is no go for me. I am switching to this one probably: http://modules.processwire.com/modules/textformatter-oembed/