|
@@ -67,7 +67,7 @@ The `<CKEditor>` component supports the following properties:
|
|
|
* `editor` (required) – The {@link module:core/editor/editor~Editor `Editor`} constructor to use.
|
|
* `editor` (required) – The {@link module:core/editor/editor~Editor `Editor`} constructor to use.
|
|
|
* `data` – The initial data for the created editor. See the {@link builds/guides/integration/basic-api#interacting-with-the-editor Basic API} guide.
|
|
* `data` – The initial data for the created editor. See the {@link builds/guides/integration/basic-api#interacting-with-the-editor Basic API} guide.
|
|
|
* `config` – The editor configuration. See the {@link builds/guides/integration/configuration Configuration} guide.
|
|
* `config` – The editor configuration. See the {@link builds/guides/integration/configuration Configuration} guide.
|
|
|
-* `id` – The editor ID. When that property changes the component restarts the editor with new data instead of setting it on an initialized editor.
|
|
|
|
|
|
|
+* `id` – The editor ID. When this property changes, the component restarts the editor with new data instead of setting it on an initialized editor.
|
|
|
* `onReady` – A function called when the editor is ready with an {@link module:core/editor/editor~Editor `editor`} instance. This callback is also called after the reinitialization of the component if an error occurred.
|
|
* `onReady` – A function called when the editor is ready with an {@link module:core/editor/editor~Editor `editor`} instance. This callback is also called after the reinitialization of the component if an error occurred.
|
|
|
* `disabled` – A Boolean value. The {@link module:core/editor/editor~Editor `editor`} is being switched to read-only mode if the property is set to `true`.
|
|
* `disabled` – A Boolean value. The {@link module:core/editor/editor~Editor `editor`} is being switched to read-only mode if the property is set to `true`.
|
|
|
* `onChange` – A function called when the editor data has changed. See the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
|
|
* `onChange` – A function called when the editor data has changed. See the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
|
|
@@ -75,20 +75,20 @@ The `<CKEditor>` component supports the following properties:
|
|
|
* `onFocus` – A function called when the editor was focused. See the {@link module:engine/view/document~Document#event:focus `editor.editing.view.document#focus`} event.
|
|
* `onFocus` – A function called when the editor was focused. See the {@link module:engine/view/document~Document#event:focus `editor.editing.view.document#focus`} event.
|
|
|
* `onError` – A function called when the editor has crashed during the initialization or during the runtime. It receives two arguments: the error instance and the error details.
|
|
* `onError` – A function called when the editor has crashed during the initialization or during the runtime. It receives two arguments: the error instance and the error details.
|
|
|
Error details is an object that contains two properties:
|
|
Error details is an object that contains two properties:
|
|
|
- * `{String} phase`: `'initialization'|'runtime'` - Informs when the error has occurred (during the editor/context initialization or after the initialization).
|
|
|
|
|
- * `{Boolean} willEditorRestart` - When `true`, it means that the editor component will restart itself.
|
|
|
|
|
|
|
+ * `{String} phase`: `'initialization'|'runtime'` – Informs when the error has occurred (during the editor or context initialization, or after the initialization).
|
|
|
|
|
+ * `{Boolean} willEditorRestart` – When `true`, it means that the editor component will restart itself.
|
|
|
|
|
|
|
|
-The editor events callbacks (`onChange`, `onBlur`, `onFocus`) receive two arguments:
|
|
|
|
|
|
|
+The editor event callbacks (`onChange`, `onBlur`, `onFocus`) receive two arguments:
|
|
|
|
|
|
|
|
1. An {@link module:utils/eventinfo~EventInfo `EventInfo`} object.
|
|
1. An {@link module:utils/eventinfo~EventInfo `EventInfo`} object.
|
|
|
2. An {@link module:core/editor/editor~Editor `Editor`} instance.
|
|
2. An {@link module:core/editor/editor~Editor `Editor`} instance.
|
|
|
|
|
|
|
|
### Context feature
|
|
### Context feature
|
|
|
|
|
|
|
|
-The [`@ckeditor/ckeditor5-react`](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) package provides a ready-to-use component for the [Context feature](https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/context-and-collaboration-features.html) that is useful when used together with some [CKEditor 5 collaboration features](https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/collaboration.html).
|
|
|
|
|
|
|
+The [`@ckeditor/ckeditor5-react`](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) package provides a ready-to-use component for the [context feature](https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/context-and-collaboration-features.html) that is useful when used together with some [CKEditor 5 collaboration features](https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/collaboration.html).
|
|
|
|
|
|
|
|
```jsx
|
|
```jsx
|
|
|
-// This sample assumes that the application is using the CKEditor editor built from source.
|
|
|
|
|
|
|
+// This sample assumes that the application is using a CKEditor editor built from source.
|
|
|
import React, { Component } from 'react';
|
|
import React, { Component } from 'react';
|
|
|
import { CKEditor, CKEditorContext } from '@ckeditor/ckeditor5-react';
|
|
import { CKEditor, CKEditorContext } from '@ckeditor/ckeditor5-react';
|
|
|
|
|
|
|
@@ -104,7 +104,7 @@ class App extends Component {
|
|
|
return (
|
|
return (
|
|
|
<div className="App">
|
|
<div className="App">
|
|
|
<CKEditorContext context={ Context }>
|
|
<CKEditorContext context={ Context }>
|
|
|
- <h2>Using CKeditor 5 Context feature in React</h2>
|
|
|
|
|
|
|
+ <h2>Using CKeditor 5 context feature in React</h2>
|
|
|
<CKEditor
|
|
<CKEditor
|
|
|
editor={ ClassicEditor }
|
|
editor={ ClassicEditor }
|
|
|
config={ {
|
|
config={ {
|
|
@@ -141,16 +141,16 @@ The `CKEditorContext` component supports the following properties:
|
|
|
|
|
|
|
|
* `context` (required) – {@link module:core/context~Context The CKEditor 5 context class}.
|
|
* `context` (required) – {@link module:core/context~Context The CKEditor 5 context class}.
|
|
|
* `config` – The CKEditor 5 context configuration.
|
|
* `config` – The CKEditor 5 context configuration.
|
|
|
-* `isLayoutReady` – A property that delays the context creation when set to `false`. It creates the context and the editor children once it's `true` or unset. Useful when the CKEditor 5 annotations or a presence list is used.
|
|
|
|
|
-* `id` – The context ID. When that property changes the component restarts the context with its editor and reinitialize it based on the current configuration.
|
|
|
|
|
|
|
+* `isLayoutReady` – A property that delays the context creation when set to `false`. It creates the context and the editor children once it is `true` or unset. Useful when the CKEditor 5 annotations or a presence list is used.
|
|
|
|
|
+* `id` – The context ID. When this property changes, the component restarts the context with its editor and reinitializes it based on the current configuration.
|
|
|
* `onReady` – A function called when the context is ready and all editors inside were initialized with the `context` instance. This callback is also called after the reinitialization of the component if an error has occurred.
|
|
* `onReady` – A function called when the context is ready and all editors inside were initialized with the `context` instance. This callback is also called after the reinitialization of the component if an error has occurred.
|
|
|
* `onError` – A function called when the context has crashed during the initialization or during the runtime. It receives two arguments: the error instance and the error details.
|
|
* `onError` – A function called when the context has crashed during the initialization or during the runtime. It receives two arguments: the error instance and the error details.
|
|
|
Error details is an object that contains two properties:
|
|
Error details is an object that contains two properties:
|
|
|
- * `{String} phase`: `'initialization'|'runtime'` - Informs when the error has occurred (during the editor/context initialization or after the initialization).
|
|
|
|
|
- * `{Boolean} willContextRestart` - When `true`, it means that the context component will restart itself.
|
|
|
|
|
|
|
+ * `{String} phase`: `'initialization'|'runtime'` – Informs when the error has occurred (during the editor or context initialization, or after the initialization).
|
|
|
|
|
+ * `{Boolean} willContextRestart` – When `true`, it means that the context component will restart itself.
|
|
|
|
|
|
|
|
<info-box>
|
|
<info-box>
|
|
|
- A build that exposes both Context and Classic Editor can be found in a [CKEditor 5 collaboration sample](https://github.com/ckeditor/ckeditor5-collaboration-samples/blob/master/comments-outside-of-editor).
|
|
|
|
|
|
|
+ A build that exposes both context and classic editor can be found in the [CKEditor 5 collaboration sample](https://github.com/ckeditor/ckeditor5-collaboration-samples/blob/master/comments-outside-of-editor).
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
### Customizing the builds
|
|
### Customizing the builds
|
|
@@ -169,7 +169,7 @@ There are two main ways to do that.
|
|
|
Read more about this option in [Integrating CKEditor 5 from source](#integrating-ckeditor-5-built-from-source).
|
|
Read more about this option in [Integrating CKEditor 5 from source](#integrating-ckeditor-5-built-from-source).
|
|
|
|
|
|
|
|
<info-box>
|
|
<info-box>
|
|
|
- If you want to use the [Online builder](https://ckeditor.com/ckeditor-5/online-builder/), make sure that the Watchdog feature is not selected. The React integration comes with the Watchdog feature already integrated into the core.
|
|
|
|
|
|
|
+ If you want to use the [CKEditor 5 online builder](https://ckeditor.com/ckeditor-5/online-builder/), make sure that the watchdog feature is not selected. The React integration comes with the watchdog feature already integrated into the core.
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
### Building for production
|
|
### Building for production
|
|
@@ -746,7 +746,7 @@ module.exports = {
|
|
|
|
|
|
|
|
After building the application, CKEditor 5 will run with the UI translated to the specified language.
|
|
After building the application, CKEditor 5 will run with the UI translated to the specified language.
|
|
|
|
|
|
|
|
-For more information, please refer to the {@link features/ui-language "Setting UI language"} guide.
|
|
|
|
|
|
|
+For more information, please refer to the {@link features/ui-language Setting UI language} guide.
|
|
|
|
|
|
|
|
## Contributing and reporting issues
|
|
## Contributing and reporting issues
|
|
|
|
|
|