Home Explore Help
Register Sign In
ushio
/
video_system
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 33aa3e47ca
Branches Tags
video_system
/
public
/
froala_editor
/
html
/
themes
/
gray.html

gray.html 7.3 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 
  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/quick_insert.css">
    21. 

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

  22. 

  23.   <link rel="stylesheet" href="../../css/themes/gray.css">
    24. 

  24. 

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

  26. 

  27.   <style>
    28. 

  28.     body {
    29. 

  29.       text-align: center;
    30. 

  30.     }
    31. 

  31. 

  32.     section {
    33. 

  33.       width: 81%;
    34. 

  34.       margin: auto;
    35. 

  35.       text-align: left;
    36. 

  36.     }
    37. 

  37.   </style>
    38. 

  38. </head>
    39. 

  39. 

  40. <body>
    41. 

  41.   <section id="editor">
    42. 

  42.     <div id='edit' style="margin-top: 30px;">
    43. 

  43.       <h1>Gray Theme</h1>
    44. 

  44. 

  45.       <p>The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your
    46. 

  46.         website. You can also create your own theme and customize the rich text editor's interface the way you want
    47. 

  47.         using our <a href="http://www.froala.dev/wysiwyg-editor/customize" title="Customizer"
    48. 

  48.           target="_blank">customizer</a>.</p>
    49. 

  49. 

  50.       <p>The desired theme can be set using the <a href="http://www.froala.dev/wysiwyg-editor/docs/options#theme"
    51. 

  51.           title="theme option" target="_blank">theme</a> option. Don't forget to include the corresponding CSS theme
    52. 

  52.         file.</p>
    53. 

  53. 

  54.       <img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong> dolor
    55. 

  55.       sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit.
    56. 

  56.       Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
    57. 

  57.       <ul>
    58. 

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

  59.           nunc.</li>
    60. 

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

  61.           sit amet eros. Vestibulum a rhoncus felis.<ol>
    62. 

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

  63.               mattis fermentum.</li>
    64. 

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

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

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

  67.           </ol>
    68. 

  68.         </li>
    69. 

  69.       </ul>
    70. 

  70. 

  71.       <table style="width: 100%;">
    72. 

  72.         <tr>
    73. 

  73.           <td>asdasd</td>
    74. 

  74.           <td>asdasdasd</td>
    75. 

  75.         </tr>
    76. 

  76.       </table>
    77. 

  77. 

  78.       Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros
    79. 

  79.       nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
    80. 

  80. 

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

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

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

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

  85.       Nulla tincidunt porta <strong>vehicula.</strong><br />
    86. 

  86. 

  87.       <i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
    88. 

  88.       rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis
    89. 

  89.       sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna
    90. 

  90.       iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et
    91. 

  91.       malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br />
    92. 

  92.     </div>
    93. 

  93.   </section>
    94. 

  94. 

  95.   <script type="text/javascript"
    96. 

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

  97.   <script type="text/javascript"
    98. 

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

  99.   <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
    100. 

  100.   <script type="text/javascript" src="../../js/plugins/align.min.js"></script>
    101. 

  101.   <script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
    102. 

  102.   <script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
    103. 

  103.   <script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
    104. 

  104.   <script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
    105. 

  105.   <script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
    106. 

  106.   <script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
    107. 

  107.   <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
    108. 

  108.   <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
    109. 

  109.   <script type="text/javascript" src="../../js/plugins/file.min.js"></script>
    110. 

  110.   <script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
    111. 

  111.   <script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
    112. 

  112.   <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
    113. 

  113.   <script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
    114. 

  114.   <script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
    115. 

  115.   <script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
    116. 

  116.   <script type="text/javascript" src="../../js/plugins/video.min.js"></script>
    117. 

  117.   <script type="text/javascript" src="../../js/plugins/table.min.js"></script>
    118. 

  118.   <script type="text/javascript" src="../../js/plugins/url.min.js"></script>
    119. 

  119.   <script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
    120. 

  120.   <script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
    121. 

  121.   <script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
    122. 

  122.   <script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
    123. 

  123.   <script type="text/javascript" src="../../js/plugins/save.min.js"></script>
    124. 

  124.   <script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
    125. 

  125.   <script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
    126. 

  126. 

  127.   <script>
    128. 

  128.     (function () {
    129. 

  129.       new FroalaEditor("#edit", {
    130. 

  130.         theme: 'gray'
    131. 

  131.       })
    132. 

  132.     })()
    133. 

  133.   </script>
    134. 

  134. </body>
    135. 

  135. 

  136. </html>
    137.