ソースを参照

Added feature guides.

Piotrek Koszuliński 6 年 前
コミット
c8ef7b57ec

+ 0 - 0
packages/ckeditor5-image/docs/_snippets/features/build-image-source.html


+ 14 - 0
packages/ckeditor5-image/docs/_snippets/features/build-image-source.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+
+ClassicEditor.builtinPlugins.push( ImageResize );
+
+window.ClassicEditor = ClassicEditor;

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-caption.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-caption' ), {
-		removePlugins: [ 'ImageStyle' ],
+		removePlugins: [ 'ImageStyle', 'ImageResize' ],
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		},

+ 14 - 0
packages/ckeditor5-image/docs/_snippets/features/image-resize-px.html

@@ -0,0 +1,14 @@
+<div id="snippet-image-resize-px">
+	<h2>Resize me!</h2>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+
+	<h2>Resized image (width: 400px):</h2>
+
+	<figure class="image image_resized" style="width:400px;">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+</div>

+ 25 - 0
packages/ckeditor5-image/docs/_snippets/features/image-resize-px.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-resize-px' ), {
+		image: {
+			resizeUnit: 'px'
+		},
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResizePX = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

+ 14 - 0
packages/ckeditor5-image/docs/_snippets/features/image-resize.html

@@ -0,0 +1,14 @@
+<div id="snippet-image-resize">
+	<h2>Resize me!</h2>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+
+	<h2>Resized image (width: 75%):</h2>
+
+	<figure class="image image_resized" style="width:75%;">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+</div>

+ 22 - 0
packages/ckeditor5-image/docs/_snippets/features/image-resize.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-resize' ), {
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResize = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

+ 1 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -9,6 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
+		removePlugins: [ 'ImageResize' ],
 		image: {
 			styles: [
 				// This option is equal to a situation where no style is applied.

+ 1 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style.js

@@ -9,6 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style' ), {
+		removePlugins: [ 'ImageResize' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-toolbar.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-toolbar' ), {
-		removePlugins: [ 'ImageCaption', 'ImageStyle' ],
+		removePlugins: [ 'ImageCaption', 'ImageStyle', 'ImageResize' ],
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		},

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image' ), {
-		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle' ],
+		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

+ 28 - 2
packages/ckeditor5-image/docs/features/image.md

@@ -3,7 +3,7 @@ title: Images
 category: features
 ---
 
-{@snippet build-classic-source}
+{@snippet features/build-image-source}
 
 The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains multiple plugins that implement various image-related features:
 
@@ -13,9 +13,12 @@ The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckedit
 * {@link module:image/imagestyle~ImageStyle} adds support for image styles.
 * {@link module:image/imagetextalternative~ImageTextAlternative} adds support for adding text alternative.
 * {@link module:image/imageupload~ImageUpload} adds support for uploading dropped or pasted images (see: {@link features/image-upload Image upload}).
+* {@link module:image/imageresize~ImageResize} adds support for resizing images.
 
 <info-box info>
-	All features listed above are enabled by default in all builds.
+	All features listed above expect image resize are enabled by default in all builds.
+
+	Check the documentation of each sub-feature to learn more about it.
 </info-box>
 
 ## Base image support
@@ -175,6 +178,29 @@ See the {@link features/image-upload Image upload} guide.
 
 Responsive images support in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Learn more how to use the feature in your project in the {@link features/easy-image#responsive-images "Easy Image integration"} guide.
 
+## Resizing images
+
+TODO:
+
+* overview
+* markup
+* styling concerns
+* installation
+* note about it not being enabled by default
+* a note about followups? a dialog, a toggle predefined sizes (e.g. 40%, 50%, 75%, 100%)
+
+{@snippet features/image-resize}
+
+### Using pixels instead of percentage width
+
+TODO:
+
+* overview
+* downsides
+* configuration
+
+{@snippet features/image-resize-px}
+
 ## Installation
 
 To add image features to your editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package: