-
-
Notifications
You must be signed in to change notification settings - Fork 614
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #711 from m-a-x-s-e-e-l-i-g/develop
Added Plugin: Paste link into editor and it'll be replaced by iframe, using noembed API.
- Loading branch information
Showing
4 changed files
with
177 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>pasteEmbed | Trumbowyg</title> | ||
| <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="../../css/main.css"> | ||
| </head> | ||
| <body class="documentation-body"> | ||
| <div class="main main-demo-inner"> | ||
| <section class="wrapper section"> | ||
| <h2 class="section-title">Embed plugin</h2> | ||
|
|
||
| <div class="feature"> | ||
| <h3>Basic usage</h3> | ||
| <p> | ||
| This plugin allow you to insert iframes into your editor just by pasting an url.<br/> | ||
| It uses <a href="https://noembed.com">noembed</a> API to support Twitter, Youtube, Soundcloud and more. Find all supported websites at <a href="https://noembed.com">noembed</a>.<br/> | ||
| This plugin also uses <a href="https://www.maxmade.nl/">MAXmade</a> API in order to extend the list of supported websites. Need a website supported? Message them, they're nice. | ||
| </p> | ||
|
|
||
| <a href="../../documentation/plugins/#plugin-pasteembed" class="button button-demo">Read paste embed plugin documentation</a> | ||
|
|
||
| <div id="editor"> | ||
| <h2>Try to paste some urls!</h2> | ||
| <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/94194736&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> | ||
| <p>Try pasting this one: https://www.youtube.com/watch?v=000al7ru3ms</p> | ||
| </div> | ||
|
|
||
| <h3>The code</h3> | ||
| <pre><code class="js-code-to-eval javascript"> | ||
| $('#editor') | ||
| .trumbowyg({ | ||
| }); | ||
| </code></pre> | ||
| </div> | ||
|
|
||
| <div class="feature"> | ||
| <h3>Setup</h3> | ||
|
|
||
| <h4>In head tag</h4> | ||
| <pre><code class="html loading-head"> | ||
| </code></pre> | ||
| <h4>At the end of body</h4> | ||
| <pre><code class="html loading-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> | ||
| </code></pre> | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- 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> | ||
|
|
||
| <!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE --> | ||
| <script src="../js/loader.js"></script> | ||
| <script> | ||
| loadStyle('dist/ui/trumbowyg.css'); | ||
| loadScript('dist/trumbowyg.js', 'Import Trumbowyg'); | ||
| loadScript('dist/plugins/pasteembed/trumbowyg.pasteembed.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg'); | ||
| </script> | ||
| <script src="../js/runExampleCode.js"></script> | ||
| <script src="../js/highlight.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = $("<a>", { | ||
| href: pastedData, | ||
| text: pastedData | ||
| }).prop('outerHTML'); | ||
| } | ||
| if (content.length > 0) { | ||
| fails = 0; | ||
| trumbowyg.execCmd("insertHTML", content); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| } catch (c) {} | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| })(jQuery); |