8
0
Quellcode durchsuchen

Docs: Added read-only and UI lang guides. [skip ci]

Piotrek Koszuliński vor 8 Jahren
Ursprung
Commit
cec276a34f

+ 14 - 13
docs/_snippets/examples/classic-editor.js

@@ -9,16 +9,17 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 
 import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
 
-ClassicEditor.create( document.querySelector( '#snippet-classic-editor' ), {
-	plugins: [ ArticlePreset ],
-	toolbar: [ 'headings', 'bold', 'italic', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
-	image: {
-		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
-	}
-} )
-.then( editor => {
-	window.editor = editor;
-} )
-.catch( err => {
-	console.error( err.stack );
-} );
+ClassicEditor
+	.create( document.querySelector( '#snippet-classic-editor' ), {
+		plugins: [ ArticlePreset ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 14 - 13
docs/_snippets/examples/inline-editor.js

@@ -9,16 +9,17 @@ import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
 
 import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
 
-InlineEditor.create( document.querySelector( '#snippet-inline-editor' ), {
-	plugins: [ ArticlePreset ],
-	toolbar: [ 'headings', 'bold', 'italic', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
-	image: {
-		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
-	}
-} )
-.then( editor => {
-	window.editor = editor;
-} )
-.catch( err => {
-	console.error( err.stack );
-} );
+InlineEditor
+	.create( document.querySelector( '#snippet-inline-editor' ), {
+		plugins: [ ArticlePreset ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 7 - 0
docs/_snippets/features/read-only.html

@@ -0,0 +1,7 @@
+<p>
+	<button id="snippet-read-only-toggle">Switch to read-only mode</button>
+</p>
+
+<div id="snippet-read-only">
+	<p>This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+</div>

+ 33 - 0
docs/_snippets/features/read-only.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-read-only' ), {
+		plugins: [ ArticlePreset ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const button = document.querySelector( '#snippet-read-only-toggle' );
+
+		button.addEventListener( 'click', () => {
+			editor.isReadOnly = !editor.isReadOnly;
+
+			button.innerText = editor.isReadOnly ? 'Switch to editable mode' : 'Switch to read-only mode';
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 3 - 0
docs/_snippets/features/ui-language.html

@@ -0,0 +1,3 @@
+<div id="snippet-ui-language">
+	<p>This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+</div>

+ 27 - 0
docs/_snippets/features/ui-language.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+/* config { "language": "de" } */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-ui-language' ), {
+		plugins: [ ArticlePreset ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 10 - 0
docs/features/read-only.md

@@ -0,0 +1,10 @@
+---
+title: Read-only support
+category: features
+---
+
+The editor can be set into a read-only mode by changing the value of {@link module:core/editor/editor~Editor#isReadOnly `Editor#isReadOnly`} property.
+
+See the demo below:
+
+{@snippet features/read-only}

+ 53 - 0
docs/features/ui-language.md

@@ -0,0 +1,53 @@
+---
+title: Setting editor UI language
+category: features
+---
+
+The UI of the editor can be localized. CKEditor 5 currently supports around 20 languages and the number is growing.
+
+If you want to help in translating CKEditor 5 to your language please join the [CKEditor 5 project on Transifex](https://www.transifex.com/ckeditor/ckeditor5/).
+
+See the demo of the editor in German:
+
+{@snippet features/ui-language}
+
+## Building editor using specific language
+
+Currently, it's only possible to change the UI language at the build stage. A single build of the editor supports only the language which was defined in the [CKEditor 5 Webpack plugin](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin)'s configuration.
+
+If you use one of the {@link builds/index predefined editor builds}, refer to {@linkTODO builds/guides/development/custom-builds.md Creating custom builds} to learn how to change the language of your build.
+
+If you build CKEditor from scratch or integrate it directly into your application, then all you need to do is to:
+
+1. Install the [`@ckeditor/ckeditor5-dev-webpack-plugin`](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) package:
+
+	```
+	npm install --save @ckeditor/ckeditor5-dev-webpack-plugin
+	```
+
+2. Add it to your Webpack config:
+
+	(Note: the language code is defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.)
+
+	```js
+	const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
+
+	// Define Webpack plugins ...
+		plugins: [
+			new CKEditorWebpackPlugin( {
+				// Note: currently, the plugin is able to build just one language at a time.
+				languages: [ 'pl' ]
+			} ),
+
+			// Other Webpack plugins...
+		]
+	// ...
+	```
+
+3. Run Webpack. The CKEditor plugin for Webpack will replace {@link module:utils/locale~Locale#t `t()`} function calls used in the source code with the localized language strings.
+
+<info-box>
+	We are aware that the current localization method is not sufficient for all needs. It neither supports different bundlers (e.g. Rollup or Browserify) nor building multiple languages (so it's possible to pick one at runtime). We will be extending the localization possiblities in near future.
+
+	You can read more about the used techniques and future plans in the ["Implement translation services" issue](https://github.com/ckeditor/ckeditor5/issues/387).
+</info-box>

+ 1 - 0
scripts/docs/snippet-adapter/package.json

@@ -2,6 +2,7 @@
   "name": "ckeditor5-snippet-adapter",
   "private": true,
   "dependencies": {
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^2.0.11",
     "babili-webpack-plugin": "^0.1.2",
     "css-loader": "^0.28.4",
     "node-sass": "^4.5.3",

+ 20 - 1
scripts/docs/snippet-adapter/snippetadapter.js

@@ -9,13 +9,17 @@ const path = require( 'path' );
 const fs = require( 'fs' );
 const webpack = require( 'webpack' );
 const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
+const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 
 // const BabiliPlugin = require( 'babili-webpack-plugin' );
 
 module.exports = function snippetAdapter( data ) {
+	const snippetConfig = readSnippetConfig( data.snippetSource.js );
+
 	const webpackConfig = getWebpackConfig( {
 		entry: data.snippetSource.js,
-		outputPath: path.join( data.outputPath, data.snippetPath )
+		outputPath: path.join( data.outputPath, data.snippetPath ),
+		language: snippetConfig.language
 	} );
 
 	return runWebpack( webpackConfig )
@@ -42,6 +46,9 @@ function getWebpackConfig( config ) {
 		},
 
 		plugins: [
+			new CKEditorWebpackPlugin( {
+				languages: [ config.language || 'en' ]
+			} ),
 			// new BabiliPlugin( null, {
 			// 	comments: false
 			// } ),
@@ -113,3 +120,15 @@ function getModuleResolvePaths() {
 		'node_modules'
 	];
 }
+
+function readSnippetConfig( snippetSourcePath ) {
+	const snippetSource = fs.readFileSync( snippetSourcePath ).toString();
+
+	const configSourceMatch = snippetSource.match( /\n\/\* config ([\s\S]+?)\*\// );
+
+	if ( !configSourceMatch ) {
+		return {};
+	}
+
+	return JSON.parse( configSourceMatch[ 1 ] );
+}