enter_div.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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. section {
  26. width: 81%;
  27. margin: auto;
  28. text-align: left;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <section id="editor">
  34. <div id='edit' style="margin-top: 30px;">
  35. <h1>Enter DIV</h1>
  36. <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />The way ENTER key behaves can
  37. be customized using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#enter"
  38. title="enter Option" target="_blank">enter</a> option. There are 3 possible options:
  39. <ul>
  40. <li>P</li>
  41. <li>DIV</li>
  42. <li>BR</li>
  43. </ul>
  44. <div>The editor can use <code>DIV</code> tags. When ENTER key is hit, a new <code>DIV</code> tag is created.</div>
  45. <table style="width: 100%;">
  46. <tr>
  47. <td style="width: 50%;">asdasd</td>
  48. <td style="width: 50%;">asdasdasd</td>
  49. </tr>
  50. </table>
  51. <br /><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
  52. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
  53. tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
  54. eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
  55. Nulla tincidunt porta <strong>vehicula.</strong><br />
  56. </div>
  57. </section>
  58. <script type="text/javascript"
  59. src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  60. <script type="text/javascript"
  61. src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  62. <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
  63. <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
  64. <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
  65. <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
  66. <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
  67. <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
  68. <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
  69. <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
  70. <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
  71. <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
  72. <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
  73. <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
  74. <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
  75. <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
  76. <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
  77. <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
  78. <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
  79. <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
  80. <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
  81. <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
  82. <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
  83. <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
  84. <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
  85. <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
  86. <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
  87. <script>
  88. (function () {
  89. new FroalaEditor("#edit", {
  90. enter: FroalaEditor.ENTER_DIV
  91. })
  92. })()
  93. </script>
  94. </body>
  95. </html>