Added Plugin: Paste link into editor and it'll be replaced by iframe, using noembed API. #711

m-a-x-s-e-e-l-i-g · 2018-02-13T15:08:09Z

Users don't know noembed, embedding should happen automatically. That's what this plugin is for. It looks for paste event, checks if it's a url and uses noembed API to retrieve an iframe from that url. If it can't retrieve an iframe, it will put an anchor tag around the url.

…mbed.com API.

Alex-D · 2018-02-13T15:31:10Z

Seems really cool! :)

Remove the min file, it is generated in master branch only.

Alex-D

I did not use anything like babel, so we cannot use let

And you can factor two lines into one.

Alex-D · 2018-02-13T15:34:25Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ trumbowyg.execCmd('insertHTML', content);
+ }
+ else {
+ let content = "<a href='"+pastedData+"'>"+pastedData+"</a>";


content = $('<a>', { href: pastedData, text: pastedData })

Isn't let standard ES6?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Yep but Trumbowyg is ES5 for now.

I don't understand this:

content = $('<a>', { href: pastedData, text: pastedData })

How do I get a string out of it like content = "<a href='"+pastedData+"'>"+pastedData+"</a>";?

You right.

content = $('<a>', { href: pastedData, text: pastedData }).prop('outerHTML')

Alex-D · 2018-02-13T15:35:18Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ data: query,
+ cache: false,
+ dataType: "json",
+ success: function(res) {


Init content here:

content = '';

Alex-D · 2018-02-13T15:35:52Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ dataType: "json",
+ success: function(res) {
+ if (res.html) {
+ let content = res.html;


Remove let:

content = res.html;

Alex-D

I did not use anything like babel, so we cannot use let

And you can factor two lines into one.

Alex-D · 2018-02-13T15:38:02Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ success: function(res) {
+ if (res.html) {
+ let content = res.html;
+ trumbowyg.execCmd('insertHTML', content);


Put this line only one time after the if/else blocks

How?
trumbowyg.execCmd('insertHTML', content); works if content = res.html
trumbowyg.execCmd('insertHTML', content); returns object when content = $('<a>', {href: pastedData, text: pastedData});
trumbowyg.execCmd('insertHTML', content); is also needed in the second error. Can't put it outside of the request because that'll make it lose scope.

Alex-D · 2018-02-13T15:38:54Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ }
+ },
+ error: function() {
+ console.log('Error connecting to noembed');


This should do the same as the else above instead of nothing.

Alex-D · 2018-02-14T01:56:28Z

Looks good to me! :)

Can you also add some docs and demo?

https://github.com/Alex-D/Trumbowyg/blob/develop/docs/documentation/plugins/index.html
https://github.com/Alex-D/Trumbowyg/tree/develop/docs/demos/plugins

Thanks :)

… the future. Spotify is now embeddable ;-)

Alex-D · 2018-02-16T11:38:57Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ fails++;
+ },
+ complete: function() {
+ console.log(this.url);


remove console log please :)

Alex-D · 2018-02-16T11:39:09Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ complete: function() {
+ console.log(this.url);
+ if (fails === 1) {
+ console.log(fails);


Alex-D · 2018-02-16T11:39:13Z

plugins/pasteurl/trumbowyg.pasteurl.js

+ $.ajax(this);
+ }
+ if (fails === 2) {
+ console.log(fails);


…represents more what it does. Removed log outputs;

forelabs · 2018-02-23T13:17:14Z

plugins/pasteembed/trumbowyg.pasteembed.js

+
+ request = $.ajax({
+ crossOrigin: true,
+ url: "https://noembed.com/embed?nowrap=on",


How about having those urls configurable?
Would be great, so someone can use his own service to handle pasted urls.

Let's do it :)

Alex-D

Can you add some options like noembed plugin do?

forelabs · 2018-02-26T11:02:33Z

plugins/pasteembed/trumbowyg.pasteembed.js

+
+ $.extend(true, $.trumbowyg, {
+ plugins: {
+ pasteImage: {


oups. I think this should be "pasteEmbed"

forelabs · 2018-02-27T06:45:36Z

Maybe @Alex-D you can merge and make the requested changes?
I have implemented them because I am already trying out this plugin:

/* ===========================================================
 * trumbowyg.pasteembed.js v1.0
 * Url paste to iframe with noembed. Plugin for Trumbowyg
 * http://alex-d.github.com/Trumbowyg
 * ===========================================================
 * Author : Max Seelig
 *          Facebook : https://facebook.com/maxse
 *          Website : https://www.maxmade.nl/
 */

(function($) {
    "use strict";

    var defaultOptions = {
        enabled: true,
        endpoints: [
          "https://noembed.com/embed?nowrap=on",
          "https://api.maxmade.nl/url2iframe/embed"
        ]
    };

    $.extend(true, $.trumbowyg, {
        plugins: {
            pasteEmbed: {
                init: function(trumbowyg) {
                    trumbowyg.o.plugins.pasteEmbed = $.extend(true, {}, defaultOptions, trumbowyg.o.plugins.pasteEmbed || {});

                    if (!trumbowyg.o.plugins.pasteEmbed.enabled) {
                      return;
                    }

                    trumbowyg.pasteHandlers.push(function(pasteEvent) {
                        try {
                            var clipboardData = (pasteEvent.originalEvent || pasteEvent).clipboardData,
                                pastedData = clipboardData.getData("Text"),
                                endpoints = trumbowyg.o.plugins.pasteEmbed.endpoints,
                                request = null;

                            if (pastedData.startsWith("http")) {

                                pasteEvent.stopPropagation();
                                pasteEvent.preventDefault();

                                var query = {
                                    url: pastedData.trim()
                                };
                                var content = "";
                                var index = 0;

                                if (request && request.transport) request.transport.abort();

                                request = $.ajax({
                                    crossOrigin: true,
                                    url: endpoints[index],
                                    type: "GET",
                                    data: query,
                                    cache: false,
                                    dataType: "jsonp",
                                    success: function(res) {
                                        if (res.html) {
                                            index = 0;
                                            content = res.html;
                                        } else {
                                            index++;
                                        }
                                    },
                                    error: function(res) {
                                        index++;
                                    },
                                    complete: function() {
                                        if (content.length == 0 && index < endpoints.length - 1) {
                                            this.url = endpoints[index];
                                            this.data = query;
                                            $.ajax(this);
                                        }
                                        if (index == endpoints.length - 1) {
                                            content = $("<a>", {
                                                href: pastedData,
                                                text: pastedData
                                            }).prop('outerHTML');
                                        }
                                        if (content.length > 0) {
                                            index = 0;
                                            trumbowyg.execCmd("insertHTML", content);
                                        }
                                    }
                                });
                            }
                        } catch (c) {}
                    });
                }
            }
        }
    });
})(jQuery);

Alex-D · 2018-04-09T02:06:55Z

Thanks! :)

Paste link into the editor and it'll be replaced by iframe, using noe…

fe047e5

…mbed.com API.

Alex-D reviewed Feb 13, 2018

View reviewed changes

Alex-D requested changes Feb 13, 2018

View reviewed changes

Removed minified file; Cleaned up code; Applied all requested changes

d48b956

Added my url2iframe api so that I can add support for more iframes in…

90d10c3

… the future. Spotify is now embeddable ;-)

Alex-D requested changes Feb 16, 2018

View reviewed changes

Added demo; Added docs; Renamed from pasteurl to pasteembed since it …

1e32974

…represents more what it does. Removed log outputs;

Alex-D approved these changes Feb 17, 2018

View reviewed changes

forelabs reviewed Feb 23, 2018

View reviewed changes

Alex-D requested changes Feb 25, 2018

View reviewed changes

forelabs suggested changes Feb 26, 2018

View reviewed changes

Alex-D merged commit e4cd992 into Alex-D:develop Apr 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Plugin: Paste link into editor and it'll be replaced by iframe, using noembed API. #711

Added Plugin: Paste link into editor and it'll be replaced by iframe, using noembed API. #711

m-a-x-s-e-e-l-i-g commented Feb 13, 2018

Alex-D commented Feb 13, 2018

Alex-D left a comment

Alex-D Feb 13, 2018

m-a-x-s-e-e-l-i-g Feb 13, 2018

Alex-D Feb 13, 2018 •

edited

Loading

m-a-x-s-e-e-l-i-g Feb 13, 2018 •

edited

Loading

Alex-D Feb 13, 2018

Alex-D Feb 13, 2018

Alex-D Feb 13, 2018

Alex-D left a comment

Alex-D Feb 13, 2018

m-a-x-s-e-e-l-i-g Feb 13, 2018 •

edited

Loading

Alex-D Feb 13, 2018

Alex-D commented Feb 14, 2018 •

edited

Loading

Alex-D Feb 16, 2018

Alex-D Feb 16, 2018

Alex-D Feb 16, 2018

forelabs Feb 23, 2018

Alex-D Feb 23, 2018

Alex-D left a comment

forelabs Feb 26, 2018

forelabs commented Feb 27, 2018

Alex-D commented Apr 9, 2018

Added Plugin: Paste link into editor and it'll be replaced by iframe, using noembed API. #711

Added Plugin: Paste link into editor and it'll be replaced by iframe, using noembed API. #711

Conversation

m-a-x-s-e-e-l-i-g commented Feb 13, 2018

Alex-D commented Feb 13, 2018

Alex-D left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alex-D Feb 13, 2018 • edited Loading

Choose a reason for hiding this comment

m-a-x-s-e-e-l-i-g Feb 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alex-D left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m-a-x-s-e-e-l-i-g Feb 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alex-D commented Feb 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alex-D left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

forelabs commented Feb 27, 2018

Alex-D commented Apr 9, 2018

Alex-D Feb 13, 2018 •

edited

Loading

m-a-x-s-e-e-l-i-g Feb 13, 2018 •

edited

Loading

m-a-x-s-e-e-l-i-g Feb 13, 2018 •

edited

Loading

Alex-D commented Feb 14, 2018 •

edited

Loading