8
0
Просмотр исходного кода

Merge pull request #892 from ckeditor/t/ckeditor5-build-decoupled-document/1

Docs: Added some docs and examples of the decoupled document editor (see ckeditor/ckeditor5-build-decoupled-document#1).
Piotrek Koszuliński 7 лет назад
Родитель
Сommit
e12a216514

+ 146 - 0
docs/_snippets/examples/document-editor.html

@@ -0,0 +1,146 @@
+<div class="document-editor ck-reset ck-rounded-corners">
+	<div class="document-editor__toolbar ck-reset_all"></div>
+	<div class="document-editor__editable"></div>
+</div>
+
+<style>
+	.document-editor {
+		border: 1px solid var(--ck-color-base-border);
+		border-radius: var(--ck-border-radius);
+		max-height: 700px;
+
+		display: flex;
+		flex-flow: column nowrap;
+		overflow: hidden;
+	}
+
+	.document-editor__toolbar {
+		z-index: 1;
+		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+		border-bottom: 1px solid var(--ck-color-toolbar-border);
+	}
+
+	.document-editor__toolbar .ck-toolbar {
+		border: 0;
+		border-radius: 0;
+	}
+
+	.document-editor__editable {
+		padding: calc(2*var(--ck-spacing-large));
+		background: var(--ck-color-base-foreground);
+		overflow-y: scroll;
+	}
+
+	.document-editor__editable .ck-editor__editable {
+		width: 15.8cm;
+		min-height: 21cm;
+
+		padding: 1cm 2cm 2cm;
+		margin: 0.5cm auto;
+
+		border: 1px #D3D3D3 solid;
+		border-radius: var(--ck-border-radius);
+		background: white;
+		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+
+		margin: 0 auto;
+	}
+
+	.document-editor .ck-content,
+	.document-editor .ck-heading-dropdown .ck-list {
+		font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
+	}
+
+	.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));
+		min-width: 8em;
+	}
+
+	.document-editor .ck-content h2,
+	.document-editor .ck-heading-dropdown .ck-heading_heading1 {
+		font-size: 2.18em;
+	}
+
+	.document-editor .ck-content h2 {
+		line-height: 1.37em;
+		padding-top: 0.342em;
+		margin-bottom: 0.142em;
+	}
+
+	.document-editor .ck-content h3,
+	.document-editor .ck-heading-dropdown .ck-heading_heading2 {
+		font-size: 1.75em;
+		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);
+	}
+
+	.document-editor .ck-content h3 {
+		line-height: 1.86em;
+		padding-top: 0.171em;
+		margin-bottom: 0.357em;
+	}
+
+	.document-editor .ck-content h4,
+	.document-editor .ck-heading-dropdown .ck-heading_heading3 {
+		font-size: 1.31em;
+	}
+
+	.document-editor .ck-content h4 {
+		line-height: 1.24em;
+		padding-top: 0.286em;
+		margin-bottom: 0.952em;
+	}
+
+	.document-editor .ck-content p,
+	.document-editor .ck-heading-dropdown .ck-heading_paragraph {
+		font-size: 1.00em;
+	}
+
+	.document-editor .ck-content p {
+		line-height: 1.63em;
+		padding-top: 0.500em;
+		margin-bottom: 1.13em;
+	}
+
+	.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));
+	}
+
+	.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>

+ 23 - 0
docs/_snippets/examples/document-editor.js

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import DecoupledDocumentEditor from '@ckeditor/ckeditor5-build-decoupled-document/src/ckeditor';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config';
+
+DecoupledDocumentEditor
+	.create( document.querySelector( '.document-editor__data' ).innerHTML, {
+		toolbarContainer: '.document-editor__toolbar',
+		editableContainer: '.document-editor__editable',
+
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

BIN
docs/assets/img/editor-document.png


+ 6 - 0
docs/assets/snippet-styles.css

@@ -88,6 +88,12 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 	font-size: 1.6rem;
 }
 
+/* examples/builds/document-editor.html */
+
+.live-snippet .document-editor {
+	margin: 1.5em 0;
+}
+
 .demo-row {
 	width: 100%;
 	display: -ms-flexbox;

+ 8 - 0
docs/builds/guides/overview.md

@@ -55,6 +55,14 @@ Balloon editor is very similar to inline editor. The difference between them is
 
 To try it out online, check the {@link examples/builds/balloon-editor balloon editor example}. Jump to {@link builds/guides/quick-start#balloon-editor quick start} to start using it.
 
+### Document editor
+
+The document editor is focused on rich text editing experience similar to the native word processors. It works best for creating documents which are usually later printed or exported to PDF files.
+
+{@img assets/img/editor-document.png 786 Screenshot of the user interface of the document editor.}
+
+To try it out online, check the {@link examples/builds/document-editor document editor example}. Jump to {@link builds/guides/quick-start#document-editor quick start} to start using it.
+
 ## Build customization
 
 Every build comes with a default set of features and their default configuration. Although the builds try to fit many use cases, they may still need to be adjusted in some integrations. The following modifications are possible:

+ 66 - 0
docs/builds/guides/quick-start.md

@@ -173,6 +173,72 @@ Call the {@link module:editor-balloon/ballooneditor~BalloonEditor#create `Balloo
 </html>
 ```
 
+## Document editor
+
+Load the decoupled 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`}.
+
+<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.
+</info-box>
+
+```html
+<script>
+	DecoupledDocumentEditor
+		.create( '<p>The initial editor data</p>', {
+			// Define the containers for the toolbar and editable.
+			// Use the document.querySelector-friendly strings here or references to existing DOM elements.
+			toolbarContainer: '.toolbar-container',
+			editableContainer: '.editable-container'
+		} )
+		.catch( error => {
+			console.error( error );
+		} );
+</script>
+```
+
+### Example
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>CKEditor 5 – document editor</title>
+	<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/decoupled-document/ckeditor.js"></script>
+</head>
+<body>
+	<h1>Document editor</h1>
+
+	<!-- The toolbar will be rendered in this container -->
+	<div class="toolbar-container"></div>
+
+	<!-- The editable will be rendered in this container -->
+	<div class="editable-container"></div>
+
+	<script>
+		DecoupledDocumentEditor
+			.create( '<p>The initial editor data</p>', {
+				// Define the containers for the toolbar and editable.
+				// Use the document.querySelector-friendly strings here or references to existing DOM elements.
+				toolbarContainer: '.toolbar-container',
+				editableContainer: '.editable-container'
+			} )
+			.catch( error => {
+				console.error( error );
+			} );
+	</script>
+</body>
+</html>
+```
+
 ## Next steps
 
 Check the {@link builds/guides/integration/configuration Configuration guide} to learn how to configure the editor – e.g. change the default toolbar.

+ 12 - 0
docs/examples/builds/document-editor.md

@@ -0,0 +1,12 @@
+---
+category: examples-builds
+order: 40
+---
+
+# Document editor
+
+The editor in this example is a [feature–rich](https://github.com/ckeditor/ckeditor5#core-libraries) build focused on rich text editing experience similar to the native word processors. It works best for creating documents which are usually later printed or exported to PDF files.
+
+See the {@link framework/guides/document-editor tutorial} to learn how to create this kind of an editor (and similar) with a custom UI layout on top of [ckeditor5-editor-decoupled](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-decoupled).
+
+{@snippet examples/document-editor}