init_on_click.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  7. <link rel="stylesheet" href="../../css/froala_editor.css">
  8. <link rel="stylesheet" href="../../css/froala_style.css">
  9. <link rel="stylesheet" href="../../css/plugins/code_view.css">
  10. <link rel="stylesheet" href="../../css/plugins/colors.css">
  11. <link rel="stylesheet" href="../../css/plugins/emoticons.css">
  12. <link rel="stylesheet" href="../../css/plugins/image_manager.css">
  13. <link rel="stylesheet" href="../../css/plugins/image.css">
  14. <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
  15. <link rel="stylesheet" href="../../css/plugins/table.css">
  16. <link rel="stylesheet" href="../../css/plugins/char_counter.css">
  17. <link rel="stylesheet" href="../../css/plugins/video.css">
  18. <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
  19. <link rel="stylesheet" href="../../css/plugins/file.css">
  20. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
  21. <style>
  22. body {
  23. text-align: center;
  24. }
  25. div#editor {
  26. width: 81%;
  27. margin: auto;
  28. text-align: left;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="editor">
  34. <div id='edit' style="margin-top: 30px;">
  35. <h1>Init on Click</h1>
  36. <p>Init on click improves the page performance by initializing only the basic code when the page is loaded and the
  37. rest of the code when clicking in the editable area. It is highly recommended to use the <a
  38. href="../docs/options#initOnClick" target="_blank" title="initOnClick option">initOnClick</a> option if you
  39. have more rich text editors on the same page.</p>
  40. <p><strong>Click here to initialize the WYSIWYG HTML editor on this text.</strong></p>
  41. <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
  42. dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
  43. blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
  44. <ul>
  45. <li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
  46. nunc.</li>
  47. <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
  48. sit amet eros. Vestibulum a rhoncus felis.<ol>
  49. <li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
  50. mattis fermentum.</li>
  51. <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
  52. quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
  53. quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
  54. </ol>
  55. </li>
  56. </ul>
  57. </div>
  58. </div>
  59. <script type="text/javascript"
  60. src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  61. <script type="text/javascript"
  62. src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  63. <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
  64. <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
  65. <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
  66. <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
  67. <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
  68. <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
  69. <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
  70. <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
  71. <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
  72. <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
  73. <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
  74. <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
  75. <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
  76. <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
  77. <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
  78. <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
  79. <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
  80. <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
  81. <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
  82. <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
  83. <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
  84. <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
  85. <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
  86. <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
  87. <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
  88. <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
  89. <script>
  90. (function () {
  91. new FroalaEditor("#edit", {
  92. initOnClick: true
  93. })
  94. })()
  95. </script>
  96. </body>
  97. </html>