浏览代码

Docs: Updated the document editor example snippet.

Aleksander Nowodzinski 7 年之前
父节点
当前提交
ef9ef886e8
共有 1 个文件被更改,包括 43 次插入19 次删除
  1. 43 19
      docs/_snippets/examples/document-editor.html

+ 43 - 19
docs/_snippets/examples/document-editor.html

@@ -1,5 +1,5 @@
-<div class="document-editor ck-reset ck-rounded-corners">
-	<div class="document-editor__toolbar ck-reset_all"></div>
+<div class="document-editor">
+	<div class="document-editor__toolbar"></div>
 	<div class="document-editor__editable"></div>
 </div>
 
@@ -7,55 +7,74 @@
 	.document-editor {
 		border: 1px solid var(--ck-color-base-border);
 		border-radius: var(--ck-border-radius);
+
+		/* Set vertical boundaries for the document editor. */
 		max-height: 700px;
 
+		/* This element is a flex container for easier rendering. */
 		display: flex;
 		flex-flow: column nowrap;
 		overflow: hidden;
 	}
 
 	.document-editor__toolbar {
+		/* Make sure the toolbar container is always above the editable. */
 		z-index: 1;
-		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+
+		/* Create the illusion of the toolbar floating over the editable. */
+		box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
+
+		/* Use the CKEditor CSS variables to keep the UI consistent. */
 		border-bottom: 1px solid var(--ck-color-toolbar-border);
 	}
 
+	/* Adjust the look of the toolbar inside of the container. */
 	.document-editor__toolbar .ck-toolbar {
 		border: 0;
 		border-radius: 0;
 	}
 
+	/* Make the editable container look like the inside of a native word processor app. */
 	.document-editor__editable {
-		padding: calc(2*var(--ck-spacing-large));
+		padding: calc( 2 * var(--ck-spacing-large) );
 		background: var(--ck-color-base-foreground);
+
+		/* Make it possible to scroll the "page" of the edited content. */
 		overflow-y: scroll;
 	}
 
 	.document-editor__editable .ck-editor__editable {
+		/* Set the dimensions of the "page". */
 		width: 15.8cm;
 		min-height: 21cm;
 
+		/* Keep the "page" off the boundaries of the container. */
 		padding: 1cm 2cm 2cm;
-		margin: 0.5cm auto;
 
-		border: 1px #D3D3D3 solid;
+		border: 1px hsl( 0,0%,82.7% ) solid;
 		border-radius: var(--ck-border-radius);
 		background: white;
-		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 
+		/* The "page" should cast a slight shadow (3D illusion). */
+		box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
+
+		/* Center the "page". */
 		margin: 0 auto;
 	}
 
+	/* Set the default font for the "page" of the content. */
 	.document-editor .ck-content,
 	.document-editor .ck-heading-dropdown .ck-list {
 		font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
 	}
 
+	/* Adjust the headings dropdown to host some larger heading styles. */
 	.document-editor .ck-heading-dropdown .ck-dropdown__panel .ck-list > .ck-list__item {
-		line-height: calc(1.2 * var(--ck-line-height-base)*var(--ck-font-size-base));
+		line-height: calc( 1.2 * var(--ck-line-height-base) * var(--ck-font-size-base) );
 		min-width: 8em;
 	}
 
+	/* Set the styles for the "Heading 1". */
 	.document-editor .ck-content h2,
 	.document-editor .ck-heading-dropdown .ck-heading_heading1 {
 		font-size: 2.18em;
@@ -63,26 +82,29 @@
 
 	.document-editor .ck-content h2 {
 		line-height: 1.37em;
-		padding-top: 0.342em;
-		margin-bottom: 0.142em;
+		padding-top: .342em;
+		margin-bottom: .142em;
 	}
 
+	/* Set the styles for the "Heading 2". */
 	.document-editor .ck-content h3,
 	.document-editor .ck-heading-dropdown .ck-heading_heading2 {
 		font-size: 1.75em;
-		color: hsl(203, 100%, 50%);
+		color: hsl( 203, 100%, 50% );
 	}
 
 	.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-list__item_active {
 		color: var(--ck-color-list-item-text-active);
 	}
 
+	/* Set the styles for the "Heading 2". */
 	.document-editor .ck-content h3 {
 		line-height: 1.86em;
-		padding-top: 0.171em;
-		margin-bottom: 0.357em;
+		padding-top: .171em;
+		margin-bottom: .357em;
 	}
 
+	/* Set the styles for the "Heading 3". */
 	.document-editor .ck-content h4,
 	.document-editor .ck-heading-dropdown .ck-heading_heading3 {
 		font-size: 1.31em;
@@ -90,25 +112,27 @@
 
 	.document-editor .ck-content h4 {
 		line-height: 1.24em;
-		padding-top: 0.286em;
-		margin-bottom: 0.952em;
+		padding-top: .286em;
+		margin-bottom: .952em;
 	}
 
+	/* Set the styles for the "Paragraph". */
 	.document-editor .ck-content p,
 	.document-editor .ck-heading-dropdown .ck-heading_paragraph {
-		font-size: 1.00em;
+		font-size: 1em;
 	}
 
 	.document-editor .ck-content p {
 		line-height: 1.63em;
-		padding-top: 0.500em;
+		padding-top: .5em;
 		margin-bottom: 1.13em;
 	}
 
+	/* Make the block quoted text serif with some additional spacing. */
 	.document-editor .ck-content blockquote {
 		font-family: Georgia, serif;
-		margin-left: calc(2*var(--ck-spacing-large));
-		margin-right: calc(2*var(--ck-spacing-large));
+		margin-left: calc( 2 * var(--ck-spacing-large) );
+		margin-right: calc( 2 * var(--ck-spacing-large) );
 	}
 
 	.document-editor__data {