quick_insert.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5. <link rel="stylesheet"
  6. href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css">
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  8. <link rel="stylesheet" href="../../css/froala_editor.css">
  9. <link rel="stylesheet" href="../../css/froala_style.css">
  10. <link rel="stylesheet" href="../../css/plugins/image.css">
  11. <link rel="stylesheet" href="../../css/plugins/image_manager.css">
  12. <link rel="stylesheet" href="../../css/plugins/table.css">
  13. <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
  14. <style>
  15. body {
  16. text-align: center;
  17. }
  18. section {
  19. width: 81%;
  20. margin: auto;
  21. text-align: left;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <section id="editor">
  27. <div id='edit' style="margin-top: 30px;">
  28. <h1>Quick Insert</h1>
  29. <p>Quick Insert makes WYSIWYG HTML editing awesome.</p>
  30. <p>The quick insert button will appear when you have focus on an empty line. To see it in action hit enter at the
  31. end of this line.</p>
  32. <p>There are 2 options related to the quick insert:</p>
  33. <ul>
  34. <li><a href="https://www.froala.com/wysiwyg-editor/docs/options#quickInsertButtons"
  35. title="quickInsertButtons option" target="_blank">quickInsertButtons</a> - the buttons to display in the
  36. quick inserter.</li>
  37. <li><a href="https://www.froala.com/wysiwyg-editor/docs/options#quickInsertTags" title="quickInsertTags option"
  38. target="_blank">quickInsertTags</a> - the list of tags for which the quick insert button will appear when
  39. empty.</li>
  40. </ul>
  41. </div>
  42. </section>
  43. <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
  44. <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
  45. <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
  46. <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
  47. <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
  48. <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
  49. <script>
  50. (function () {
  51. new FroalaEditor("#edit")
  52. })()
  53. </script>
  54. </body>
  55. </html>