Browse Source

Merge branch 'master' into t/ckeditor5-dev/427

Kamil Piechaczek 7 năm trước cách đây
mục cha
commit
e442c87b7e

+ 4 - 1
.travis.yml

@@ -8,13 +8,16 @@ addons:
       - google-chrome-stable
 language: node_js
 node_js:
-  - "6"
+  - "8"
 cache:
   - node_modules
 before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+  - npm config set package-lock false
+  - npm i -g npm@^5.7.1
 install:
+  - npm install
   - npm install mgit2 lerna
   - mgit bootstrap --resolver-url-template="https://github.com/\${ path }.git"
   - lerna bootstrap

+ 5 - 5
CHANGELOG.md

@@ -10,9 +10,9 @@ Internal changes only (updated dependencies, documentation, etc.).
 
 ### Release notes
 
-This is a major releases that introduces two new plugins ([autosave](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/saving-data.html) and [block toolbar](https://docs.ckeditor.com/ckeditor5/latest/features/blocktoolbar.html)), many smaller features, dozens of bug fixes and a couple of infrastructure changes (an upgrade to `webpack@4` and simplified structure of build repositories). Additionally, the `Editor#element` property was renamed to `Editor#sourceElement` and the `Editor#updateElement()` method was renamed to `Editor#updateSourceElement()`.
+This is a major releases that introduces two new plugins ([autosave](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html) and [block toolbar](https://ckeditor.com/docs/ckeditor5/latest/features/blocktoolbar.html)), many smaller features, dozens of bug fixes and a couple of infrastructure changes (an upgrade to `webpack@4` and simplified structure of build repositories). Additionally, the `Editor#element` property was renamed to `Editor#sourceElement` and the `Editor#updateElement()` method was renamed to `Editor#updateSourceElement()`.
 
-If you maintain a [custom build of CKEditor 5](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/development/custom-builds.html) or [integrate CKEditor 5 from source](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source), we recommend reading the [migration guide](https://github.com/ckeditor/ckeditor5/issues/1136).
+If you maintain a [custom build of CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html) or [integrate CKEditor 5 from source](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source), we recommend reading the [migration guide](https://github.com/ckeditor/ckeditor5/issues/1136).
 
 Blog post is coming soon...
 
@@ -234,11 +234,11 @@ Major releases (contain breaking changes):
 
 ### Release notes
 
-This is a minor release that mainly focuses on stabilizing the [two-step caret movement around links](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/whats-new.html#caret-movement-around-links).
+This is a minor release that mainly focuses on stabilizing the [two-step caret movement around links](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/whats-new.html#caret-movement-around-links).
 
-A breaking change was introduced in the [document editor build](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html#document-editor) – refer to its [changelog](https://github.com/ckeditor/ckeditor5-build-decoupled-document/releases/tag/v1.0.0-beta.4) for more information.
+A breaking change was introduced in the [document editor build](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#document-editor) – refer to its [changelog](https://github.com/ckeditor/ckeditor5-build-decoupled-document/releases/tag/v1.0.0-beta.4) for more information.
 
-Finally, two new plugins were introduced – [`ParagraphButtonUI`](https://docs.ckeditor.com/ckeditor5/latest/api/module_paragraph_paragraphbuttonui-ParagraphButtonUI.html) and [`HeadingButtonsUI`](https://docs.ckeditor.com/ckeditor5/latest/api/module_heading_headingbuttonsui-HeadingButtonsUI.html) which make it possible to replace the `headings` dropdown with separate buttons for each heading level.
+Finally, two new plugins were introduced – [`ParagraphButtonUI`](https://ckeditor.com/docs/ckeditor5/latest/api/module_paragraph_paragraphbuttonui-ParagraphButtonUI.html) and [`HeadingButtonsUI`](https://ckeditor.com/docs/ckeditor5/latest/api/module_heading_headingbuttonsui-HeadingButtonsUI.html) which make it possible to replace the `headings` dropdown with separate buttons for each heading level.
 
 PS. The `1.0.0-beta.3` version number was skipped in order to align the project version number which diverged from builds version numbers
 

+ 32 - 20
README.md

@@ -1,4 +1,4 @@
-CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20CKEditor%205%20on%20GitHub%20&url=https://github.com/ckeditor/ckeditor5)
+CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20CKEditor%205%20on%20GitHub&url=https%3A%2F%2Fgithub.com%2Fckeditor%2Fckeditor5)
 ===================================
 
 [![npm version](https://badge.fury.io/js/ckeditor5.svg)](https://www.npmjs.com/package/ckeditor5)
@@ -14,13 +14,13 @@ CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?styl
 
 A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.
 
-![CKEditor 5 Classic editor build screenshot](https://c.cksource.com/a/1/img/npm/ckeditor%205%20classic%20screeshot.png)
+![CKEditor 5 Classic rich text editor build screenshot](https://c.cksource.com/a/1/img/npm/ckeditor%205%20classic%20screeshot.png)
 
 ## ⚠ This package does not contain any source code
 
-CKEditor 5 is distributed as [four ready-to-use builds](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html#available-builds) which you can [install from npm](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/installation.html#npm).
+CKEditor 5 is distributed as [four ready-to-use rich text editor builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#available-builds) which you can [install from npm](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html#npm).
 
-You can also [customize the existing builds](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/development/custom-builds.html) or build your own editors and features by using the [CKEditor 5 Framework](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/overview.html).
+You can also [customize the existing builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html) or build your own editors and features by using the [CKEditor 5 Framework](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html).
 
 ## Table of contents
 
@@ -49,10 +49,10 @@ CKEditor 5 Builds are a set of ready-to-use rich text editors. Every "build" pro
 
 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)
+* [Classic editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor)
+* [Inline editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#inline-editor)
+* [Balloon editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor)
+* [Document editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#document-editor)
 
 #### Example
 
@@ -67,13 +67,13 @@ In your HTML page add an element that CKEditor should replace:
 <textarea name="content" id="editor"></textarea>
 ```
 
-Load the classic editor build (you can choose between [CDN](https://cdn.ckeditor.com/#ckeditor5), [npm](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/installation.html#npm) and [zip downloads](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/installation.html#zip-download)):
+Load the classic editor build (you can choose between [CDN](https://cdn.ckeditor.com/#ckeditor5), [npm](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html#npm) and [zip downloads](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html#zip-download)):
 
 ```html
 <script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
 ```
 
-Call the [`ClassicEditor.create()`](https://docs.ckeditor.com/ckeditor5/latest/api/module_editor-classic_classiceditor-ClassicEditor.html#create) method:
+Call the [`ClassicEditor.create()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-classic_classiceditor-ClassicEditor.html#static-function-create) method:
 
 ```html
 <script>
@@ -87,23 +87,23 @@ 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 check the [Quick start guide in the 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://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html).
 
 ### CKEditor 5 Framework
 
 CKEditor 5 Builds allow you to quickly and easily initialize one of the many types of editors in your application. At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions.
 
-To find out how to start building your own editor from scratch go to [CKEditor 5 Framework overview section of CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/overview.html).
+To find out how to start building your own editor from scratch go to [CKEditor 5 Framework overview section of CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html).
 
 ## Documentation and FAQ
 
-To find out more see the following [CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/index.html) sections:
+To find out more see the following [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/index.html) sections:
 
-* [API documentation](https://docs.ckeditor.com/ckeditor5/latest/api/index.html)
-* [CKEditor 5 Framework documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/index.html)
-* [CKEditor 5 Builds documentation](https://docs.ckeditor.com/ckeditor5/latest/builds/index.html)
-* [CKEditor 5 Features documentation](https://docs.ckeditor.com/ckeditor5/latest/features/index.html)
-* [CKEditor 5 Examples](https://docs.ckeditor.com/ckeditor5/latest/examples/index.html)
+* [API documentation](https://ckeditor.com/docs/ckeditor5/latest/api/index.html)
+* [CKEditor 5 Framework documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/index.html)
+* [CKEditor 5 Builds documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/index.html)
+* [CKEditor 5 Features documentation](https://ckeditor.com/docs/ckeditor5/latest/features/index.html)
+* [CKEditor 5 Examples](https://ckeditor.com/docs/ckeditor5/latest/examples/index.html)
 
 The documentation is far from being complete and will be constantly evolving (as will the editor) until it is ready for v1.0.0.
 
@@ -120,13 +120,13 @@ The main development repository of CKEditor 5 is located at [https://github.com/
 
 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.
+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://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/development-environment.html) can be found in the documentation.
 
 ### Reporting issues and feature requests
 
 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 on the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/getting-support.html) page.
+Read more on the [Support](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/getting-support.html) page.
 
 ## Releases
 
@@ -500,6 +500,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 	</td>
 </tr>
 
+<tr>
+	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-media-embed"><code>@ckeditor/ckeditor5-media-embed</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-media-embed"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-media-embed.svg" alt="@ckeditor/ckeditor5-media-embed npm package badge"></a>
+	</td>
+	<td>
+		The media embed feature.
+	</td>
+</tr>
+
 <tr>
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-paragraph"><code>@ckeditor/ckeditor5-paragraph</code></a>

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


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


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


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

@@ -18,6 +18,12 @@
 	margin-bottom: 0;
 }
 
+/* Override default Umberto's styles because they apply margins to media embed widgets with iframe
+previews breaking their structure. */
+.ck.ck-content iframe {
+	margin: initial;
+}
+
 /* Reset h1's styling – https://github.com/ckeditor/ckeditor5-heading/issues/86 */
 .ck.ck-content h1 {
 	display: block;
@@ -80,6 +86,16 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 	display: table;
 }
 
+/* https://github.com/ckeditor/ckeditor5/issues/1282 */
+.live-snippet .ck.ck-content .table p:first-child {
+	padding-top: 0;
+}
+
+/* https://github.com/ckeditor/ckeditor5/issues/1282 */
+.live-snippet .ck.ck-content .table p:last-child {
+	margin-bottom: 0;
+}
+
 #snippet-inline-editor .ck-content {
 	margin-bottom: 1rem;
 	padding: 2rem;

+ 4 - 2
docs/assets/styles.css

@@ -7,7 +7,7 @@
 	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
 	.main .main__content .main__content-inner,
 	.main .main__content-wide .main__content-inner {
-		width: 800px;
+		width: 840px;
 	}
 }
 
@@ -17,6 +17,8 @@
 	.main .main__content .main__content-inner,
 	.main .main__content-wide .main__content-inner {
 		max-width: 900px;
+		padding-left: 30px;
+		padding-right: 30px
 	}
 }
 
@@ -27,7 +29,7 @@
 	}
 
 	.main .main__content-wide .main__content-inner {
-		max-width: 800px;
+		max-width: 840px;
 	}
 }
 

+ 1 - 1
docs/builds/guides/development/custom-builds.md

@@ -34,7 +34,7 @@ In order to start developing CKEditor 5 you will require:
 Start with [forking](https://help.github.com/articles/fork-a-repo/) one of the official builds (it will serve as the starting point for your custom one) and then clone your fork:
 
 ```bash
-git clone -b stable https://github.com/<your-username>/ckeditor5-build-classic.git
+git clone -b stable git@github.com:<your-username>/ckeditor5-build-classic.git
 ```
 
 To make updating easier you may optionally add the original build repository to your Git remotes:

+ 12 - 7
docs/builds/guides/faq.md

@@ -46,8 +46,9 @@ To insert a new link at the current position, use the following snippet:
 
 ```js
 editor.model.change( writer => {
-    const insertPosition = editor.model.document.selection.getFirstPosition();
-    writer.insertText( 'CKEditor 5 rocks!', { linkHref: 'https://ckeditor.com/' }, insertPosition );
+	const insertPosition = editor.model.document.selection.getFirstPosition();
+
+	writer.insertText( 'CKEditor 5 rocks!', { linkHref: 'https://ckeditor.com/' }, insertPosition );
 } );
 ```
 
@@ -55,7 +56,7 @@ And to insert some plain text, you can use a slightly shorter one:
 
 ```js
 editor.model.change( writer => {
-    writer.insertText( 'Plain text', editor.model.document.selection.getFirstPosition() );
+	writer.insertText( 'Plain text', editor.model.document.selection.getFirstPosition() );
 } );
 ```
 
@@ -68,7 +69,7 @@ const content = '<p>A paragraph with <a href="https://ckeditor.com">some link</a
 const viewFragment = editor.data.processor.toView( content );
 const modelFragment = editor.data.toModel( viewFragment );
 
-editor.model.insertContent( modelFragment, editor.model.document.selection );
+editor.model.insertContent( modelFragment );
 ```
 
 ## What happened to the global `window.CKEDITOR`? How to list all instances of the editor?
@@ -77,13 +78,17 @@ By default, CKEditor 5 has no global registry of editor instances. But if necess
 
 ## How to enable image drag&drop and upload? Where should I start?
 
-Image features are enabled by default in all editor builds (also the image upload). See the {@link features/image Image} and {@link features/image-upload Image upload} feature guides to learn more.
+The {@link features/image Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters ({@link features/image-upload#easy-image Easy Image} or {@link module:adapter-ckfinder/uploadadapter~CKFinderAdapterConfig CKFinder adapter}) or {@link module:upload/filerepository~UploadAdapter implement and use your own upload adapter}.
+
+See the {@link features/image Image} and {@link features/image-upload Image upload} feature guides to learn more.
 
 ## How to use CKEditor 5 with frameworks (Angular, React, etc.)?
 
-The beta versions of official [Angular](https://github.com/ckeditor/ckeditor5-angular) and [React](https://github.com/ckeditor/ckeditor5-react) integrations are already available to try out and test. Your feedback will be most welcome!
+For the full list of official integrations see the {@link builds/guides/frameworks/overview#official-integrations "Official integrations"} section.
+
+If an official integration for the framework of your choice does not exist yet, make sure to read the {@link builds/guides/frameworks/overview "Integrating CKEditor 5 with JavaScript frameworks"} guide. CKEditor 5 offers a rich JavaScript API and ready to use builds which make it possible to use CKEditor 5 with whichever framework you need.
 
-We will be working on further integrations (and documentation) soon. Meanwhile, please refer to the dedicated [GitHub issue](https://github.com/ckeditor/ckeditor5/issues/599) for more information.
+We plan to provide more official integrations with time. [Your feedback on what should we work on next](https://github.com/ckeditor/ckeditor5/issues/1002) will be most welcome!
 
 ## How to get a fully–featured editor build (a.k.a. CKEditor 4 "Full Package")?
 

+ 305 - 0
docs/builds/guides/frameworks/angular.md

@@ -0,0 +1,305 @@
+---
+menu-title: Angular 2+ component
+category: builds-integration-frameworks
+order: 20
+---
+
+# Rich-text editor component for Angular 2+
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-angular.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular)
+
+CKEditor 5 consists of {@link builds/guides/overview ready-to-use editor builds} and {@link framework/guides/overview CKEditor 5 Framework} upon which the builds are based.
+
+Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5 only via builds. Integrating {@link builds/guides/integration/advanced-setup#scenario-2-building-from-source CKEditor 5 built from source} is not possible yet due to the lack of ability to [adjust webpack configuration in `angular-cli`](https://github.com/angular/angular-cli/issues/10618).
+
+<info-box>
+	While there is no support to integrate CKEditor 5 from source yet, you can still {@link builds/guides/development/custom-builds create a custom build of CKEditor 5} and include it in your Angular application.
+</info-box>
+
+## Quick start
+
+In your existing Angular project, install the [CKEditor 5 rich-text editor component for Angular 2+](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
+
+```bash
+npm install --save-dev @ckeditor/ckeditor5-angular
+```
+
+Install one of the {@link builds/guides/overview#available-builds official editor builds} or {@link builds/guides/development/custom-builds create a custom one} (e.g. if you want to install more plugins or customize something that cannot be controlled with the {@link builds/guides/integration/configuration editor configuration}).
+
+Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
+
+```bash
+npm install --save-dev @ckeditor/ckeditor5-build-classic
+```
+
+**Note:** You may need to allow external JavaScript in your project's `tsconfig.json` for the builds to work properly:
+
+```json
+"compilerOptions": {
+	"allowJs": true
+}
+```
+
+Now, add `CKEditorModule` to your application module imports:
+
+```ts
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+
+@NgModule( {
+	imports: [
+		...
+		CKEditorModule,
+		...
+	],
+	...
+} )
+```
+
+Import the editor build in your Angular component and assign it to a `public` property so it becomes accessible in the template:
+
+```ts
+import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+@Component( {
+	...
+} )
+export class MyComponent {
+	public Editor = ClassicEditor;
+	...
+}
+```
+
+Finally, use the `<ckeditor>` tag in the template to run the rich-text editor:
+
+```html
+<ckeditor [editor]="Editor" data="<p>Hello world!</p>"></ckeditor>
+```
+
+Rebuild your application and CKEditor 5 should greet you with "Hello world!".
+
+### Note: Using the Document editor build
+
+If you want to use the {@link framework/guides/document-editor Document editor build}, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create add the toolbar to the DOM manually}.
+
+```ts
+import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
+
+@Component( {
+	...
+} )
+export class MyComponent {
+	public Editor = DecoupledEditor;
+
+	public onReady( editor ) {
+		editor.ui.view.editable.element.parentElement.insertBefore(
+			editor.ui.view.toolbar.element,
+			editor.ui.view.editable.element
+		);
+	}
+}
+```
+
+And then, in the template:
+
+```html
+<ckeditor [editor]="Editor" data="<p>Hello world!</p>" (ready)="onReady($event)"></ckeditor>
+```
+
+## Integration with `ngModel`
+
+The component implements the [`ControlValueAccessor`](https://angular.io/api/forms/ControlValueAccessor) interface and works with the `ngModel`. Here is how to use it:
+
+1. Create some model in your component to share with the editor:
+
+	```ts
+	@Component( {
+		...
+	} )
+	export class MyComponent {
+		public model = {
+			editorData: '<p>Hello world!</p>'
+		};
+		...
+	}
+	```
+
+2. Use the model in the template to enable a two–way data binding:
+
+	```html
+	<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>
+	```
+
+## Supported `@Input` properties
+
+The following `@Input` properties are supported by the CKEditor 5 component for Angular 2+:
+
+### `editor` (required)
+
+The {@link builds/guides/integration/basic-api `Editor`} which provides the static {@link module:core/editor/editor~Editor.create `create()`} method to create an instance of the editor:
+
+```html
+<ckeditor [editor]="Editor"></ckeditor>
+```
+
+### `config`
+
+The {@link module:core/editor/editorconfig~EditorConfig configuration} of the editor:
+
+```html
+<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" ...></ckeditor>
+```
+
+### `data`
+
+The initial data of the editor. It can be a static value:
+
+```html
+<ckeditor data="<p>Hello world!</p>" ...></ckeditor>
+```
+
+or a shared parent component's property
+
+```ts
+@Component( {
+	...
+} )
+export class MyComponent {
+	public editorData = '<p>Hello world!</p>';
+	...
+}
+```
+
+```html
+<ckeditor [data]="editorData" ...></ckeditor>
+```
+
+### `tagName`
+
+Specifies the tag name of the HTML element on which the editor will be created.
+
+The default tag is `<div>`.
+
+```html
+<ckeditor tagName="textarea" ...></ckeditor>
+```
+
+### `disabled`
+
+Controls the editor's {@link module:core/editor/editor~Editor#isReadOnly read–only} state:
+
+```ts
+@Component( {
+	...
+} )
+export class MyComponent {
+	public isDisabled = false;
+	...
+	toggleDisabled() {
+		this.isDisabled = !this.isDisabled
+	}
+}
+```
+
+```html
+<ckeditor [disabled]="isDisabled" ...></ckeditor>
+
+<button (click)="toggleDisabled()">
+	{{ isDisabled ? 'Enable editor' : 'Disable editor' }}
+</button>
+```
+
+## Supported `@Output` properties
+
+The following `@Output` properties are supported by the CKEditor 5 component for Angular 2+:
+
+### `ready`
+
+Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event. Fired with the editor instance.
+
+### `change`
+
+Fired when the content of the editor has changed. It corresponds with the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
+Fired with an object containing the editor and the CKEditor 5 `change:data` event object.
+
+```html
+<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>
+```
+
+```ts
+import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';
+
+@Component( {
+	...
+} )
+export class MyComponent {
+	public Editor = ClassicEditor;
+
+	public onChange( { editor }: ChangeEvent ) {
+		const data = editor.getData();
+
+		console.log( data );
+	}
+	...
+}
+```
+
+### `blur`
+
+Fired when the editing view of the editor is blurred. It corresponds with the {@link module:engine/view/document~Document#event:blur `editor.editing.view.document#blur`} event.
+Fired with an object containing the editor and the CKEditor 5 `blur` event data.
+
+### `focus`
+
+Fired when the editing view of the editor is focused. It corresponds with the {@link module:engine/view/document~Document#event:focus `editor.editing.view.document#focus`} event.
+Fired with an object containing the editor and the CKEditor 5 `focus` event data.
+
+## Localization
+
+CKEditor 5 can be localized in two steps.
+
+### 1. Load translation files
+
+First, you need to add translation files to the bundle. This step can be achieved in two ways:
+
+* By importing translations for given languages directly in your component file:
+
+	```ts
+	import '@ckeditor/ckeditor5-build-classic/build/translations/de';
+	import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+	...
+	```
+
+* By adding paths to translation files to the `"scripts"` array in `angular.json`:
+
+	```json
+	"architect": {
+		"build": {
+			"options": {
+				"scripts": [ "node_modules/@ckeditor/ckeditor5-build-classic/build/translations/de.js" ]
+			}
+		}
+	}
+	```
+
+### 2. Configure the language
+
+Then, you need to configure the editor to use the given language:
+
+```ts
+@Component( {
+	...
+} )
+export class MyComponent {
+	public Editor = ClassicEditor;
+	public config = {
+		language: 'de'
+	};
+}
+```
+
+For advanced usage see the {@link features/ui-language Setting UI language} guide.
+
+## Contributing and reporting issues
+
+The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.

+ 81 - 0
docs/builds/guides/frameworks/overview.md

@@ -0,0 +1,81 @@
+---
+category: builds-integration-frameworks
+order: 10
+menu-title: Overview
+---
+
+# Integrating CKEditor 5 with JavaScript frameworks
+
+## Is CKEditor 5 compatible with framework XYZ?
+
+Yes. CKEditor 5 is compatible with every JavaScript framework that we have heard of so far. CKEditor 5 is a JavaScript rich-text editing component (a pretty complex one but still) and it does not require any uncommon techniques or technologies to be used. Threfore, unless the framework that you use has very not typical limitations, CKEditor 5 is compatible with it.
+
+> How do I use CKEditor 5 with my framework?
+
+While CKEditor 5 is compatible with your framework and initializing it requires a single method call, integrating CKEditor 5 with your framework may require using an existing or writing a new adapter (integration layer) that will communicate your framework with CKEditor 5.
+
+When checking how to integrate CKEditor 5 with your framework you can follow these steps:
+
+1. **Check whether an [official integration](#official-integrations) exists.**
+
+	There are two official integrations so far: for {@link builds/guides/frameworks/react React} and for {@link builds/guides/frameworks/angular Angular 2+}.
+2. **If not, search for community-driven integrations.** Most of them are available on [npm](https://www.npmjs.com/).
+3. **If none exists, integrate CKEditor 5 with your framework by yourself.**
+
+	CKEditor 5 offers {@link builds/guides/overview ready-to-use builds} that expose a {@link builds/guides/integration/basic-api rich JavaScript API} which you can use to {@link builds/guides/integration/basic-api#creating-an-editor create editors} and {@link builds/guides/integration/basic-api#interacting-with-the-editor control them}.
+
+## Official rich-text editor integrations
+
+There are two official integrations so far:
+
+* {@link builds/guides/frameworks/react CKEditor 5 component for React}
+* {@link builds/guides/frameworks/angular CKEditor 5 component for Angular 2+}
+
+Refer to their documentation to learn how to use them.
+
+We plan to provide more integrations with time. The next in the queue is [Vue.js](https://vuejs.org/) and we would like to [hear your ideas](https://github.com/ckeditor/ckeditor5/issues/1002) what we should work on after that.
+
+## Compatibility with Electron
+
+Starting from version 11.0.0 CKEditor 5 is compatible with Electron. Using CKEditor 5 in Electron applications does not require any additional steps.
+
+Check out a [sweet screencast of CKEditor 5 with real-time collaborative editing in Electron](https://twitter.com/ckeditor/status/1016627687568363520).
+
+## Compatibility with Bootstrap
+
+In order to display CKEditor 5 inside [Bootstrap](https://getbootstrap.com/) modals you need to proceed as follows:
+
+* Configure the `z-index` of CKEditor 5 floating balloons so they are displayed above the Bootstrap overlay.
+* Configure Bootstrap to not steal focus from rich-text editor fields.
+
+The above can be ensured by adding this CSS:
+
+```css
+/*
+	You need to add this custom CSS property to the body instead of :root
+	because of CSS specificity.
+*/
+body {
+	--ck-z-default: 100;
+	--ck-z-modal: calc( var(--ck-z-default) + 999 );
+}
+
+/*
+	Override Bootstrap's CSS.
+	Note: This will not be necessary once the following issue is fixed and released:
+	https://github.com/ckeditor/ckeditor5-theme-lark/issues/189
+*/
+.ck.ck-button {
+	-webkit-appearance: none;
+}
+```
+
+And passing the `focus: false` option to Boostrap's `modal()` function:
+
+```js
+$( '#modal-container' ).modal( {
+	focus: false
+} );
+```
+
+Check out the demo on https://codepen.io/ckeditor/pen/vzvgOe.

+ 365 - 0
docs/builds/guides/frameworks/react.md

@@ -0,0 +1,365 @@
+---
+menu-title: React component
+category: builds-integration-frameworks
+order: 30
+---
+
+# Rich-text editor component for React
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-react.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-react)
+
+CKEditor 5 consists of {@link builds/guides/overview ready-to-use editor builds} and {@link framework/guides/overview CKEditor 5 Framework} upon which the builds are based.
+
+The easiest way to use CKEditor 5 in your React application is by choosing one of the {@link builds/guides/overview#available-builds rich-text editor builds}. Additionally, it is also possible to integrate [CKEditor 5 built from source](#integrating-ckeditor-5-from-source) into your application .
+
+## Quick start
+
+Install the [CKEditor 5 rich-text editor component for React](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) and the build of your choice.
+
+Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
+
+```bash
+npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
+```
+
+Use the `<CKEditor>` component inside your project:
+
+```jsx
+import React, { Component } from 'react';
+import CKEditor from '@ckeditor/ckeditor5-react';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <h2>Using CKEditor 5 build in React</h2>
+                <CKEditor
+                    editor={ ClassicEditor }
+                    data="<p>Hello from CKEditor 5!</p>"
+                    onInit={ editor => {
+                        // You can store the "editor" and use when it is needed.
+                        console.log( 'Editor is ready to use!', editor );
+                    } }
+                    onChange={ ( event, editor ) => {
+                        const data = editor.getData();
+                        console.log( { event, editor, data } );
+                    } }
+                />
+            </div>
+        );
+    }
+}
+
+export default App;
+```
+
+### Component properties
+
+The `<CKEditor>` component supports the following properties:
+
+* `editor` (required) &ndash; The {@link module:core/editor/editor~Editor `Editor`} constructor to use.
+* `data` &ndash; The initial data for the created editor. See the {@link builds/guides/integration/basic-api#interacting-with-the-editor Basic API} guide.
+* `config` &ndash; The editor configuration. See the {@link builds/guides/integration/configuration Configuration} guide.
+* `onChange` &ndash; A function called when the editor's data has changed. See the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
+
+	The callback receives two parameters:
+
+	1. An {@link module:utils/eventinfo~EventInfo `EventInfo`} object,
+	2. An {@link module:core/editor/editor~Editor `Editor`} instance.
+* `onInit` &ndash; A function called when the editor was initialized. It receives the initialized {@link module:core/editor/editor~Editor `editor`} as a parameter.
+
+### Customizing the builds
+
+{@link builds/guides/overview CKEditor 5 builds} come ready to use, with a set of built-in plugins and a predefined configuration. While you can change the configuration easily by using the `config` property of the `<CKEditor>` component which allows you to change the {@link builds/guides/integration/configuration#toolbar-setup toolbar} or {@link builds/guides/integration/configuration#removing-features remove some plugins}, in order to add plugins you need to rebuild the editor.
+
+There are two main ways to do that.
+
+* {@link builds/guides/development/custom-builds Customize one of the existing builds}.
+
+	This option does not require any changes in your project's configuration. You will create a new build somewhere next to your project and include it like you included one of the existing builds. Therefore, it is the easiest way to add missing features. Read more about this method in {@link builds/guides/integration/installing-plugins Installing plugins}.
+* {@link builds/guides/integration/advanced-setup Integrate the editor from source}.
+
+	In this approach you will include CKEditor 5 built from source &mdash; so you will choose the editor creator you want and the list of plugins, etc. It is more powerful and creates a tighter integration between your application and the WYSIWYG editor, however, it requires adjusting your `webpack.config.js` to CKEditor 5 needs.
+
+	Read more about this option in [Integrating CKEditor 5 from source](#integrating-ckeditor-5-from-source).
+
+### Note: Building for production
+
+If you work with `create-react-app` or use a custom configuration for you application but still employ `webpack@3`, you will need to adjust the `UglifyJsPlugin` options to make CKEditor 5 compatible with this setup. CKEditor 5 builds use ES6 so the default JavaScript minifier of `webpack@3` and `create-react-app` is not able to digest them.
+
+To do that, you need to first [eject the configuration](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) from the setup created via `create-react-app` (assuming that you use it):
+
+```bash
+npm run eject
+```
+
+Then, you can customize `UglifyJsPlugin` options in the webpack configuration. Read how to do this [here](#changes-required-in-webpacks-production-config).
+
+**Note**: The latest `webpack@4` comes with a version of `UglifyJsPlugin` which supports ES6 out of the box. Also, the React community works on allowing importing ES6 libraries into your applications, so this step will soon be no longer required.
+
+### Note: Using the Document editor build
+
+If you use the {@link framework/guides/document-editor Document editor}, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create add the toolbar to the DOM manually}:
+
+```jsx
+import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
+
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <h2>CKEditor 5 using a custom build - DecoupledEditor</h2>
+                <CKEditor
+                    onInit={ editor => {
+                        console.log( 'Editor is ready to use!', editor );
+
+                        // Insert the toolbar before the editable area.
+                        editor.ui.view.editable.element.parentElement.insertBefore(
+                            editor.ui.view.toolbar.element,
+                            editor.ui.view.editable.element
+                        );
+                    } }
+                    onChange={ ( event, editor ) => console.log( { event, editor } ) }
+                    editor={ DecoupledEditor }
+                    data="<p>Hello from CKEditor 5's DecoupledEditor!</p>"
+                    config={ /* the editor configuration */ }
+                />
+        );
+    }
+}
+
+export default App;
+```
+
+## Integrating CKEditor 5 built from source
+
+Integrating the rich-text editor from source allows you to use the full power of {@link framework/guides/overview CKEditor 5 Framework}.
+
+This guide assumes that you are using [Create React App CLI](https://github.com/facebook/create-react-app) as your boilerplate and it goes through adjusting it to fit CKEditor 5 needs. If you use your custom webpack setup, please read more about {@link builds/guides/integration/advanced-setup#scenario-2-building-from-source including CKEditor 5 built from source}.
+
+Install React CLI:
+
+```bash
+npm install -g create-react-app
+```
+
+Create your project using the CLI and go to the project's directory:
+
+```bash
+create-react-app ckeditor5-react-example && cd ckeditor5-react-example
+```
+
+Now you can eject the configuration:
+
+```bash
+npm run eject
+```
+
+The configuration needs to be ejected in order to be able to customize webpack configuration. To build CKEditor 5 from source you must load inline SVG images and handle CKEditor 5's CSS as well as correctly minify the ES6 source.
+
+<info-box>
+	You can find more information about ejecting [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject).
+</info-box>
+
+### Changes required in webpack's production configuration
+
+At this stage, if you tried to build your application with CKEditor 5 source included, you would get the following error:
+
+```bash
+Failed to minify the code from this file:                                              [31/75]
+        <project_root>/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:5:2077
+```
+
+UglifyJS exported by `webpack@3` cannot parse code written in ES6. You need to manually replace it with `uglifyjs-webpack-plugin`. **These changes touch the `webpack.config.prod.js` file only.**
+
+After ejecting, this file is placed in `<project_root>/config/webpack.config.prod.js`. You need to make the following changes:
+
+1. Install `uglifyjs-webpack-plugin`:
+
+	```bash
+	npm install --save-dev uglifyjs-webpack-plugin
+	```
+
+2. Load the installed package (at the top of the `webpack.config.prod.js` file):
+
+	```js
+	const UglifyJsWebpackPlugin = require( 'uglifyjs-webpack-plugin' );
+	```
+
+3. Replace the `webpack.optimize.UglifyJsPlugin` with `UglifyJsWebpackPlugin`:
+
+	```diff
+	- new webpack.optimize.UglifyJsPlugin
+	+ new UglifyJsWebpackPlugin
+	```
+
+4. Options: `compress`, `mangle` and `output` cannot be passed directly to `UglifyJsWebpackPlugin`. You need to wrap these options in `uglifyOptions: { ... }`.
+
+In the end, the entire plugin definition should look as follows:
+
+```js
+// Minify the code.
+new UglifyJsWebpackPlugin( {
+  uglifyOptions: {
+    compress: {
+      warnings: false,
+      // Disabled because of an issue with Uglify breaking seemingly valid code:
+      // https://github.com/facebookincubator/create-react-app/issues/2376
+      // Pending further investigation:
+      // https://github.com/mishoo/UglifyJS2/issues/2011
+      comparisons: false,
+    },
+    mangle: {
+        safari10: true,
+    },
+    output: {
+        comments: false,
+        // Turned on because emoji and regex is not minified properly using default
+        // https://github.com/facebookincubator/create-react-app/issues/2488
+        ascii_only: true,
+    },
+  },
+  sourceMap: shouldUseSourceMap,
+} )
+```
+
+### Changes required in both webpack configurations
+
+In order to build your application properly, you need to modify your webpack configuration files. After ejecting they are located at:
+
+```bash
+<project_root>/config/webpack.config.dev.js
+<project_root>/config/webpack.config.prod.js
+```
+
+You need to modify the webpack configuration to load CKEditor 5 SVG icons properly.
+
+First, import an object that creates the configuration for PostCSS:
+
+```js
+const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+```
+
+Then add two new elements to the exported object under the `module.rules` array (as new items for the `oneOf` array). These are SVG and CSS loaders only for CKEditor 5 code:
+
+```js
+{
+  test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+  use: [ 'raw-loader' ]
+},
+{
+  test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
+  use: [
+    {
+      loader: 'style-loader',
+      options: {
+        singleton: true
+      }
+    },
+    {
+      loader: 'postcss-loader',
+      options: styles.getPostCssConfig( {
+        themeImporter: {
+          themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+        },
+        minify: true
+      } )
+    }
+  ]
+},
+```
+
+Exclude CSS files used by CKEditor 5 from project's CSS loader:
+
+```js
+{
+  test: /\.css$/,
+  exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
+  // (...)
+}
+```
+
+And exclude CKEditor 5 SVG and CSS files from `file-loader` because these files will be handled by the loaders added previously (usually the last item in the `module.rules` array is the `file-loader`) so it looks like this:
+
+```js
+{
+  loader: require.resolve('file-loader'),
+  // Exclude `js` files to keep the "css" loader working as it injects
+  // its runtime that would otherwise be processed through the "file" loader.
+  // Also exclude `html` and `json` extensions so they get processed
+  // by webpack's internal loaders.
+  exclude: [
+    /\.(js|jsx|mjs)$/,
+    /\.html$/,
+    /\.json$/,
+    /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+    /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/
+  ],
+  options: {
+    name: 'static/media/[name].[hash:8].[ext]'
+  }
+}
+```
+
+**Remember that the changes above should be done in both configuration files.**
+
+Next, install `raw-loader`, the theme for CKEditor 5, and CKEditor 5 development utilities:
+
+```bash
+npm install --save-dev raw-loader @ckeditor/ckeditor5-theme-lark @ckeditor/ckeditor5-dev-utils
+```
+
+Finally, install the component, the specific editor and plugins you want to use:
+
+```bash
+npm install --save \
+	@ckeditor/ckeditor5-react \
+	@ckeditor/ckeditor5-editor-classic \
+	@ckeditor/ckeditor5-essentials \
+	@ckeditor/ckeditor5-basic-styles \
+	@ckeditor/ckeditor5-heading \
+	@ckeditor/ckeditor5-paragraph
+```
+
+### Using CKEditor 5 source
+
+Now you can use the `<CKEditor>` component together with {@link framework/guides/overview CKEditor 5 Framework}:
+
+```jsx
+import React, { Component } from 'react';
+import CKEditor from '@ckeditor/ckeditor5-react';
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <h2>Using CKEditor 5 Framework in React</h2>
+                <CKEditor
+                    onInit={ editor => console.log( 'Editor is ready to use!', editor ) }
+                    onChange={ ( event, editor ) => console.log( { event, editor } ) }
+                    config={ {
+                        plugins: [ Essentials, Paragraph, Bold, Italic, Heading ],
+                        toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo', ]
+                    } }
+                    editor={ ClassicEditor }
+                    data="<p>Hello from CKEditor 5!</p>"
+                />
+            </div>
+        );
+    }
+}
+
+export default App;
+```
+
+## Contributing and reporting issues
+
+The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-react.

+ 164 - 1
docs/builds/guides/integration/advanced-setup.md

@@ -125,7 +125,7 @@ module.exports = {
 		// ...
 
 		new CKEditorWebpackPlugin( {
-			// See https://docs.ckeditor.com/ckeditor5/latest/features/ui-language.html
+			// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
 			language: 'pl'
 		} )
 	],
@@ -449,3 +449,166 @@ entry: [
 <info-box>
 	The [`babel-preset-env`](https://github.com/babel/babel-preset-env) package lets you choose the environment that you want to support and transpiles ES6+ features to match that environment's capabilities. Without configuration it will produce ES5 builds.
 </info-box>
+
+## Scenario 3: Using two different editors
+
+A common requirement is the ability to use two or more types of editors on one page. For instance, you may want to use the {@link builds/guides/overview#classic-editor classic editor} next to a couple of {@link builds/guides/overview#inline-editor inline editors}.
+
+**Do not load two builds on one page.** This is a mistake which leads to:
+
+* Code duplication. Both builds share up to 99% of the code, including CSS and SVGs. By loading them twice you make your page unnecessarily heavy.
+* Duplicated CSS may lead to conflicts and, thus, broken UI of the editors.
+* Translation repository gets duplicated entries which may cause loading incorrect strings with translations.
+
+### Solutions
+
+If you want to load two different editors on one page you need to make sure that they are build together (once). This can be achieved in at least two ways:
+
+* [Integrating CKEditor 5 from source](#running-the-editor-method-2) directly into your application. Since you build you application once the editors that you will use will be built together too.
+* [Creating a "super build" of CKEditor 5](#creating-super-builds). Instead of creating a build which exports just one editor, you can create a build which exports two or more at the same time.
+
+### Creating "super builds"
+
+There is no limit for how many editor classes can a single build export. By default, the official builds export a single editor class only. However, they can easily import more.
+
+You can start from forking (or copying) an existing build like in the {@link builds/guides/development/custom-builds "Creating custom builds"} guide. Let's say you forked and cloned the [`ckeditor5-build-classic`](http://github.com/ckeditor/ckeditor5-build-classic) repository and want to add {@link module:editor-inline/inlineeditor~InlineEditor} to it:
+
+```bash
+git clone -b stable git@github.com:<your-username>/ckeditor5-build-classic.git
+cd ckeditor5-build-classic
+npm install
+```
+
+Now, it is time to add the missing editor package and install:
+
+```
+npm install --save-dev @ckeditor/ckeditor5-editor-inline
+```
+
+Once all the dependencies are installed, let's modify the webpack's entry point which is the `src/ckeditor.js` file. For now it was exporting just a single class:
+
+```js
+// The editor creator to use.
+import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+// ...
+
+export default class ClassicEditor extends ClassicEditorBase {}
+
+// Plugins to include in the build.
+ClassicEditor.builtinPlugins = [
+	// ...
+];
+
+// Editor configuration.
+ClassicEditor.defaultConfig = {
+	// ...
+};
+```
+
+Let's make it export an object with two classes – `ClassicEditor` and `InlineEditor`. To make both constructors work in the same way (load the same plugins and default configuration) we also need to assign `builtinPlugins` and `defaultConfig` static properties to both of them:
+
+```js
+// The editor creators to use.
+import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import InlineEditorBase from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
+
+// ...
+
+class ClassicEditor extends ClassicEditorBase {}
+class InlineEditor extends InlineEditorBase {}
+
+// Plugins to include in the build.
+const plugins = [
+	// ...
+];
+
+ClassicEditor.builtinPlugins = plugins;
+InlineEditor.builtinPlugins = plugins;
+
+// Editor configuration.
+const config = {
+	// ...
+};
+
+ClassicEditor.defaultConfig = config;
+InlineEditor.defaultConfig = config;
+
+export default {
+	ClassicEditor, InlineEditor
+};
+```
+
+Since now we export an object with two properties `ClassicEditor` and `InlineEditor` it is also reasonable to rename the global variable to which webpack will assign this object. So far it was called `ClassicEditor`. A more adequate name now would be for example `CKEDITOR`. This variable is defined in `webpack.config.js` in the `output.library` setting:
+
+```diff
+diff --git a/webpack.config.js b/webpack.config.js
+index c57e371..04fc9fe 100644
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -21,7 +21,7 @@ module.exports = {
+
+     output: {
+         // The name under which the editor will be exported.
+-        library: 'ClassicEditor',
++        library: 'CKEDITOR',
+
+         path: path.resolve( __dirname, 'build' ),
+         filename: 'ckeditor.js',
+```
+
+Once you changed the `src/ckeditor.js` and `webpack.config.js` files it is time to rebuild the build:
+
+```bash
+npm run build
+```
+
+Finally, webpack finishes compiling your super build, you can change the `samples/index.html` file to test both editors:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>CKEditor 5 – super build</title>
+	<style>
+		body {
+			max-width: 800px;
+			margin: 20px auto;
+		}
+	</style>
+</head>
+<body>
+
+<h1>CKEditor 5 – super build</h1>
+
+<div id="classic-editor">
+	<h2>Sample</h2>
+
+	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>
+</div>
+
+<div id="inline-editor">
+	<h2>Sample</h2>
+
+	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#inline-editor">inline editor build</a>.</p>
+</div>
+
+<script src="../build/ckeditor.js"></script>
+<script>
+	CKEDITOR.ClassicEditor
+		.create( document.querySelector( '#classic-editor' ) )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+
+	CKEDITOR.InlineEditor
+		.create( document.querySelector( '#inline-editor' ) )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+</script>
+
+</body>
+</html>
+```

+ 10 - 0
docs/builds/guides/integration/basic-api.md

@@ -166,6 +166,16 @@ editor.destroy()
 
 Once destroyed, resources used by the editor instance are released and the original element used to create the editor is automatically displayed and updated to reflect the final editor data.
 
+### Listening to changes
+
+{@link module:engine/model/document~Document#change:data `Document#change:data`}.
+
+editor.model.document.on( 'change:data', () => {
+    console.log( 'The data has changed!' );
+} );
+
+This event is fired when the document changes in such a way which is "visible" in the editor data. There is also a group of changes, like selection position changes, marker changes which do not affect the result of `editor.getData()`. To listen to all these changes, you can use a wider {@link module:engine/model/document~Document#change `Document#change`} event.
+
 ## UMD support
 
 Because builds are distributed as [UMD modules](https://github.com/umdjs/umd), editor classes can be retrieved in various ways:

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

@@ -18,9 +18,9 @@ ClassicEditor
 		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
 		heading: {
 			options: [
-				{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-				{ modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
-				{ modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
 			]
 		}
 	} )

+ 8 - 0
docs/builds/guides/integration/saving-data.md

@@ -234,7 +234,15 @@ To handle the former situation you can listen to the native [`window#beforeunloa
 
 The example below shows how all these mechanisms can be used together to enable or disable a "Save" button and block the user from leaving the page without saving the data.
 
+<info-box>
+	The {@link module:core/pendingactions~PendingActions} plugin is unavailable in any of the builds by default so you need to {@link builds/guides/integration/installing-plugins install it}.
+</info-box>
+
 ```js
+// Note: We need to build the editor from source.
+// We cannot use existing builds in this case.
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
 import PendingActions from '@ckeditor/ckeditor5-core/src/pendingactions';
 
 let isDirty = false;

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 90 - 90
docs/builds/guides/migrate.md


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

@@ -60,7 +60,7 @@ To try it out online, check the {@link examples/builds/balloon-editor balloon ed
 
 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 800 Screenshot of the user interface of the document editor.}
+{@img assets/img/editor-document.png 843 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.
 

+ 2 - 0
docs/builds/guides/support/browser-compatibility.md

@@ -42,6 +42,8 @@ CKEditor 5 is currently supported in the following mobile environments:
 
 * Android (all vendor-supported versions)
 * iOS (all vendor-supported versions)
+* Android WebView
+* iOS WebView (UIWebView and WKWebView)
 
 ## Quality assurance
 

+ 1 - 1
docs/framework/guides/architecture/editing-engine.md

@@ -182,7 +182,7 @@ The schema is, by default, configured by editor plugins. It is recommended that
 	Currently, there is [no straightforward way to override the schema](https://github.com/ckeditor/ckeditor5-engine/issues/1367) preconfigured by features. If you want to override the default settings when initializing the editor, the best solution is to replace `editor.model.schema` with a new instance of it. This, however, requires rebuilding the editor.
 </info-box>
 
-The instance of the schema is available in {@link module:engine/model/model~Model#schema `editor.model.schema`}. Read an extensive guide about using the schema API in the {@link module:engine/model/schema~Schema API documentation for the `Schema` class}.
+The instance of the schema is available in {@link module:engine/model/model~Model#schema `editor.model.schema`}. Read an extensive guide about using the schema API in the {@link framework/guides/deep-dive/schema Schema deep dive} guide.
 
 ## View
 

+ 50 - 0
docs/framework/guides/architecture/ui-library.md

@@ -320,6 +320,56 @@ This kind of (default) dropdown comes with a set of behaviors:
 * It closes the panel upon the {@link module:ui/dropdown/dropdownview~DropdownView#execute `execute`} event.
 * It focuses the view hosted in the panel, e.g. when navigating the toolbar using the keyboard.
 
+#### Setting label, icon, and tooltip
+
+To customize the button of the dropdown, use the {@link module:ui/dropdown/dropdownview~DropdownView#buttonView `buttonView`} property. It gives a direct access to the {@link module:ui/button/buttonview~ButtonView `ButtonView` instance} used by your dropdown.
+
+<info-box>
+	If your dropdown has been created using the {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView}, use the {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView#actionView} to access its main region, e.g. `dropdownView.buttonView.actionView.set( ... )`.
+</info-box>
+
+To control the label of the dropdown, first make it visible using the {@link module:ui/button/buttonview~ButtonView#withText} property and then set the text of the {@link module:ui/button/buttonview~ButtonView#label}:
+
+```js
+const dropdownView = createDropdown( locale );
+
+dropdownView.buttonView.set( {
+	withText: true,
+	label: 'Label of the button',
+} );
+```
+
+The dropdown button can display an icon too. First, import the SVG file and then pass it to the {@link module:ui/button/buttonview~ButtonView#icon} property of the button:
+
+```js
+import iconFile from 'path/to/icon.svg';
+
+// ...
+
+dropdownView.buttonView.set( {
+	icon: iconFile
+} );
+```
+
+Note that `withText` and `icon` properties are independent so your dropdown can have:
+
+* just a text label,
+* just an icon,
+* both a label and an icon at the same time.
+
+<info-box>
+	Keep in mind that even if your dropdown has no visible label (`withText` is `false`), we recommend to set the `label` property anyway because it is essential for assistive technologies like screen readers to work properly with the editor.
+</info-box>
+
+Dropdowns can also display tooltips when hovered. Use the {@link module:ui/button/buttonview~ButtonView#tooltip} property of the button to enable this feature. It is possible to include keystroke information in the tooltip or create custom tooltips. Check out the documentation of the property to learn more.
+
+```js
+dropdownView.buttonView.set( {
+	// The tooltip text will repeat the label.
+	tooltip: true
+} );
+```
+
 #### Adding a list to a dropdown
 
 The {@link module:ui/list/listview~ListView} can be added to a dropdown using the {@link module:ui/dropdown/utils#addListToDropdown} helper.

+ 12 - 5
docs/framework/guides/contributing/development-environment.md

@@ -27,13 +27,13 @@ In order to start developing CKEditor 5 you will require:
 
 First, you need to install a couple of tools which you will be using later:
 
-* [mgit](https://www.npmjs.com/package/mgit2) (a multi-repo management tool),
-* [Lerna.js](https://github.com/lerna/lerna) (a multi-package management tool).
+* [mgit](https://www.npmjs.com/package/mgit2) &ndash; A multi-repo management tool,
+* [Lerna.js](https://github.com/lerna/lerna)@2 &ndash; A multi-package management tool. Note: Lerna@3 is [not supported yet](https://github.com/ckeditor/ckeditor5/issues/1214).
 
 It is best to install them globally in your system for an easier use later on:
 
 ```bash
-npm install -g lerna mgit2
+npm install -g lerna@2 mgit2
 ```
 
 Note: You may need to use `sudo` on Linux and macOS.
@@ -185,13 +185,20 @@ npm run docs
 
 The documentation will be available in `build/docs/`.
 
-This task accepts two arguments which can speed up the process:
+This task accepts the following arguments:
 
 * `--skip-api` &ndash; Skips building the API documentation (which takes the majority of the total time).
 * `--skip-snippets` &ndash; Skips building live snippets.
 * `--skip-validation` &ndash; Skips the final link validation.
+* `--watch` &ndash; Runs the documentation generator in a watch mode. It covers guides (it does not cover API docs).
+* `--production` &ndash; Minifies the assets and performs other actions which are unnecessary during CKEditor 5 development.
+* `--verbose` &ndash; Prints out more information.
 
-Note: These arguments must be passed after additional `--`: `npm run docs -- --skip-api`.
+Note: These arguments must be passed after additional `--`:
+
+```
+npm run docs -- --skip-api
+```
 
 ## Bisecting through a multi-repository
 

+ 27 - 8
docs/umberto.json

@@ -9,7 +9,10 @@
 		"builds/guides/license-and-legal.html": "builds/guides/support/license-and-legal.html",
 		"builds/guides/browser-compatibility.html": "builds/guides/support/browser-compatibility.html",
 		"builds/guides/reporting-issues.html": "builds/guides/support/reporting-issues.html",
-		"builds/guides/development/installing-plugins.html": "builds/guides/integration/installing-plugins.html"
+		"builds/guides/development/installing-plugins.html": "builds/guides/integration/installing-plugins.html",
+		"framework/guides/ui/theme-customization.html": "framework/guides/deep-dive/ui/theme-customization.html",
+		"framework/guides/ui/external-ui.html": "framework/guides/deep-dive/ui/external-ui.html",
+		"framework/guides/ui/document-editor.html": "framework/guides/deep-dive/ui/document-editor.html"
 	},
 	"scripts": {
 		"snippet-adapter": "../scripts/docs/snippetadapter",
@@ -70,7 +73,15 @@
 							"name": "Integration",
 							"id": "builds-integration",
 							"slug": "integration",
-							"order": 100
+							"order": 100,
+							"categories": [
+								{
+									"name": "Frameworks",
+									"id": "builds-integration-frameworks",
+									"slug": "frameworks",
+									"order": 100
+								}
+							]
 						},
 						{
 							"name": "Development",
@@ -105,22 +116,30 @@
 							"order": 100
 						},
 						{
-							"name": "User interface",
-							"id": "framework-ui",
-							"slug": "ui",
-							"order": 200
+							"name": "Deep dive",
+							"id": "framework-deep-dive",
+							"slug": "deep-dive",
+							"order": 300,
+							"categories": [
+								{
+									"name": "User interface",
+									"id": "framework-deep-dive-ui",
+									"slug": "ui",
+									"order": 100
+								}
+							]
 						},
 						{
 							"name": "Contributing",
 							"id": "framework-contributing",
 							"slug": "contributing",
-							"order": 300
+							"order": 400
 						},
 						{
 							"name": "Support",
 							"id": "framework-support",
 							"slug": "support",
-							"order": 400
+							"order": 500
 						}
 					]
 				}

+ 1 - 0
mgit.json

@@ -30,6 +30,7 @@
     "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link",
     "@ckeditor/ckeditor5-list": "ckeditor/ckeditor5-list",
     "@ckeditor/ckeditor5-markdown-gfm": "ckeditor/ckeditor5-markdown-gfm",
+    "@ckeditor/ckeditor5-media-embed": "ckeditor/ckeditor5-media-embed",
     "@ckeditor/ckeditor5-paragraph": "ckeditor/ckeditor5-paragraph",
     "@ckeditor/ckeditor5-table": "ckeditor/ckeditor5-table",
     "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark",

+ 13 - 11
package.json

@@ -49,6 +49,7 @@
     "@ckeditor/ckeditor5-link": "^10.0.3",
     "@ckeditor/ckeditor5-list": "^11.0.1",
     "@ckeditor/ckeditor5-markdown-gfm": "^10.0.2",
+    "@ckeditor/ckeditor5-media-embed": "^0.0.1",
     "@ckeditor/ckeditor5-paragraph": "^10.0.2",
     "@ckeditor/ckeditor5-table": "^10.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^11.0.0",
@@ -61,13 +62,13 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-collaboration": "^10.1.0",
-    "@ckeditor/ckeditor5-dev-docs": "^9.0.4",
-    "@ckeditor/ckeditor5-dev-env": "^11.0.0",
-    "@ckeditor/ckeditor5-dev-tests": "^12.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^10.0.0",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "^6.0.0",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.15.0",
+    "@ckeditor/ckeditor5-dev-docs": "^10.0.0",
+    "@ckeditor/ckeditor5-dev-env": "^12.0.0",
+    "@ckeditor/ckeditor5-dev-tests": "^13.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^11.0.0",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^7.0.0",
+    "css-loader": "^1.0.0",
+    "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "glob": "^7.1.2",
     "husky": "^0.14.3",
@@ -76,11 +77,11 @@
     "mgit2": "^0.8.0",
     "mini-css-extract-plugin": "^0.4.0",
     "minimatch": "^3.0.4",
-    "postcss-loader": "^2.1.5",
+    "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
-    "umberto": "^0.6.0",
+    "umberto": "^0.8.0",
     "webpack": "^4.15.0"
   },
   "engines": {
@@ -100,7 +101,8 @@
     "precommit": "lint-staged",
     "test": "node --max_old_space_size=4096 node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js",
     "manual": "node --max_old_space_size=4096 node_modules/@ckeditor/ckeditor5-dev-tests/bin/test-manual.js",
-    "reinstall": "rm -rf ./packages ./node_modules && mgit bootstrap && lerna bootstrap",
+    "reset": "rm -rf ./packages ./node_modules && mgit bootstrap && lerna bootstrap",
+    "reinstall": "lerna clean --yes && lerna bootstrap",
     "docs": "node ./scripts/docs/build-docs.js",
     "docs:api": "node ./scripts/docs/build-api-docs.js",
     "docs:build-and-publish": "node ./scripts/docs/build-and-publish.js",

+ 16 - 24
scripts/docs/build-docs.js

@@ -14,40 +14,30 @@ const buildApiDocs = require( './buildapi' );
 const skipLiveSnippets = process.argv.includes( '--skip-snippets' );
 const skipApi = process.argv.includes( '--skip-api' );
 const skipValidation = process.argv.includes( '--skip-validation' );
-const dev = process.argv.includes( '--dev' );
 const production = process.argv.includes( '--production' );
+const watch = process.argv.includes( '--watch' );
+const verbose = process.argv.includes( '--verbose' );
 
 buildDocs();
 
 function buildDocs() {
-	if ( skipApi ) {
-		const fs = require( 'fs' );
-		const apiJsonPath = './docs/api/output.json';
-
-		if ( fs.existsSync( apiJsonPath ) ) {
-			fs.unlinkSync( apiJsonPath );
-		}
+	let promise;
 
-		runUmberto( {
-			skipLiveSnippets,
-			skipApi,
-			skipValidation,
-			dev,
-			production
-		} ).then( () => process.exit() );
-
-		return;
+	if ( skipApi ) {
+		promise = Promise.resolve();
+	} else {
+		promise = buildApiDocs();
 	}
 
-	// Simple way to reuse existing api/output.json:
-	// return Promise.resolve()
-	buildApiDocs()
+	promise
 		.then( () => {
 			return runUmberto( {
 				skipLiveSnippets,
+				skipApi,
 				skipValidation,
-				dev,
-				production
+				production,
+				watch,
+				verbose
 			} );
 		} );
 }
@@ -58,12 +48,14 @@ function runUmberto( options ) {
 	return umberto.buildSingleProject( {
 		configDir: 'docs',
 		clean: true,
-		dev: options.dev,
+		dev: !options.production,
 		skipLiveSnippets: options.skipLiveSnippets,
 		skipValidation: options.skipValidation,
 		snippetOptions: {
 			production: options.production
 		},
-		skipApi: options.skipApi
+		skipApi: options.skipApi,
+		verbose: options.verbose,
+		watch: options.watch
 	} );
 }

+ 1 - 1
scripts/switch-to-dev-dev.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 # @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 # For licensing, see LICENSE.md.

+ 1 - 1
scripts/update-stable-branches.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 # @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 # For licensing, see LICENSE.md.

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác