ホーム エクスプローラ ヘルプ
登録 サインイン
ushio
/
video_system
1
0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ツリー: f1ca58d2b9
ブランチ タグ
video_system
/
public
/
froala_editor
/
html
/
toolbar
/
bottom_offset.html

bottom_offset.html 22 KB
履歴 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 

  4. <head>
    5. 

  5.   <meta charset="utf-8">
    6. 

  6.   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
    7. 

  7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    8. 

  8.   <link rel="stylesheet" href="../../css/froala_editor.css">
    9. 

  9.   <link rel="stylesheet" href="../../css/froala_style.css">
    10. 

  10.   <link rel="stylesheet" href="../../css/plugins/code_view.css">
    11. 

  11.   <link rel="stylesheet" href="../../css/plugins/colors.css">
    12. 

  12.   <link rel="stylesheet" href="../../css/plugins/emoticons.css">
    13. 

  13.   <link rel="stylesheet" href="../../css/plugins/image_manager.css">
    14. 

  14.   <link rel="stylesheet" href="../../css/plugins/image.css">
    15. 

  15.   <link rel="stylesheet" href="../../css/plugins/line_breaker.css">
    16. 

  16.   <link rel="stylesheet" href="../../css/plugins/table.css">
    17. 

  17.   <link rel="stylesheet" href="../../css/plugins/char_counter.css">
    18. 

  18.   <link rel="stylesheet" href="../../css/plugins/video.css">
    19. 

  19.   <link rel="stylesheet" href="../../css/plugins/fullscreen.css">
    20. 

  20.   <link rel="stylesheet" href="../../css/plugins/file.css">
    21. 

  21.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
    22. 

  22. 

  23.   <style>
    24. 

  24.     body {
    25. 

  25.       text-align: center;
    26. 

  26.     }
    27. 

  27. 

  28.     div#editor {
    29. 

  29.       width: 81%;
    30. 

  30.       margin: auto;
    31. 

  31.       text-align: left;
    32. 

  32.     }
    33. 

  33. 

  34.     footer {
    35. 

  35.       background: #efefef;
    36. 

  36.       height: 100px;
    37. 

  37.       position: fixed;
    38. 

  38.       bottom: 0;
    39. 

  39.       left: 0;
    40. 

  40.       right: 0;
    41. 

  41.       z-index: 10;
    42. 

  42.       text-align: center;
    43. 

  43.     }
    44. 

  44.   </style>
    45. 

  45. </head>
    46. 

  46. 

  47. <body>
    48. 

  48.   <div id="editor">
    49. 

  49.     <h1>Toolbar Bottom with Offset</h1>
    50. 

  50. 

  51.     <p><strong>Scroll down to see how the sticky toolbar and offset works at the when the toolbar is at bottom of the
    52. 

  52.         editing box.</strong></p>
    53. 

  53. 

  54.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
    55. 

  55.     eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
    56. 

  56.     purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
    57. 

  57.     est sed porttitor. Duis in nisi felis.
    58. 

  58. 

  59.     Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
    60. 

  60.     nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
    61. 

  61.     tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
    62. 

  62.     non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
    63. 

  63.     laoreet libero, in vestibulum arcu velit at velit.
    64. 

  64. 

  65.     Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
    66. 

  66.     Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
    67. 

  67.     ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
    68. 

  68.     aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
    69. 

  69.     ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
    70. 

  70.     tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
    71. 

  71.     egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
    72. 

  72.     accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
    73. 

  73. 

  74.     Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
    75. 

  75.     amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
    76. 

  76.     Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
    77. 

  77.     Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
    78. 

  78.     lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
    79. 

  79.     dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
    80. 

  80. 

  81.     Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
    82. 

  82.     ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
    83. 

  83.     libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    84. 

  84.     per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
    85. 

  85.     turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
    86. 

  86.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
    87. 

  87.     eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
    88. 

  88.     purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
    89. 

  89.     est sed porttitor. Duis in nisi felis.
    90. 

  90. 

  91.     Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
    92. 

  92.     nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
    93. 

  93.     tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
    94. 

  94.     non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
    95. 

  95.     laoreet libero, in vestibulum arcu velit at velit.
    96. 

  96. 

  97.     Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
    98. 

  98.     Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
    99. 

  99.     ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
    100. 

  100.     aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
    101. 

  101.     ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
    102. 

  102.     tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
    103. 

  103.     egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
    104. 

  104.     accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
    105. 

  105. 

  106.     Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
    107. 

  107.     amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
    108. 

  108.     Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
    109. 

  109.     Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
    110. 

  110.     lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
    111. 

  111.     dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
    112. 

  112. 

  113.     Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
    114. 

  114.     ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
    115. 

  115.     libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    116. 

  116.     per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
    117. 

  117.     turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
    118. 

  118.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
    119. 

  119.     eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
    120. 

  120.     purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
    121. 

  121.     est sed porttitor. Duis in nisi felis.
    122. 

  122. 

  123.     Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
    124. 

  124.     nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
    125. 

  125.     tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
    126. 

  126.     non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
    127. 

  127.     laoreet libero, in vestibulum arcu velit at velit.
    128. 

  128. 

  129.     Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
    130. 

  130.     Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
    131. 

  131.     ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
    132. 

  132.     aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
    133. 

  133.     ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
    134. 

  134.     tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
    135. 

  135.     egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
    136. 

  136.     accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
    137. 

  137. 

  138.     Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
    139. 

  139.     amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
    140. 

  140.     Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
    141. 

  141.     Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
    142. 

  142.     lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
    143. 

  143.     dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
    144. 

  144. 

  145.     Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
    146. 

  146.     ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
    147. 

  147.     libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    148. 

  148.     per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
    149. 

  149.     turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
    150. 

  150.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
    151. 

  151.     eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
    152. 

  152.     purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
    153. 

  153.     est sed porttitor. Duis in nisi felis.
    154. 

  154. 

  155.     Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
    156. 

  156.     nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
    157. 

  157.     tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
    158. 

  158.     non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
    159. 

  159.     laoreet libero, in vestibulum arcu velit at velit.
    160. 

  160. 

  161.     Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
    162. 

  162.     Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
    163. 

  163.     ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
    164. 

  164.     aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
    165. 

  165.     ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
    166. 

  166.     tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
    167. 

  167.     egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
    168. 

  168.     accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
    169. 

  169. 

  170.     Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
    171. 

  171.     amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
    172. 

  172.     Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
    173. 

  173.     Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
    174. 

  174.     lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
    175. 

  175.     dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
    176. 

  176. 

  177.     Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
    178. 

  178.     ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
    179. 

  179.     libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    180. 

  180.     per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
    181. 

  181.     turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
    182. 

  182.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
    183. 

  183.     eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
    184. 

  184.     purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
    185. 

  185.     est sed porttitor. Duis in nisi felis.
    186. 

  186. 

  187.     Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
    188. 

  188.     nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
    189. 

  189.     tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
    190. 

  190.     non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
    191. 

  191.     laoreet libero, in vestibulum arcu velit at velit.
    192. 

  192. 

  193.     Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
    194. 

  194.     Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
    195. 

  195.     ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
    196. 

  196.     aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
    197. 

  197.     ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
    198. 

  198.     tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
    199. 

  199.     egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
    200. 

  200.     accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
    201. 

  201. 

  202.     Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
    203. 

  203.     amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
    204. 

  204.     Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
    205. 

  205.     Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
    206. 

  206.     lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
    207. 

  207.     dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
    208. 

  208. 

  209.     Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
    210. 

  210.     ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
    211. 

  211.     libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    212. 

  212.     per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
    213. 

  213.     turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
    214. 

  214. 

  215.     <div id='edit' style="margin-bottom: 200px; margin-top: 30px;">
    216. 

  216.       <h1>Toolbar Offset Bottom</h1>
    217. 

  217. 

  218.       <p>This example is a combination of both Toolbar Offset and Toolbar Bottom examples.</p>
    219. 

  219. 

  220.       <p>The <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarStickyOffset"
    221. 

  221.           title="toolbarStickyOffset option" target="_blank">toolbarStickyOffset</a> option also works when <a
    222. 

  222.           href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarBottom" title="toolbarBottom option"
    223. 

  223.           target="_blank">toolbarBottom</a> option is set to <code>true</code>. In this case the offset is relative to
    224. 

  224.         the bottom of the page.</p>
    225. 

  225. 

  226.       <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
    227. 

  227.       dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
    228. 

  228.       blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
    229. 

  229.       <ul>
    230. 

  230.         <li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
    231. 

  231.           nunc.</li>
    232. 

  232.         <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
    233. 

  233.           sit amet eros. Vestibulum a rhoncus felis.<ol>
    234. 

  234.             <li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
    235. 

  235.               mattis fermentum.</li>
    236. 

  236.             <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
    237. 

  237.               quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
    238. 

  238.               quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
    239. 

  239.           </ol>
    240. 

  240.         </li>
    241. 

  241.       </ul>
    242. 

  242. 

  243.       <a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
    244. 

  244.       Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
    245. 

  245.       tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
    246. 

  246.       eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
    247. 

  247.       Nulla tincidunt porta <strong>vehicula.</strong><br />
    248. 

  248.     </div>
    249. 

  249. 

  250.     <footer>
    251. 

  251.       <h2>Footer</h2>
    252. 

  252.     </footer>
    253. 

  253.   </div>
    254. 

  254. 

  255.   <script type="text/javascript"
    256. 

  256.     src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
    257. 

  257.   <script type="text/javascript"
    258. 

  258.     src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
    259. 

  259.   <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
    260. 

  260.   <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
    261. 

  261.   <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
    262. 

  262.   <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
    263. 

  263.   <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
    264. 

  264.   <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
    265. 

  265.   <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
    266. 

  266.   <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
    267. 

  267.   <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
    268. 

  268.   <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
    269. 

  269.   <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
    270. 

  270.   <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
    271. 

  271.   <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
    272. 

  272.   <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
    273. 

  273.   <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
    274. 

  274.   <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
    275. 

  275.   <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
    276. 

  276.   <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
    277. 

  277.   <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
    278. 

  278.   <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
    279. 

  279.   <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
    280. 

  280.   <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
    281. 

  281.   <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
    282. 

  282.   <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
    283. 

  283.   <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
    284. 

  284.   <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
    285. 

  285. 

  286.   <script>
    287. 

  287.     (function () {
    288. 

  288.       new FroalaEditor("#edit", {
    289. 

  289.         toolbarStickyOffset: 100,
    290. 

  290.         toolbarBottom: true
    291. 

  291.       })
    292. 

  292.     })()
    293. 

  293.   </script>
    294. 

  294. </body>
    295. 

  295. 

  296. </html>
    297.