diff --git a/docs/demos/index.html b/docs/demos/index.html index 19d10d0c7..6cc68d0dd 100644 --- a/docs/demos/index.html +++ b/docs/demos/index.html @@ -55,6 +55,7 @@

  • History
  • Insert audio
  • Noembed
    • +
  • Paste embed
  • Table
    • 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 c93f0de71..922c432d9 100644 --- a/docs/documentation/plugins/index.html +++ b/docs/documentation/plugins/index.html @@ -55,6 +55,7 @@

  • MathML
  • Mention
  • Noembed
    • +
  • Paste embed
  • Paste image
  • Preformatted
  • Resizimg
    • @@ -524,6 +525,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