Bladeren bron

Docs: Reviewed a couple of guides.

Piotrek Koszuliński 8 jaren geleden
bovenliggende
commit
a417c2848b

+ 11 - 11
docs/builds/guides/integration/basic-api.md

@@ -19,7 +19,7 @@ Most of the examples in the documentation use the `ClassicEditor` class, but thi
 
 Regardless of chosen build, creating an editor is done using a static `create()` method.
 
-### Example - Classic editor
+### Example  Classic editor
 
 In your HTML page add an element that CKEditor should replace:
 
@@ -44,7 +44,7 @@ ClassicEditor
 
 In the above case, the `<textarea>` element is hidden and replaced with an editor. The `<textarea>` data is used to initialize the editor content. A `<div>` element can be used in the same fashion.
 
-### Example - Inline editor
+### Example  Inline editor
 
 Similarly to the previous example, add an element where CKEditor should initialize:
 
@@ -106,7 +106,7 @@ 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.
 
-## UMD support 
+## UMD support
 
 Because builds are distributed as [UMD modules](https://github.com/umdjs/umd), it is worth noting that editor classes can be retrieved in various ways:
 
@@ -118,22 +118,22 @@ For example:
 
 ```js
 // In CommonJS environment.
-const ClassicEditor = require( '[ckeditor path]/build/ckeditor' );
-ClassicEditor.create(...); // [Function]
+const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic/build/ckeditor' );
+ClassicEditor.create( ... ); // [Function]
 
 // If AMD is present, you can do this.
-require( '/[ckeditor path]/build/ckeditor', ClassicEditor => {
-	ClassicEditor.create(...); // [Function]
+require( [ 'path/to/ckeditor5-build-classic/build/ckeditor' ], ClassicEditor => {
+	ClassicEditor.create( ... ); // [Function]
 } );
 
 // As a global variable.
-ClassicEditor.create(...); // [Function]
+ClassicEditor.create( ... ); // [Function]
 
 // As an ES6 module (if using webpack or Rollup).
-import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
-ClassicEditor.create(...); // [Function]
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
+ClassicEditor.create( ... ); // [Function]
 ```
 
-## Whats more?
+## What's more?
 
 CKEditor offers a rich API to interact with editors. Check out the {@link api/index API documentation} for more.

+ 8 - 4
docs/builds/guides/integration/installation.md

@@ -15,7 +15,7 @@ There are several options to download CKEditor 5 builds:
 * [npm](#npm)
 * [Zip download](#Zip-download)
 
-For the list of available builds check the {@link builds/guides/overview#Available-builds Overview} page. Once you download the editor jump to the {@link builds/guides/integration/basic-api Basic API guide} to see how to create editors. 
+For the list of available builds check the {@link builds/guides/overview#Available-builds Overview} page. Once you download the editor jump to the {@link builds/guides/integration/basic-api Basic API guide} to see how to create editors.
 
 ### CDN
 
@@ -25,13 +25,17 @@ Builds can be loaded inside pages directly from [CKEditor CDN](https://cdn.ckedi
 
 All builds are released on npm. [Use this search link](https://www.npmjs.com/search?q=keywords:ckeditor5-build&page=1&ranking=optimal) to view all build packages available in npm.
 
-Installing a classic build with npm is as simple as calling the following inside your website or application:
+Installing a build with npm is as simple as calling one of the following commands in your project:
 
 ```bash
 npm install --save @ckeditor/ckeditor5-build-classic
+# Or:
+npm install --save @ckeditor/ckeditor5-build-inline
+# Or:
+npm install --save @ckeditor/ckeditor5-build-balloon
 ```
 
-CKEditor will then be available at `node_modules/ckeditor5-build-classic/build/ckeditor.js`.
+CKEditor will then be available at `node_modules/ckeditor5-build-[name]/build/ckeditor.js`.
 
 ### Zip download
 
@@ -58,7 +62,7 @@ The following are the main files available in all build distributions:
 Once downloaded and installed in your application, it is time to make the API available in your pages. For that purpose, it is enough to load the API entry point script:
 
 ```html
-<script src="[ckeditor path]/build/ckeditor.js"></script>
+<script src="path/to/ckeditor5-build-[name]/build/ckeditor.js"></script>
 ```
 
 Once the CKEditor script is loaded, you can {@link builds/guides/integration/basic-api use the API} to create editors in your page.

+ 4 - 3
docs/builds/guides/migrate.md

@@ -33,7 +33,7 @@ Therefore, it is worth spending some time analyzing required features.
 CKEditor 5 was designed with focus on creating quality content. There are thus good reasons for it to not support some old features. You should take this chance to rethink the features available in your application and in turn perhaps switch the approach towards a more modern reasoning.
 
 <info-box>
-Features like fonts, colors and alignment will be introduced in the future, when the new types of builds will be introduced with the purpose of satisfying document editing scenarios.  
+Features like fonts, colors and alignment will be introduced in the future, when the new types of builds will be introduced with the purpose of satisfying document editing scenarios.
 </info-box>
 
 <!-- TODO 4 -->
@@ -50,7 +50,8 @@ Check the {@link builds/guides/development/plugins#Creating-plugins Creating plu
 
 In CKEditor 5, the previous concept of "skins" was reviewed and is now called "themes".
 
-If you have custom skins for CKEditor 4, these skins need to be recreated for CKEditor 5. Fortunately custom theming in CKEditor 5 is much more powerful and simpler than before. 
+If you have custom skins for CKEditor 4, these skins need to be recreated for CKEditor 5. Fortunately custom theming in CKEditor 5 is much more powerful and simpler than before.
+
 <!--
 For more information, check how to {@linkTODO create new themes in the CKEditor 5 Framework documentation}.
 -->
@@ -59,4 +60,4 @@ For more information, check how to {@linkTODO create new themes in the CKEditor
 
 An extremely important aspect to be remembered is that &mdash; because of the difference in features &mdash; the data produced with CKEditor 4 may not be compatible with CKEditor 5.
 
-Extensive analysis, data verification and tests should be performed on existing data. If necessary, conversion procedures should be developed to avoid data loss. A relatively simple yet efficient strategy of adopting CKEditor 5 into existing systems might be using CKEditor 5 for creating new content and the old editor for editing legacy content. 
+Extensive analysis, data verification and tests should be performed on existing data. If necessary, conversion procedures should be developed to avoid data loss. A relatively simple yet efficient strategy of adopting CKEditor 5 into existing systems might be using CKEditor 5 for creating new content and the old editor for editing legacy content.

+ 70 - 37
docs/builds/guides/quick-start.md

@@ -8,32 +8,39 @@ order: 30
 ---
 
 Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:
- 
+
 1. Load the desired editor via the `<script>` tag.
-2. Call the static `create` method to create the editor.
+2. Call the static `create()` method to create the editor.
 
 ## Classic editor
 
 In your HTML page add an element that CKEditor should replace:
-```
-<textarea name="editor1" id="text-editor"></textarea>
+
+```html
+<textarea name="editor1" id="editor"></textarea>
 ```
 
 Load CKEditor 5, the classic editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
-```
+
+```html
 <script src="https://cdn.ckeditor.com/ckeditor5-build-classic/{@var ckeditor5-version}/build/ckeditor.js"></script>
 ```
 
 Call the {@link module:editor-classic/classiceditor~ClassicEditor#create `ClassicEditor.create()`} method.
-```
+
+```js
 <script>
-	ClassicEditor.create( document.querySelector( '#text-editor' ) );
+	ClassicEditor
+		.create( document.querySelector( '#editor' ) )
+		.catch( error => {
+			console.error( error );
+		} );
 </script>
 ```
 
 ### Example
 
-```
+```html
 <!DOCTYPE html>
 <html>
 <head>
@@ -42,11 +49,15 @@ Call the {@link module:editor-classic/classiceditor~ClassicEditor#create `Classi
 	<script src="https://cdn.ckeditor.com/ckeditor5-build-classic/{@var ckeditor5-version}/build/ckeditor.js"></script>
 </head>
 <body>
-<h1>Classic editor</h1>
-<textarea name="editor1" id="text-editor"></textarea>
-<script>
-	ClassicEditor.create( document.querySelector( '#text-editor' ) );
-</script>
+	<h1>Classic editor</h1>
+	<textarea name="editor1" id="editor">&lt;p&gt;This is some sample content.&lt;/p&gt;</textarea>
+	<script>
+		ClassicEditor
+			.create( document.querySelector( '#editor' ) )
+			.catch( error => {
+				console.error( error );
+			} );
+	</script>
 </body>
 </html>
 ```
@@ -54,25 +65,32 @@ Call the {@link module:editor-classic/classiceditor~ClassicEditor#create `Classi
 ## Inline editor
 
 In your HTML page add an element that CKEditor should make editable:
-```
-<div id="text-editor"></div>
+
+```html
+<div id="editor"></div>
 ```
 
 Load CKEditor 5, the inline editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
-```
+
+```html
 <script src="https://cdn.ckeditor.com/ckeditor5-build-inline/{@var ckeditor5-version}/build/ckeditor.js"></script>
 ```
 
 Call the {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`} method.
-```
+
+```html
 <script>
-	InlineEditor.create( document.querySelector( '#text-editor' ) );
+	InlineEditor
+		.create( document.querySelector( '#editor' ) )
+		.catch( error => {
+			console.error( error );
+		} );
 </script>
 ```
 
 ### Example
 
-```
+```html
 <!DOCTYPE html>
 <html>
 <head>
@@ -81,11 +99,15 @@ Call the {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEdi
 	<script src="https://cdn.ckeditor.com/ckeditor5-build-inline/{@var ckeditor5-version}/build/ckeditor.js"></script>
 </head>
 <body>
-<h1>Inline editor</h1>
-<div id="text-editor">This is some sample content.</div>
-<script>
-	InlineEditor.create( document.querySelector( '#text-editor' ) );
-</script>
+	<h1>Inline editor</h1>
+	<div id="editor"><p>This is some sample content.</p></div>
+	<script>
+		InlineEditor
+			.create( document.querySelector( '#editor' ) )
+			.catch( error => {
+				console.error( error );
+			} );
+	</script>
 </body>
 </html>
 ```
@@ -93,42 +115,53 @@ Call the {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEdi
 ## Balloon toolbar editor
 
 In your HTML page add an element that CKEditor should make editable:
-```
-<div id="text-editor"></div>
+
+```html
+<div id="editor"></div>
 ```
 
 Load CKEditor 5, the balloon toolbar editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
-```
+
+```html
 <script src="https://cdn.ckeditor.com/ckeditor5-build-balloon-toolbar/{@var ckeditor5-version}/build/ckeditor.js"></script>
 ```
 
 Call the {@link module:editor-balloon-toolbar/balloontoolbareditor~BalloonToolbarEditor#create `BalloonToolbarEditor.create()`} method.
-```
+
+```html
 <script>
-	BalloonToolbarEditor.create( document.querySelector( '#text-editor' ) );
+	BalloonToolbarEditor
+		.create( document.querySelector( '#editor' ) )
+		.catch( error => {
+			console.error( error );
+		} );
 </script>
 ```
 
 ### Example
 
-```
+```html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
-	<title>CKEditor 5 - Balloon toolbar editor</title>
+	<title>CKEditor 5  Balloon toolbar editor</title>
 	<script src="https://cdn.ckeditor.com/ckeditor5-build-balloon-toolbar/{@var ckeditor5-version}/build/ckeditor.js"></script>
 </head>
 <body>
-<h1>Balloon toolbar editor</h1>
-<div id="text-editor">This is some sample content.</div>
-<script>
-	BalloonToolbarEditor.create( document.querySelector( '#text-editor' ) );
-</script>
+	<h1>Balloon toolbar editor</h1>
+	<div id="editor"><p>This is some sample content.</p></div>
+	<script>
+		BalloonToolbarEditor
+			.create( document.querySelector( '#editor' ) )
+			.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.
+Check the {@link builds/guides/integration/configuration Configuration guide} to learn how to configure the editor e.g. change the default toolbar.