index.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <title>Tiny Editor demo project</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- We need font awesome -->
  8. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  9. <!-- Bulma for some styling -->
  10. <link rel="stylesheet" href="bulma.min.css">
  11. <!-- Local copy of tiny editor -->
  12. <script src="tinyeditor.js"></script>
  13. <!-- Our demo project-->
  14. <script src="tinyeditordemo.js"></script>
  15. </head>
  16. <body>
  17. <div class="hero">
  18. <div class="hero-body has-text-centered">
  19. <h2 class="title is-4">Tiny editor demo</h2>
  20. <p class="">This is simple demo of a <a href="https://github.com/fvilers/tiny-editor">Tiny editor</a>.</p>
  21. <p>edit html, and press the 'Render HTML' button to display the edited html in the lower part of the screen.
  22. </div>
  23. </div>
  24. <div class="box py-5">
  25. <div class="is-flex is-justify-content-center">
  26. <div>
  27. <div class="content">
  28. <div id="editor" style="min-height: 250px">
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="box py-5">
  35. <div class="block">
  36. <div class="is-flex is-justify-content-center">
  37. <button id="btnShowHTML" class="button is-primary">Render HTML</button>
  38. </div>
  39. </div>
  40. <div class="block">
  41. <div class="is-flex is-justify-content-center">
  42. <div class="content" id="divHTMLContent">
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <script>
  48. window.addEventListener("load", rtl.run);
  49. </script>
  50. </body>
  51. </html>