iframe.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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/draggable.css">
  12. <link rel="stylesheet" href="../../css/plugins/emoticons.css">
  13. <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
  14. <link rel="stylesheet" href="../../css/plugins/image_manager.css">
  15. <link rel="stylesheet" href="../../css/plugins/image.css">
  16. <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
  17. <link rel="stylesheet" href="../../css/plugins/table.css">
  18. <link rel="stylesheet" href="../../css/plugins/char_counter.css">
  19. <link rel="stylesheet" href="../../css/plugins/video.css">
  20. <link rel="stylesheet" href="../../css/plugins/quick_insert.css">
  21. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
  22. <style>
  23. body {
  24. text-align: center;
  25. }
  26. div#editor {
  27. width: 81%;
  28. margin: auto;
  29. text-align: left;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="editor">
  35. <div id='edit' style="margin-top: 30px;">
  36. <h1>Iframe</h1>
  37. <p>Using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#iframe" title="iframe option"
  38. target="_blank">iframe</a> the editor's content will be placed in an iframe and isolated from the rest of the
  39. page.</p>
  40. <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
  41. dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
  42. blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
  43. <ul>
  44. <li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
  45. nunc.</li>
  46. <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
  47. sit amet eros. Vestibulum a rhoncus felis.<ol>
  48. <li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
  49. mattis fermentum.</li>
  50. <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
  51. quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
  52. quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
  53. </ol>
  54. </li>
  55. </ul>
  56. <table style="width: 100%;">
  57. <tr>
  58. <td style="width: 25%;"></td>
  59. <td style="width: 25%;"></td>
  60. <td style="width: 25%;"></td>
  61. <td style="width: 25%;"></td>
  62. </tr>
  63. <tr>
  64. <td style="width: 25%;"></td>
  65. <td style="width: 25%;"></td>
  66. <td style="width: 25%;"></td>
  67. <td style="width: 25%;"></td>
  68. </tr>
  69. </table>
  70. <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
  71. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
  72. tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
  73. eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
  74. Nulla tincidunt porta <strong>vehicula.</strong><br />
  75. </div>
  76. </div>
  77. <script type="text/javascript"
  78. src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  79. <script type="text/javascript"
  80. src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  81. <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
  82. <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
  83. <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
  84. <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
  85. <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
  86. <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
  87. <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
  88. <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
  89. <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
  90. <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
  91. <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
  92. <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
  93. <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
  94. <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
  95. <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
  96. <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
  97. <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
  98. <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
  99. <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
  100. <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
  101. <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
  102. <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
  103. <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
  104. <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
  105. <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
  106. <script>
  107. (function () {
  108. new FroalaEditor("#edit", {
  109. iframe: true
  110. })
  111. })()
  112. </script>
  113. </body>
  114. </html>