Selaa lähdekoodia

Merge branch 'stable'

Piotrek Koszuliński 7 vuotta sitten
vanhempi
commit
400a031312

+ 28 - 27
README.md

@@ -37,13 +37,14 @@ A set of ready to use rich text editors created with a powerful framework. Made
 
 ### CKEditor 5 Builds
 
-CKEditor 5 Builds are a set of ready to use rich text editors. Every "build" provides a single type of editor with a set of features and a default configuration.
+CKEditor 5 Builds are a set of ready-to-use rich text editors. Every "build" provides a single type of editor with a set of features and a default configuration.
 
 The following CKEditor 5 Builds are currently available:
 
 * [Classic editor](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html#classic-editor)
 * [Inline editor](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html#inline-editor)
 * [Balloon editor](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html#balloon-editor)
+* [Document editor](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html#document-editor)
 
 #### Example
 
@@ -78,7 +79,7 @@ Call the [`ClassicEditor.create()`](https://docs.ckeditor.com/ckeditor5/latest/a
 
 You’re ready to go!
 
-To find out how to start with other builds please go to the [quick start section of CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html).
+To find out how to start with other builds check the [Quick start guide in the CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html).
 
 ### CKEditor 5 Framework
 
@@ -109,21 +110,21 @@ The main development repository of CKEditor 5 is located at [https://github.com/
 
 ### Development
 
-CKEditor 5 is a modular, multi-package, multi-repository project. It consists of a several packages which create the editing framework, based on which the feature packages are implemented.
+CKEditor 5 is a modular, multi-package, multi-repository project. It consists of several packages that create the editing framework, based on which the feature packages are implemented.
 
 The [ckeditor5](https://github.com/ckeditor/ckeditor5) repository is the place that centralizes the development of CKEditor 5. It bundles different packages into a single place, adding the necessary helper tools for the development workflow, like the builder and the test runner. [Basic information on how to set up the development environment](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/contributing/development-environment.html) can be found in the documentation.
 
 ### Reporting issues and feature requests
 
-Each repository independently handles its issues. However, it's recommended to report issues in [this repository](https://github.com/ckeditor/ckeditor5/issues) unless you know to which specific repository the issue belongs.
+Each repository handles its issues independently. However, it is recommended to report issues in [this repository](https://github.com/ckeditor/ckeditor5/issues) unless you know to which specific repository the issue belongs.
 
-Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/getting-support.html) page.
+Read more on the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/getting-support.html) page.
 
 ## Releases
 
-The latest five releases:
+The five latest releases:
 
-* [Beta release of CKEditor 5 v1.0.0](https://ckeditor.com/blog/CKEditor-5-v1.0.0-beta-released/) (<time datetime="2018-04-10T10:12:43Z"><i>Apr 10, 2017</i></time>)
+* [Beta release of CKEditor 5 v1.0.0](https://ckeditor.com/blog/CKEditor-5-v1.0.0-beta-released/) (<time datetime="2018-04-10T12:12:00Z"><i>Apr 10, 2018</i></time>)
 * [Second alpha release of CKEditor 5 v1.0.0](https://ckeditor.com/blog/Second-alpha-release-of-CKEditor-5-v1.0.0/) (<time datetime="2017-11-14T12:52:18Z"><i>Nov 14, 2017</i></time>)
 * [First alpha release of CKEditor 5 v1.0.0](https://ckeditor.com/blog/First-alpha-release-of-CKEditor-5-v1.0.0/) (<time datetime="2017-10-03T13:09:29Z"><i>Oct 3, 2017</i></time>)
 * [11th developer preview of CKEditor 5](https://ckeditor.com/blog/11th-developer-preview-of-CKEditor-5-available/) (<time datetime="2017-09-03T19:35:48Z"><i>Sep 3, 2017</i></time>)
@@ -201,7 +202,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-upload"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-upload.svg" alt="@ckeditor/ckeditor5-upload npm package badge"></a>
 	</td>
 	<td>
-		Introduces the file upload utilities.
+		The file upload utilities.
 	</td>
 </tr>
 
@@ -213,7 +214,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-widget"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-widget.svg" alt="@ckeditor/ckeditor5-widget npm package badge"></a>
 	</td>
 	<td>
-		Introduces the widget API.
+		The widget API.
 	</td>
 </tr>
 
@@ -315,7 +316,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-adapter-ckfinder"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-adapter-ckfinder.svg" alt="@ckeditor/ckeditor5-adapter-ckfinder npm package badge"></a>
 	</td>
 	<td>
-		Introduces the <a href="https://ckeditor.com/ckeditor-4/ckfinder/">CKFinder</a> adapter for features which require upload capabilities.
+		The <a href="https://ckeditor.com/ckeditor-4/ckfinder/">CKFinder</a> adapter for features which require upload capabilities.
 	</td>
 </tr>
 
@@ -327,7 +328,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-alignment"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-alignment.svg" alt="@ckeditor/ckeditor5-alignment npm package badge"></a>
 	</td>
 	<td>
-		Introduces the text alignment feature.
+		The text alignment feature.
 	</td>
 </tr>
 
@@ -339,7 +340,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-autoformat"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-autoformat.svg" alt="@ckeditor/ckeditor5-autoformat npm package badge"></a>
 	</td>
 	<td>
-		Introduces the autoformatting feature. Replaces predefined characters with a corresponding format (e.g. <code>**foo**</code> becomes bolded <code>&lt;strong&gt;foo&lt;/strong&gt;</code>).
+		The autoformatting feature. Replaces predefined characters with a corresponding format (e.g. <code>**foo**</code> becomes bold <code>&lt;strong&gt;foo&lt;/strong&gt;</code>).
 	</td>
 </tr>
 
@@ -351,7 +352,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-basic-styles.svg" alt="@ckeditor/ckeditor5-basic-styles npm package badge"></a>
 	</td>
 	<td>
-		Introduces the bold, italic, underline and code features.
+		The bold, italic, underline and code features.
 	</td>
 </tr>
 
@@ -363,7 +364,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-block-quote"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-block-quote.svg" alt="@ckeditor/ckeditor5-block-quote npm package badge"></a>
 	</td>
 	<td>
-		Introduces the block quote feature.
+		The block quote feature.
 	</td>
 </tr>
 
@@ -375,7 +376,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-clipboard"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-clipboard.svg" alt="@ckeditor/ckeditor5-clipboard npm package badge"></a>
 	</td>
 	<td>
-		Introduces the clipboard integration.
+		The clipboard integration.
 	</td>
 </tr>
 
@@ -387,7 +388,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-enter"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-enter.svg" alt="@ckeditor/ckeditor5-enter npm package badge"></a>
 	</td>
 	<td>
-		Introduces the Enter key feature.
+		The <kbd>Enter</kbd> key feature.
 	</td>
 </tr>
 
@@ -399,7 +400,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-easy-image"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-easy-image.svg" alt="@ckeditor/ckeditor5-easy-image npm package badge"></a>
 	</td>
 	<td>
-		Introduces Easy Image with Cloud Services feature.
+		Easy Image with CKEditor Cloud Services feature.
 	</td>
 </tr>
 
@@ -411,7 +412,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-font"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-font.svg" alt="@ckeditor/ckeditor5-font npm package badge"></a>
 	</td>
 	<td>
-		Introduces the font size and font family features.
+		The font size and font family features.
 	</td>
 </tr>
 
@@ -423,7 +424,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-heading"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-heading.svg" alt="@ckeditor/ckeditor5-heading npm package badge"></a>
 	</td>
 	<td>
-		Introduces the heading feature.
+		The heading feature.
 	</td>
 </tr>
 
@@ -435,7 +436,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-highlight"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-highlight.svg" alt="@ckeditor/ckeditor5-highlight npm package badge"></a>
 	</td>
 	<td>
-		Introduces the highlight feature (markers and pens).
+		The highlight feature (markers and pens).
 	</td>
 </tr>
 
@@ -447,7 +448,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-image"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-image.svg" alt="@ckeditor/ckeditor5-image npm package badge"></a>
 	</td>
 	<td>
-		Introduces the image feature. Supports image styles and captioning.
+		The image feature. Supports image styles and captioning.
 	</td>
 </tr>
 
@@ -459,7 +460,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-link"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-link.svg" alt="@ckeditor/ckeditor5-link npm package badge"></a>
 	</td>
 	<td>
-		Introduces the link feature.
+		The link feature.
 	</td>
 </tr>
 
@@ -471,7 +472,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-list"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-list.svg" alt="@ckeditor/ckeditor5-list npm package badge"></a>
 	</td>
 	<td>
-		Introduces numbered and bulleted lists feature.
+		The numbered and bulleted lists feature.
 	</td>
 </tr>
 
@@ -483,7 +484,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-markdown-gfm"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-markdown-gfm.svg" alt="@ckeditor/ckeditor5-markdown-gfm npm package badge"></a>
 	</td>
 	<td>
-		Introduces GitHub-flavored Markdown data processor.
+		The GitHub-flavored Markdown data processor.
 	</td>
 </tr>
 
@@ -495,7 +496,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-paragraph"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-paragraph.svg" alt="@ckeditor/ckeditor5-paragraph npm package badge"></a>
 	</td>
 	<td>
-		Introduces the paragraph feature.
+		The paragraph feature.
 	</td>
 </tr>
 
@@ -507,7 +508,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-typing"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-typing.svg" alt="@ckeditor/ckeditor5-typing npm package badge"></a>
 	</td>
 	<td>
-		Introduces typing and deleting features.
+		The typing and deleting features.
 	</td>
 </tr>
 
@@ -519,7 +520,7 @@ For more CKEditor 5 release blog posts [browse the CKEditor blog](https://ckedit
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-undo"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-undo.svg" alt="@ckeditor/ckeditor5-undo npm package badge"></a>
 	</td>
 	<td>
-		Introduces the undo feature.
+		The undo feature.
 	</td>
 </tr>
 

+ 38 - 4
docs/builds/guides/integration/basic-api.md

@@ -8,14 +8,19 @@ order: 20
 
 # Basic API
 
-Each CKEditor 5 build provides a different class that handles the creation of editor instances:
+Each CKEditor 5 **build** provides a different **editor class** that handles the creation of editor instances:
 
 * Classic editor &ndash; {@link module:editor-classic/classiceditor~ClassicEditor}
 * Inline editor &ndash; {@link module:editor-inline/inlineeditor~InlineEditor}
 * Balloon editor &ndash; {@link module:editor-balloon/ballooneditor~BalloonEditor}
+* Document editor &ndash; {@link module:editor-decoupled/decouplededitor~DecoupledEditor}
 
 Most of the examples in the documentation use the `ClassicEditor` class, but things should work in a similar way with other builds.
 
+<info-box>
+	A CKEditor 5 build compiles a specific editor class and a set of plugins. Using builds is the simplest way to include editor in your application, but you can also {@link builds/guides/integration/advanced-setup#scenario-2-building-from-source use the editor classes and plugins directly} for grater flexibility.
+</info-box>
+
 ## Creating an editor
 
 Regardless of the chosen build, creating an editor is done using the static `create()` method.
@@ -70,7 +75,7 @@ InlineEditor
 
 ### Example – Balloon editor
 
-The procedure is the same as for Inline editor &mdash; the only difference is that you need to use the {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} method.
+The procedure is the same as for Inline editor. The only difference is that you need to use the {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} method.
 
 Add an element where CKEditor should initialize to your page:
 
@@ -93,8 +98,37 @@ BalloonEditor
 	} );
 ```
 
+### Example – Decoupled editor
+
+Add the elements where CKEditor should initialize the toolbar and the editable to your page:
+
+```html
+<!-- The toolbar will be rendered in this container. -->
+<div id="toolbar-container"></div>
+
+<!-- This container will become the editable. -->
+<div id="editor">
+	<p>This is the initial editor content.</p>
+</div>
+```
+
+Then call {@link module:editor-decoupled/decouplededitor~DecoupledEditor#create `DecoupledEditor.create()`} method to create a decoupled editor instance with the toolbar and the editable in two separate containers:
+
+```js
+DecoupledEditor
+	.create( document.querySelector( '#editor' ) )
+	.then( editor => {
+		const toolbarContainer = document.querySelector( '#toolbar-container' );
+
+		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
+	} )
+	.catch( error => {
+		console.error( error );
+	} );
+```
+
 <info-box tip>
-	Every editor class may accept different parameters in the `create()` method and may handle the initialization differently. For instance, the classic editor will replace a given element with an editor, while the inline editor will use the given element to initialize the editor on it. See each editor's documentation to learn the details.
+	Every editor class may accept different parameters in the `create()` method and may handle the initialization differently. For instance, classic editor will replace the given element with an editor, while inline editor will use the given element to initialize an editor on it. See each editor's documentation to learn the details.
 
 	The interface of the editor class is not enforced either. Since different implementations of editors may vary heavily in terms of functionality, the editor class implementers have full freedom regarding the API. Therefore, the examples in this guide may not work with some editor classes.
 </info-box>
@@ -143,7 +177,7 @@ Because builds are distributed as [UMD modules](https://github.com/umdjs/umd), e
 For example:
 
 ```js
-// In CommonJS environment.
+// In the CommonJS environment.
 const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
 ClassicEditor.create( ... ); // [Function]
 

+ 3 - 3
docs/builds/guides/integration/installation.md

@@ -50,9 +50,9 @@ Extract the `.zip` file into a dedicated directory inside your project. It is re
 
 #### Included files
 
-* `ckeditor.js` – the ready-to-use editor bundle, containing the editor and all plugins.
-* `ckeditor.js.map` – the source map for the editor bundle.
-* `translations/`  editor UI translations (see {@link features/ui-language Setting UI language}).
+* `ckeditor.js` &ndash; The ready-to-use editor bundle, containing the editor and all plugins.
+* `ckeditor.js.map` &ndash; The source map for the editor bundle.
+* `translations/` &ndash; The editor UI translations (see {@link features/ui-language Setting UI language}).
 * `README.md` and `LICENSE.md`
 
 ## Loading the API

+ 1 - 1
docs/builds/guides/migrate.md

@@ -550,7 +550,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
 		</tr>
 		<tr>
 			<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-toolbarLocation">toolbarLocation</a></td>
-			<td>N/A. Can be achieved by writing an editor with a customized UI view.</td>
+			<td>N/A. Can be achieved by writing an editor with a customized UI view. See also the {@link module:editor-decoupled/decouplededitor~DecoupledEditor <code>DecoupledEditor</code>} implementation.</td>
 		</tr>
 		<tr>
 			<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-toolbarStartupExpanded">toolbarStartupExpanded</a></td>

+ 1 - 1
docs/features/image-upload.md

@@ -37,7 +37,7 @@ Be sure to use image upload plugins with support for responsive images to enjoy
 
 To make enabling image upload in CKEditor 5 a breeze, by default all builds include the {@link module:easy-image/easyimage~EasyImage `EasyImage` plugin}, which integrates with the Easy Image service provided by [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/). Enabling it is straightforward and the results are immediate:
 
-1. Follow {@link @cs guides/quick-start Cloud Services - Quick start} guide to setup an account.
+1. Follow {@link @cs guides/easy-image/quick-start Easy Image - Quick start} guide to setup an account.
 2. Configure CKEditor (see {@link module:cloud-services/cloudservices~CloudServicesConfig `CloudServicesConfig`}):
 
 	```js

+ 6 - 0
docs/framework/guides/quick-start.md

@@ -113,6 +113,12 @@ Based on these packages you can create a simple application.
 	This guide is using the ES6 modules syntax. If you are not familiar with it, check out this [article](http://exploringjs.com/es6/ch_modules.html).
 </info-box>
 
+<info-box warning>
+	Note that in this guide we use the editor class directly (i.e. we use `@ckeditor/ckeditor5-editor-classic` instead of `@ckeditor/ckeditor5-build-classic`).
+
+	We do not use any of the {@link builds/guides/overview builds} because adding new plugins to them requires rebuilding them anyway. This can be done by {@link builds/guides/development/installing-plugins customizing a build} or by including CKEditor 5 source into your application (like in this guide).
+</info-box>
+
 ```js
 // app.js