bootstrap-ui-inner.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  2. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  4. <!-- The outermost cotainer of the editor. -->
  5. <div class="ck-editor">
  6. <!-- The toolbar of the editor. -->
  7. <div class="btn-toolbar" role="toolbar" aria-label="Editor toolbar">
  8. <!-- The headings dropdown. -->
  9. <div class="btn-group mr-2" role="group" aria-label="Headings">
  10. <div class="dropdown" id="heading">
  11. <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Headings</span></button>
  12. <div class="dropdown-menu" aria-labelledby="heading-button"></div>
  13. </div>
  14. </div>
  15. <!-- Basic styles buttons. -->
  16. <div class="btn-group mr-2" role="group" aria-label="Basic styles">
  17. <button type="button" class="btn btn-primary btn-sm" id="bold">B</button>
  18. <button type="button" class="btn btn-primary btn-sm" id="italic">I</button>
  19. <button type="button" class="btn btn-primary btn-sm" id="underline">U</button>
  20. </div>
  21. <!-- Undo and redo buttons. -->
  22. <div class="btn-group mr-2" role="group" aria-label="Undo">
  23. <button type="button" class="btn btn-primary btn-sm" id="undo">&larr;</button>
  24. <button type="button" class="btn btn-primary btn-sm" id="redo">&rarr;</button>
  25. </div>
  26. </div>
  27. <!-- The container containing data of the editor. -->
  28. <div id="editor">
  29. <h2>Custom UI</h2>
  30. <p>
  31. This editor uses <b>Bootstrap</b> components to build the user interface.
  32. </p>
  33. </div>
  34. </div>
  35. <button type="button" id="toggle-readonly">Toggle editor read–only</button>
  36. <style>
  37. .manual-test-sidebar {
  38. display: none;
  39. }
  40. .manual-test-container {
  41. padding: 0 .2em;
  42. }
  43. /* Let's give the editor some space and limits using a border. */
  44. .ck-editor {
  45. margin: 1em 0;
  46. border: 1px solid rgba( 0, 0, 0, .1 );
  47. border-radius: 4px;
  48. }
  49. /* Adding internal spacing, border and background to the toolbar. */
  50. .ck-editor .btn-toolbar {
  51. padding: .5rem;
  52. background: #f7f7f9;
  53. border-bottom: 1px solid rgba( 0, 0, 0, .1 );
  54. }
  55. /* Tweaking the editable area for better readability. */
  56. .ck-editor .ck-editor__editable {
  57. padding: 2em 2em 1em;
  58. overflow: auto;
  59. }
  60. /* When in read–only mode, the editable should fade out. */
  61. .ck-editor .ck-editor__editable:not([contenteditable]) {
  62. background: #fafafa;
  63. color: #777;
  64. }
  65. /* Make sure the headings dropdown button does not change its size
  66. as different headings are selected */
  67. .ck-editor .dropdown-toggle span {
  68. display: inline-block;
  69. width: 100px;
  70. text-align: left;
  71. overflow: hidden;
  72. text-overflow: ellipsis;
  73. vertical-align: bottom;
  74. }
  75. /* Make the headings dropdown items visually distinctive. */
  76. .ck-editor .heading-item_heading1 { font-size: 1.5em; }
  77. .ck-editor .heading-item_heading2 { font-size: 1.3em; }
  78. .ck-editor .heading-item_heading3 { font-size: 1.1em; }
  79. .ck-editor [class*="heading-item_"] {
  80. line-height: 22px;
  81. padding: 10px;
  82. }
  83. .ck-editor [class*="heading-item_heading"] {
  84. font-weight: bold;
  85. }
  86. /* Give the basic styles buttons some icon–like shape */
  87. .ck-editor #bold { font-weight: bold; }
  88. .ck-editor #italic { font-style: italic; }
  89. .ck-editor #underline { text-decoration: underline; }
  90. </style>