enter_p.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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>Enter P</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>By default the editor is using <code>P</code> tags. When ENTER key is hit, a new <code>P</code> tag is
  45. created.</div>
  46. <table style="width: 100%;">
  47. <tr>
  48. <td style="width: 50%;">asdasd</td>
  49. <td style="width: 50%;">asdasdasd</td>
  50. </tr>
  51. </table>
  52. <br /><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
  53. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
  54. tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
  55. eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
  56. Nulla tincidunt porta <strong>vehicula.</strong><br />
  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/draggable.min.js"></script>
  69. <script type="text/javascript" src="../../js/plugins/emoticons.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>
  89. (function () {
  90. new FroalaEditor("#edit")
  91. })()
  92. </script>
  93. </body>
  94. </html>