浏览代码

Merge branch 'master' into t/494

Piotrek Koszuliński 7 年之前
父节点
当前提交
e55fd63138

+ 34 - 38
docs/_snippets/examples/document-editor.html

@@ -1,6 +1,35 @@
 <div class="document-editor">
 <div class="document-editor">
 	<div class="document-editor__toolbar"></div>
 	<div class="document-editor__toolbar"></div>
-	<div class="document-editor__editable"></div>
+	<div class="document-editor__editable-container">
+		<div class="document-editor__editable">
+			<h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2>
+			<h3 style="text-align:center;">Welcome letter</h3>
+
+			<p>Dear Guest,</p>
+			<p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
+			<p>Please find below the full schedule of the event.</p>
+
+			<ul>
+				<li>9:30 AM - 11:30 AM	Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></li>
+				<li>1:00 PM - 3:00 PM	Pappardelle al pomodoro - live cooking session with <strong>Rita Fresco</strong></li>
+				<li>5:00 PM - 8:00 PM	Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></li>
+			</ul>
+
+			<blockquote>
+				<p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>
+
+				<p>Angelina Calvino, food journalist</p>
+			</blockquote>
+
+			<p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk at least <strong>half an hour earlier</strong> to make sure that the registration process goes as smoothly as possible.</p>
+
+			<p>We look forward to welcoming you to the event.</p>
+
+			<p><strong>Victoria Valc</strong></p>
+			<p><strong>Event Manager</strong></p>
+			<p><strong>Bilancino Hotel</strong></p>
+		</div>
+	</div>
 </div>
 </div>
 
 
 <style>
 <style>
@@ -35,7 +64,7 @@
 	}
 	}
 
 
 	/* Make the editable container look like the inside of a native word processor app. */
 	/* Make the editable container look like the inside of a native word processor app. */
-	.document-editor__editable {
+	.document-editor__editable-container {
 		padding: calc( 2 * var(--ck-spacing-large) );
 		padding: calc( 2 * var(--ck-spacing-large) );
 		background: var(--ck-color-base-foreground);
 		background: var(--ck-color-base-foreground);
 
 
@@ -43,9 +72,9 @@
 		overflow-y: scroll;
 		overflow-y: scroll;
 	}
 	}
 
 
-	.document-editor__editable .ck-editor__editable {
+	.document-editor__editable-container .ck-editor__editable {
 		/* Set the dimensions of the "page". */
 		/* Set the dimensions of the "page". */
-		width: 15cm;
+		width: 15.8cm;
 		min-height: 21cm;
 		min-height: 21cm;
 
 
 		/* Keep the "page" off the boundaries of the container. */
 		/* Keep the "page" off the boundaries of the container. */
@@ -63,7 +92,7 @@
 	}
 	}
 
 
 	/* Override the page's width in the "Examples" section which is wider. */
 	/* Override the page's width in the "Examples" section which is wider. */
-	.main__content-wide .document-editor__editable .ck-editor__editable {
+	.main__content-wide .document-editor__editable-container .ck-editor__editable {
 		width: 18cm;
 		width: 18cm;
 	}
 	}
 
 
@@ -139,37 +168,4 @@
 		margin-left: calc( 2 * var(--ck-spacing-large) );
 		margin-left: calc( 2 * var(--ck-spacing-large) );
 		margin-right: calc( 2 * var(--ck-spacing-large) );
 		margin-right: calc( 2 * var(--ck-spacing-large) );
 	}
 	}
-
-	.document-editor__data {
-		display: none;
-	}
 </style>
 </style>
-
-<div class="document-editor__data">
-	<h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2>
-	<h3 style="text-align:center;">Welcome letter</h3>
-
-	<p>Dear Guest,</p>
-	<p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
-	<p>Please find below the full schedule of the event.</p>
-
-	<ul>
-		<li>9:30 AM - 11:30 AM	Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></li>
-		<li>1:00 PM - 3:00 PM	Pappardelle al pomodoro - live cooking session with <strong>Rita Fresco</strong></li>
-		<li>5:00 PM - 8:00 PM	Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></li>
-	</ul>
-
-	<blockquote>
-		<p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>
-
-		<p>Angelina Calvino, food journalist</p>
-	</blockquote>
-
-	<p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk at least <strong>half an hour earlier</strong> to make sure that the registration process goes as smoothly as possible.</p>
-
-	<p>We look forward to welcoming you to the event.</p>
-
-	<p><strong>Victoria Valc</strong></p>
-	<p><strong>Event Manager</strong></p>
-	<p><strong>Bilancino Hotel</strong></p>
-</div>

+ 5 - 4
docs/_snippets/examples/document-editor.js

@@ -9,13 +9,14 @@ import DecoupledDocumentEditor from '@ckeditor/ckeditor5-build-decoupled-documen
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 
 DecoupledDocumentEditor
 DecoupledDocumentEditor
-	.create( document.querySelector( '.document-editor__data' ).innerHTML, {
-		toolbarContainer: document.querySelector( '.document-editor__toolbar' ),
-		editableContainer: document.querySelector( '.document-editor__editable' ),
-
+	.create( document.querySelector( '.document-editor__editable' ), {
 		cloudServices: CS_CONFIG
 		cloudServices: CS_CONFIG
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
+		const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
+
+		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
+
 		window.editor = editor;
 		window.editor = editor;
 	} )
 	} )
 	.catch( err => {
 	.catch( err => {

+ 17 - 15
docs/builds/guides/quick-start.md

@@ -175,15 +175,13 @@ Call the {@link module:editor-balloon/ballooneditor~BalloonEditor#create `Balloo
 
 
 ## Document editor
 ## Document editor
 
 
-Load the decoupled document editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
+Load the document editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
 
 
 ```html
 ```html
 <script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/decoupled-document/ckeditor.js"></script>
 <script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/decoupled-document/ckeditor.js"></script>
 ```
 ```
 
 
-Call the {@link module:editor-decoupled/decouplededitor~DecoupledEditor#create `DecoupledDocumentEditor.create()`} method.
-
-The decoupled editor requires you to define the containers for the toolbar and editable using {@link module:core/editor/editorconfig~EditorConfig#toolbarContainer `config.toolbarContainer`} and {@link module:core/editor/editorconfig~EditorConfig#editableContainer `config.editableContainer`}.
+Call the {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledDocumentEditor.create()`} method. The decoupled editor requires you to inject the toolbar into DOM and the best place to do that is somewhere in the promise chain (e.g. one of the `then( () => { ... } )` blocks).
 
 
 <info-box>
 <info-box>
 	The following snippet will run the document editor but to make the most of it check out the {@link framework/guides/document-editor comprehensive tutorial} which explains step—by—step how to configure and style the the application for the best editing experience.
 	The following snippet will run the document editor but to make the most of it check out the {@link framework/guides/document-editor comprehensive tutorial} which explains step—by—step how to configure and style the the application for the best editing experience.
@@ -192,10 +190,11 @@ The decoupled editor requires you to define the containers for the toolbar and e
 ```html
 ```html
 <script>
 <script>
 	DecoupledDocumentEditor
 	DecoupledDocumentEditor
-		.create( '<p>The initial editor data</p>', {
-			// Define the containers for the toolbar and editable.
-			toolbarContainer: document.querySelector( '.toolbar-container' ),
-			editableContainer: document.querySelector( '.editable-container' )
+		.create( document.querySelector( '#editor' ) )
+		.then( editor => {
+			const toolbarContainer = document.querySelector( '#toolbar-container' );
+
+			toolbarContainer.appendChild( editor.ui.view.toolbar.element );
 		} )
 		} )
 		.catch( error => {
 		.catch( error => {
 			console.error( error );
 			console.error( error );
@@ -217,17 +216,20 @@ The decoupled editor requires you to define the containers for the toolbar and e
 	<h1>Document editor</h1>
 	<h1>Document editor</h1>
 
 
 	<!-- The toolbar will be rendered in this container -->
 	<!-- The toolbar will be rendered in this container -->
-	<div class="toolbar-container"></div>
+	<div id="toolbar-container"></div>
 
 
-	<!-- The editable will be rendered in this container -->
-	<div class="editable-container"></div>
+	<!-- This container will become the editable -->
+	<div id="editor">
+		<p>This is the initial editor content.</p>
+	</div>
 
 
 	<script>
 	<script>
 		DecoupledDocumentEditor
 		DecoupledDocumentEditor
-			.create( '<p>The initial editor data</p>', {
-				// Define the containers for the toolbar and editable.
-				toolbarContainer: document.querySelector( '.toolbar-container' ),
-				editableContainer: document.querySelector( '.editable-container' )
+			.create( document.querySelector( '#editor' ) )
+			.then( editor => {
+				const toolbarContainer = document.querySelector( '#toolbar-container' );
+
+				toolbarContainer.appendChild( editor.ui.view.toolbar.element );
 			} )
 			} )
 			.catch( error => {
 			.catch( error => {
 				console.error( error );
 				console.error( error );