table.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Table plugin | 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">Table plugin</h2>
  13. <div class="feature">
  14. <h3>Basic usage</h3>
  15. <p>
  16. This plugin allows you to add and manage a table.
  17. </p>
  18. <a href="../../documentation/plugins/#plugin-table" class="button button-demo">Read table plugin documentation</a>
  19. <div id="editor">
  20. <h2>Add a table to the editor</h2>
  21. <p>
  22. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
  23. optio nam reiciendis eius beatae quibusdam!
  24. </p>
  25. <p>
  26. The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
  27. alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
  28. qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: &quot;Neither is there
  29. anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
  30. </p>
  31. </div>
  32. <h3>The code</h3>
  33. <pre><code class="js-code-to-eval javascript">
  34. $('#editor')
  35. .trumbowyg({
  36. btns: ['table']
  37. });
  38. </code></pre>
  39. </div>
  40. <div class="feature">
  41. <h3>Setup</h3>
  42. <h4>In head tag</h4>
  43. <pre><code class="html loading-head">
  44. </code></pre>
  45. <h4>At the end of body</h4>
  46. <pre><code class="html loading-body">
  47. &lt;!-- Import jQuery -->
  48. &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
  49. &lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.2.1.min.js">&lt;\/script>')&lt;/script>
  50. </code></pre>
  51. </div>
  52. </section>
  53. </div>
  54. <!-- Import jQuery -->
  55. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  56. <script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
  57. <!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE -->
  58. <script src="../js/loader.js"></script>
  59. <script>
  60. loadStyle('dist/ui/trumbowyg.css');
  61. loadStyle('dist/plugins/table/ui/trumbowyg.table.css', 'Import table plugin specific stylesheet');
  62. loadScript('dist/trumbowyg.js', 'Import Trumbowyg');
  63. loadScript('dist/plugins/table/trumbowyg.table.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
  64. </script>
  65. <script src="../js/runExampleCode.js"></script>
  66. <script src="../js/highlight.js"></script>
  67. </body>
  68. </html>