Ver código fonte

Docs: Corrected the grammar and punctuation. Extended and improved the Localization section of the React integration guide.

Aleksander Nowodzinski 6 anos atrás
pai
commit
857b4e3169
1 arquivos alterados com 36 adições e 38 exclusões
  1. 36 38
      docs/builds/guides/frameworks/react.md

+ 36 - 38
docs/builds/guides/frameworks/react.md

@@ -561,47 +561,51 @@ export default App;
 
 ## Localization
 
-### Using ready-to-use builds
+CKEditor 5 supports {@link features/ui-language multiple UI languages}, and so does the official React component. Follow the instructions below to translate CKEditor 5 in your React application.
 
-The CKEditor 5 component can be localized in two steps.
+### Ready-to-use builds
 
-#### 1. Loading translation files
-
-First, you need to add translation files to the bundle. 
+When using one of the {@link builds/guides/overview#available-builds official editor builds}, you need to import the translations first:
 
 ```js
-import '@ckeditor/ckeditor5-build-classic/build/translations/de';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+// Import translations for the German language.
+import '@ckeditor/ckeditor5-build-classic/build/translations/de';
+
 // ...
 ```
 
-#### 2. Configuring the language
-
-Then, you need to configure the editor to use the given language:
+Then, {@link builds/guides/integration/configuration configure} the language of the editor in the component:
 
 ```jsx
 <CKEditor
-    config={ {
-        language: 'de',
-        // ...
-    } }
-    editor={ ClassicEditor }
-    data="<p>Hello from CKEditor 5!</p>"
+	config={ {
+		// Use the German language for this editor.
+		language: 'de',
+
+		// ...
+	} }
+	editor={ ClassicEditor }
+	data="<p>Hello from CKEditor 5!</p>"
 />
 ```
 
-For advanced usage see the {@link features/ui-language Setting UI language} guide.
+For more information, please refer to the {@link features/ui-language "Setting UI language"} guide.
 
-### Using CKEditor 5 Framework
+### CKEditor 5 built from source
 
-Using the framework requires to modify the webpack configuration once again. Firstly, you need to install our webpack plugin that
-allows localizing the editor build. 
+Using the editor [built from source](#integrating-ckeditor-5-built-from-source) requires you to modify the webpack configuration. First, install the [official webpack plugin](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) that allows localizing editor builds:
 
 ```bash
 npm install @ckeditor/ckeditor5-dev-webpack-plugin --save-dev
 ```
 
-Then, add the plugin to the webpack configuration:
+Then, add the installed plugin to the webpack configuration:
+
+<info-box>
+	We assume that you use `create-react-app@2`. For earlier versions, make sure to modify [both webpack configuration files](#changes-required-in-webpacks-production-configuration).
+</info-box>
 
 ```js
 // webpack.config.js
@@ -611,32 +615,26 @@ Then, add the plugin to the webpack configuration:
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 
 module.exports = {
-  // ...
-
-  optimization: { /* ... */ },
+	// ...
 
-  plugins: [
-    // ....
+	plugins: [
+		// ....
 
-    new CKEditorWebpackPlugin( {
-      // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-      language: 'de'
-    } ),
+		new CKEditorWebpackPlugin( {
+			// The UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+			language: 'de'
+		} ),
 
-    // ....
-  ],
-
-  module: { /* ... */ },
+		// ....
+	],
 
-  // ...
+	// ...
 };
 ```
 
-After building the application, CKEditor 5 will be translated to the specified language.
-
-This guide assumed that you're using `create-react-app@2`. For lower versions, you need to remember to modify two webpack configurations.
+After building the application, CKEditor 5 will run with the UI translated to the specified language.
 
-For advanced usage see 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