full.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!-- head -->
  2. <link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
  3. <link
  4. rel="stylesheet"
  5. href="{{site.highlightjs}}/styles/monokai-sublime.min.css"
  6. />
  7. <link rel="stylesheet" href="{{site.cdn}}{{site.version}}/quill.snow.css" />
  8. <style>
  9. body > #standalone-container {
  10. margin: 50px auto;
  11. max-width: 720px;
  12. }
  13. #editor-container {
  14. height: 350px;
  15. }
  16. </style>
  17. <!-- head -->
  18. <div id="standalone-container">
  19. <div id="toolbar-container">
  20. <span class="ql-formats">
  21. <select class="ql-font"></select>
  22. <select class="ql-size"></select>
  23. </span>
  24. <span class="ql-formats">
  25. <button class="ql-bold"></button>
  26. <button class="ql-italic"></button>
  27. <button class="ql-underline"></button>
  28. <button class="ql-strike"></button>
  29. </span>
  30. <span class="ql-formats">
  31. <select class="ql-color"></select>
  32. <select class="ql-background"></select>
  33. </span>
  34. <span class="ql-formats">
  35. <button class="ql-script" value="sub"></button>
  36. <button class="ql-script" value="super"></button>
  37. </span>
  38. <span class="ql-formats">
  39. <button class="ql-header" value="1"></button>
  40. <button class="ql-header" value="2"></button>
  41. <button class="ql-blockquote"></button>
  42. <button class="ql-code-block"></button>
  43. </span>
  44. <span class="ql-formats">
  45. <button class="ql-list" value="ordered"></button>
  46. <button class="ql-list" value="bullet"></button>
  47. <button class="ql-indent" value="-1"></button>
  48. <button class="ql-indent" value="+1"></button>
  49. </span>
  50. <span class="ql-formats">
  51. <button class="ql-direction" value="rtl"></button>
  52. <select class="ql-align"></select>
  53. </span>
  54. <span class="ql-formats">
  55. <button class="ql-link"></button>
  56. <button class="ql-image"></button>
  57. <button class="ql-video"></button>
  58. <button class="ql-formula"></button>
  59. </span>
  60. <span class="ql-formats">
  61. <button class="ql-clean"></button>
  62. </span>
  63. </div>
  64. <div id="editor-container"></div>
  65. </div>
  66. <!-- script -->
  67. <script src="{{site.katex}}/katex.min.js"></script>
  68. <script src="{{site.highlightjs}}/highlight.min.js"></script>
  69. <script src="{{site.cdn}}{{site.version}}/{{site.quill}}"></script>
  70. <script>
  71. var quill = new Quill('#editor-container', {
  72. modules: {
  73. syntax: true,
  74. toolbar: '#toolbar-container',
  75. },
  76. placeholder: 'Compose an epic...',
  77. theme: 'snow',
  78. });
  79. </script>
  80. <!-- script -->