Ver código fonte

Merge branch 'master' into t/494

Piotrek Koszuliński 7 anos atrás
pai
commit
e55fd63138

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

@@ -1,6 +1,35 @@
 <div class="document-editor">
 	<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>
 
 <style>
@@ -35,7 +64,7 @@
 	}
 
 	/* 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) );
 		background: var(--ck-color-base-foreground);
 
@@ -43,9 +72,9 @@
 		overflow-y: scroll;
 	}
 
-	.document-editor__editable .ck-editor__editable {
+	.document-editor__editable-container .ck-editor__editable {
 		/* Set the dimensions of the "page". */
-		width: 15cm;
+		width: 15.8cm;
 		min-height: 21cm;
 
 		/* 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. */
-	.main__content-wide .document-editor__editable .ck-editor__editable {
+	.main__content-wide .document-editor__editable-container .ck-editor__editable {
 		width: 18cm;
 	}
 
@@ -139,37 +168,4 @@
 		margin-left: calc( 2 * var(--ck-spacing-large) );
 		margin-right: calc( 2 * var(--ck-spacing-large) );
 	}
-
-	.document-editor__data {
-		display: none;
-	}
 </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';
 
 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
 	} )
 	.then( editor => {
+		const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
+
+		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
+
 		window.editor = editor;
 	} )
 	.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
 
-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
 <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>
 	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
 <script>
 	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 => {
 			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>
 
 	<!-- 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>
 		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 => {
 				console.error( error );