|
|
@@ -1,100 +1,110 @@
|
|
|
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
|
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
|
|
|
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
|
|
|
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
|
|
|
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!-- The outermost cotainer of the editor. -->
|
|
|
+ <div class="ck-editor">
|
|
|
+ <!-- The toolbar of the editor. -->
|
|
|
+ <div class="btn-toolbar" role="toolbar" aria-label="Editor toolbar">
|
|
|
+ <!-- The headings dropdown. -->
|
|
|
+ <div class="btn-group mr-2" role="group" aria-label="Headings">
|
|
|
+ <div class="dropdown" id="heading">
|
|
|
+ <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Headings</span></button>
|
|
|
+ <div class="dropdown-menu" aria-labelledby="heading-button"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
|
|
|
+ <!-- Basic styles buttons. -->
|
|
|
+ <div class="btn-group mr-2" role="group" aria-label="Basic styles">
|
|
|
+ <button type="button" class="btn btn-primary btn-sm" id="bold">B</button>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm" id="italic">I</button>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm" id="underline">U</button>
|
|
|
+ </div>
|
|
|
|
|
|
-<!-- The outermost cotainer of the editor. -->
|
|
|
-<div class="ck-editor">
|
|
|
- <!-- The toolbar of the editor. -->
|
|
|
- <div class="btn-toolbar" role="toolbar" aria-label="Editor toolbar">
|
|
|
- <!-- The headings dropdown. -->
|
|
|
- <div class="btn-group mr-2" role="group" aria-label="Headings">
|
|
|
- <div class="dropdown" id="heading">
|
|
|
- <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Headings</span></button>
|
|
|
- <div class="dropdown-menu" aria-labelledby="heading-button"></div>
|
|
|
+ <!-- Undo and redo buttons. -->
|
|
|
+ <div class="btn-group mr-2" role="group" aria-label="Undo">
|
|
|
+ <button type="button" class="btn btn-primary btn-sm" id="undo">←</button>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm" id="redo">→</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Basic styles buttons. -->
|
|
|
- <div class="btn-group mr-2" role="group" aria-label="Basic styles">
|
|
|
- <button type="button" class="btn btn-primary btn-sm" id="bold">B</button>
|
|
|
- <button type="button" class="btn btn-primary btn-sm" id="italic">I</button>
|
|
|
- <button type="button" class="btn btn-primary btn-sm" id="underline">U</button>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- Undo and redo buttons. -->
|
|
|
- <div class="btn-group mr-2" role="group" aria-label="Undo">
|
|
|
- <button type="button" class="btn btn-primary btn-sm" id="undo">←</button>
|
|
|
- <button type="button" class="btn btn-primary btn-sm" id="redo">→</button>
|
|
|
+ <!-- The container containing data of the editor. -->
|
|
|
+ <div id="editor">
|
|
|
+ <h2>Custom UI</h2>
|
|
|
+ <p>
|
|
|
+ This editor uses <b>Bootstrap</b> components to build the user interface.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- The container containing data of the editor. -->
|
|
|
- <div id="editor">
|
|
|
- <h2>Custom UI</h2>
|
|
|
- <p>
|
|
|
- This editor uses <b>Bootstrap</b> components to build the user interface.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
+ <button type="button" id="toggle-readonly">Toggle editor read–only</button>
|
|
|
|
|
|
-<button type="button" id="toggle-readonly">Toggle editor read–only</button>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ padding: 0 .2em;
|
|
|
+ }
|
|
|
|
|
|
-<style>
|
|
|
- /* Let's give the editor some space and limits using a border. */
|
|
|
- .ck-editor {
|
|
|
- margin: 1em 0;
|
|
|
- border: 1px solid rgba( 0, 0, 0, .1 );
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
+ /* Let's give the editor some space and limits using a border. */
|
|
|
+ .ck-editor {
|
|
|
+ margin: 0 0 1em;
|
|
|
+ border: 1px solid rgba( 0, 0, 0, .1 );
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
|
|
|
- /* Adding internal spacing, border and background to the toolbar. */
|
|
|
- .ck-editor .btn-toolbar {
|
|
|
- padding: .5rem;
|
|
|
- background: #f7f7f9;
|
|
|
- border-bottom: 1px solid rgba( 0, 0, 0, .1 );
|
|
|
- }
|
|
|
+ /* Adding internal spacing, border and background to the toolbar. */
|
|
|
+ .ck-editor .btn-toolbar {
|
|
|
+ padding: .5rem;
|
|
|
+ background: #f7f7f9;
|
|
|
+ border-bottom: 1px solid rgba( 0, 0, 0, .1 );
|
|
|
+ }
|
|
|
|
|
|
- /* Tweaking the editable area for better readability. */
|
|
|
- .ck-editor .ck-editor__editable {
|
|
|
- padding: 2em 2em 1em;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
+ /* Tweaking the editable area for better readability. */
|
|
|
+ .ck-editor .ck-editor__editable {
|
|
|
+ padding: 2em 2em 1em;
|
|
|
+ overflow: auto;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
|
|
|
- /* When in read–only mode, the editable should fade out. */
|
|
|
- .ck-editor .ck-editor__editable:not([contenteditable]) {
|
|
|
- background: #fafafa;
|
|
|
- color: #777;
|
|
|
- }
|
|
|
+ /* When in read–only mode, the editable should fade out. */
|
|
|
+ .ck-editor .ck-editor__editable:not([contenteditable]) {
|
|
|
+ background: #fafafa;
|
|
|
+ color: #777;
|
|
|
+ }
|
|
|
|
|
|
- /* Make sure the headings dropdown button does not change its size
|
|
|
- as different headings are selected */
|
|
|
- .ck-editor .dropdown-toggle span {
|
|
|
- display: inline-block;
|
|
|
- width: 100px;
|
|
|
- text-align: left;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
+ /* Make sure the headings dropdown button does not change its size
|
|
|
+ as different headings are selected */
|
|
|
+ .ck-editor .dropdown-toggle span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
|
|
|
- /* Make the headings dropdown items visually distinctive. */
|
|
|
- .ck-editor .heading-item_heading1 { font-size: 1.5em; }
|
|
|
- .ck-editor .heading-item_heading2 { font-size: 1.3em; }
|
|
|
- .ck-editor .heading-item_heading3 { font-size: 1.1em; }
|
|
|
+ /* Make the headings dropdown items visually distinctive. */
|
|
|
+ .ck-editor .heading-item_heading1 { font-size: 1.5em; }
|
|
|
+ .ck-editor .heading-item_heading2 { font-size: 1.3em; }
|
|
|
+ .ck-editor .heading-item_heading3 { font-size: 1.1em; }
|
|
|
|
|
|
- .ck-editor [class*="heading-item_"] {
|
|
|
- line-height: 22px;
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
+ .ck-editor [class*="heading-item_"] {
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .ck-editor [class*="heading-item_heading"] {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .ck-editor [class*="heading-item_heading"] {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- /* Give the basic styles buttons some icon–like shape */
|
|
|
- .ck-editor #bold { font-weight: bold; }
|
|
|
- .ck-editor #italic { font-style: italic; }
|
|
|
- .ck-editor #underline { text-decoration: underline; }
|
|
|
-</style>
|
|
|
+ /* Give the basic styles buttons some icon–like shape */
|
|
|
+ .ck-editor #bold { font-weight: bold; }
|
|
|
+ .ck-editor #italic { font-style: italic; }
|
|
|
+ .ck-editor #underline { text-decoration: underline; }
|
|
|
+ </style>
|
|
|
+ </body>
|
|
|
+</html>
|