pasteembed.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>pasteEmbed | Trumbowyg</title>
  6. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
  7. <link rel="stylesheet" href="../../css/main.css">
  8. </head>
  9. <body class="documentation-body">
  10. <div class="main main-demo-inner">
  11. <section class="wrapper section">
  12. <h2 class="section-title">Embed plugin</h2>
  13. <div class="feature">
  14. <h3>Basic usage</h3>
  15. <p>
  16. This plugin allow you to insert iframes into your editor just by pasting an url.<br/>
  17. 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/>
  18. 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.
  19. </p>
  20. <a href="../../documentation/plugins/#plugin-pasteembed" class="button button-demo">Read paste embed plugin documentation</a>
  21. <div id="editor">
  22. <h2>Try to paste some urls!</h2>
  23. <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/376360739&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
  24. <p>Try pasting this one: https://www.youtube.com/watch?v=dQw4w9WgXcQ</p>
  25. </div>
  26. <h3>The code</h3>
  27. <pre><code class="js-code-to-eval javascript">
  28. $('#editor')
  29. .trumbowyg({
  30. });
  31. </code></pre>
  32. </div>
  33. <div class="feature">
  34. <h3>Setup</h3>
  35. <h4>In head tag</h4>
  36. <pre><code class="html loading-head">
  37. </code></pre>
  38. <h4>At the end of body</h4>
  39. <pre><code class="html loading-body">
  40. &lt;!-- Import jQuery -->
  41. &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
  42. &lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.2.1.min.js">&lt;\/script>')&lt;/script>
  43. </code></pre>
  44. </div>
  45. </section>
  46. </div>
  47. <!-- Import jQuery -->
  48. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  49. <script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
  50. <!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE -->
  51. <script src="../js/loader.js"></script>
  52. <script>
  53. loadStyle('dist/ui/trumbowyg.css');
  54. loadScript('dist/trumbowyg.js', 'Import Trumbowyg');
  55. loadScript('dist/plugins/pasteembed/trumbowyg.pasteembed.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
  56. </script>
  57. <script src="../js/runExampleCode.js"></script>
  58. <script src="../js/highlight.js"></script>
  59. </body>
  60. </html>