Customize WYSIWYG editor for URL override to embed object

[MrFisc]

I'm looking for a way to add custom embedded content when you paste a link matching specific criteria into the WYSIWYG editor. 

Similar to how when you paste a YouTube URL it turns it into an embedded video, or how when you paste a forum thread's URL, it converts it into the embedded version thereof. But I want to make a plugin that does it with a custom URL / embed code.

[Nathan Explosion]

You need to override oembedServices() in \IPS\Parser\Text to add your domain/endpoint to the existing list of domains/endpoints (which I do in https://invisioncommunity.com/contributors/files/8963-ne-oembedservices-management/)

....and then your endpoint needs to output the code, which is then returned to the editor for display.

[MrFisc]

24 minutes ago, Nathan Explosion said:

You need to override oembedServices() in \IPS\Parser\Text to add your domain/endpoint to the existing list of domains/endpoints (which I do in https://invisioncommunity.com/contributors/files/8963-ne-oembedservices-management/)

....and then your endpoint needs to output the code, which is then returned to the editor for display.

Unfortunately, I'm unable to see that page (not sure why).

To do this, would I need to make a Hook for `\IPS\Parsers\Text`? Or do I create a subclass of it and register it somewhere? Where do I place my "endpoint"?

[Daniel F]

He postet the wrong link:)

 

[Nathan Explosion]

6 minutes ago, MrFisc said:

Unfortunately, I'm unable to see that page (not sure why).

https://invisioncommunity.com/files/file/8963-ne-oembedservices-management/

Not sure if 'Visitors' will be able to view that though.

6 minutes ago, MrFisc said:

To do this, would I need to make a Hook for `\IPS\Parsers\Text`

Yes - look at oembedservice() as mentioned.

6 minutes ago, MrFisc said:

Where do I place my "endpoint"?

On a web server.....again, look at oembedservice() for what it does. It provides a url endpoint if a link contains the domain listed...

That endpoint needs to generate response code which is then parsed by the editor to produce the embedded content.

[Daniel F]

HEre's another example with some proper code:)

 

 

 

 

3 minutes ago, Nathan Explosion said:

Not sure if 'Visitors' will be able to view that though.

No, the contributor center link works only for you.

[Nathan Explosion]

1 minute ago, Daniel F said:

No, the contributor center link works only for you.

I'm referring to my corrected link.....

[MrFisc]

What is the 

static::EMBED_VIDEO

part referring to? It looks like it's a constant that tells the system that this content is to be embedded using a specific template for the type of content that it is. Understand, that there doesn't exist any true embed code for what I'm trying to embed. Instead I'm trying to generate a custom HTML template that can be "embedded" so to speak (really it would just be HTML that would replace the URL in the Source portion of the WYSIWYG editor). 

My original thought before all of this was to have JavaScript that would listen for URL pastes into the WYSIWYG editor, and replace them in the source portion with the desired template. But this doesn't seem like it's the official way to go about doing this.

 

9 minutes ago, Nathan Explosion said:

I'm referring to my corrected link.....

I was able to find the proper link 🙂 

[Nathan Explosion]

Let's change your thinking.....what is the link you are pasting in? What is the HTML you want to have returned?

[MrFisc]

1 minute ago, Nathan Explosion said:

Let's change your thinking.....what is the link you are pasting in? What is the HTML you want to have returned?

I haven't entirely decided on an HTML format, but I'm trying to embed https://medal.tv/ clips. AFAIK they don't currently offer an oEmbed service.

[Nathan Explosion]

1 minute ago, MrFisc said:

AFAIK they don't currently offer an oEmbed service

OK.

Let's take Youtube as an example.....

This link https://www.youtube.com/watch?v=Z1BCujX3pw8 is sent to the youtube endpoint https://www.youtube.com/oembed with a query string: https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=Z1BCujX3pw8 (click that link to see what Youtube outputs)

That type of response is what you need to generate somehow....I'd suggest a PHP file on your own server which will take a URL query string, process it and return the JSON format that is needed to provide the 'html' information that IPS code will then process to return the embed HTML.

 

[MrFisc]

23 minutes ago, Nathan Explosion said:

OK.

Let's take Youtube as an example.....

This link https://www.youtube.com/watch?v=Z1BCujX3pw8 is sent to the youtube endpoint https://www.youtube.com/oembed with a query string: https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=Z1BCujX3pw8 (click that link to see what Youtube outputs)

That type of response is what you need to generate somehow....I'd suggest a PHP file on your own server which will take a URL query string, process it and return the JSON format that is needed to provide the 'html' information that IPS code will then process to return the embed HTML.

 

It turns out that Medal does have an oEmbed API, I contacted a staff member there that I know and he supplied me with the information that I needed. So I believe I can get this working now. Thanks so much for the help!