diff --git a/docs/demos/index.html b/docs/demos/index.html index fa5ba30be..30c5c1a28 100644 --- a/docs/demos/index.html +++ b/docs/demos/index.html @@ -53,6 +53,7 @@

  • Emoji
  • Insert audio
  • Noembed
    • +
  • Paste embed
    • diff --git a/docs/demos/plugins/pasteembed.html b/docs/demos/plugins/pasteembed.html new file mode 100644 index 000000000..e8634788c --- /dev/null +++ b/docs/demos/plugins/pasteembed.html @@ -0,0 +1,69 @@ + + + + + pasteEmbed | Trumbowyg + + + + +
    +
    +

    Embed plugin

    + +
    +

    Basic usage

    +

    + This plugin allow you to insert iframes into your editor just by pasting an url.
    + It uses noembed API to support Twitter, Youtube, Soundcloud and more. Find all supported websites at noembed.
    + This plugin also uses MAXmade API in order to extend the list of supported websites. Need a website supported? Message them, they're nice. +

    + + Read paste embed plugin documentation + +
    +

    Try to paste some urls!

    + +

    Try pasting this one: https://www.youtube.com/watch?v=000al7ru3ms

    +
    + +

    The code

    + 
    
+$('#editor')
+.trumbowyg({
+});
+
    +
    + +
    +

    Setup

    + +

    In head tag

    + 
    
+
    +

    At the end of body

    + 
    
+<!-- Import jQuery -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
+
    +
    +
    +
    + + + + + + + + + + + + + diff --git a/docs/documentation/plugins/index.html b/docs/documentation/plugins/index.html index df18ced05..ba62fdd88 100644 --- a/docs/documentation/plugins/index.html +++ b/docs/documentation/plugins/index.html @@ -48,6 +48,7 @@

  • Emoji
  • Insert audio
  • Noembed
    • +
  • Paste embed
  • Paste image
  • Preformatted
  • Ruby
    • @@ -319,6 +320,31 @@

    How to use it?

    }); + +
    +

    Paste embed

    +

    Stable

    +

    Need demo

    + +

    + Paste embed plugin handles paste events. It looks for paste event, checks if it's a url and uses noembed and MAXmade APIs to retrieve an iframe from that url. If it can't retrieve an iframe, it will put an anchor tag around the url. It doesn't do anything on text or HTML paste. +

    + +

    + + View pasteembed plugin code on GitHub + +

    + +

    How to use it?

    + 
    
+<-- Import Trumbowyg plugins... -->
+<script src="node_modules/trumbowyg/dist/plugins/pasteembed/trumbowyg.pasteembed.min.js"></script>
+
    +

    + Paste embed now works on every new Trumbowyg instance. +

    +

    Paste image

    diff --git a/plugins/pasteembed/trumbowyg.pasteembed.js b/plugins/pasteembed/trumbowyg.pasteembed.js new file mode 100644 index 000000000..2f2c6b40f --- /dev/null +++ b/plugins/pasteembed/trumbowyg.pasteembed.js @@ -0,0 +1,81 @@ +/* =========================================================== + * 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"; + + $.extend(true, $.trumbowyg, { + plugins: { + pasteImage: { + init: function(trumbowyg) { + trumbowyg.pasteHandlers.push(function(pasteEvent) { + try { + var clipboardData = (pasteEvent.originalEvent || pasteEvent).clipboardData; + var pastedData = clipboardData.getData("Text"); + var request = null; + + if (pastedData.startsWith("http")) { + + pasteEvent.stopPropagation(); + pasteEvent.preventDefault(); + + var query = { + url: pastedData.trim() + }; + var content = ""; + var fails = 0; + + if (request && request.transport) request.transport.abort(); + + request = $.ajax({ + crossOrigin: true, + url: "https://noembed.com/embed?nowrap=on", + url2: "https://api.maxmade.nl/url2iframe/embed", + type: "GET", + data: query, + cache: false, + dataType: "jsonp", + success: function(res) { + if (res.html) { + fails = 0; + content = res.html; + } else { + fails++; + } + }, + error: function(res) { + fails++; + }, + complete: function() { + if (fails === 1) { + this.url = this.url2; + this.data = query; + $.ajax(this); + } + if (fails === 2) { + content = $("", { + href: pastedData, + text: pastedData + }).prop('outerHTML'); + } + if (content.length > 0) { + fails = 0; + trumbowyg.execCmd("insertHTML", content); + } + } + }); + } + } catch (c) {} + }); + } + } + } + }); +})(jQuery); \ No newline at end of file