8
0
Просмотр исходного кода

Docs: Added remaining snippets.

Piotrek Koszuliński 8 лет назад
Родитель
Сommit
bd771a9976

+ 9 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.html

@@ -0,0 +1,9 @@
+<div id="snippet-image-style-custom">
+	<p>An image to play with:</p>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+
+	<p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.</p>
+</div>

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

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import './image-style-custom.scss';
+
+import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
+import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-style-custom' ), {
+		image: {
+			styles: [
+				// This option is equal to a situation where no style is applied.
+				{
+					name: 'imageStyleFull',
+					title: 'Full size image',
+					icon: fullSizeIcon,
+					value: null
+				},
+
+				// This represents an image aligned to left.
+				{
+					name: 'imageStyleLeft',
+					title: 'Left aligned image',
+					icon: alignLeftIcon,
+					value: 'left',
+					className: 'image-style-left'
+				},
+
+				// This represents an image aligned to right.
+				{
+					name: 'imageStyleRight',
+					title: 'Right aligned image',
+					icon: alignRightIcon,
+					value: 'right',
+					className: 'image-style-right'
+				}
+			],
+
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ]
+		}
+	} )
+	.then( editor => {
+		window.editorStyleCustom = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 14 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.scss

@@ -0,0 +1,14 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.image-style-left {
+    float: left;
+    width: 50%;
+    margin: 1em 1em 1em 0;
+}
+
+.image-style-right {
+    float: right;
+    width: 50%;
+    margin: 1em 0 1em 1em;
+}

+ 15 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style.html

@@ -0,0 +1,15 @@
+<div id="snippet-image-style">
+	<p>This is full width image (default style):</p>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+
+	<p>This is side image:</p>
+
+	<figure class="image image-style-side">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+
+	<p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.</p>
+</div>

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

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-style' ) )
+	.then( editor => {
+		window.editorStyle = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 30 - 10
packages/ckeditor5-image/docs/features/image.md

@@ -105,7 +105,7 @@ A side image:
 
 Below you can see a demo of the editor with the image styles feature enabled. The default configuration is used. You can change the styles of images through the image's contextual toolbar.
 
-{@snippetTODO image-style}
+{@snippet features/image-style}
 
 ### Configuring image styles
 
@@ -123,16 +123,33 @@ ClassicEditor
 		image: {
 			styles: [
 				// This option is equal to a situation where no style is applied.
-				{ name: 'imageStyleFull', title: 'Full size image', icon: fullSizeIcon, value: null },
+				{
+					name: 'imageStyleFull',
+					title: 'Full size image',
+					icon: fullSizeIcon,
+					value: null
+				},
 
 				// This represents an image aligned to left.
-				{ name: 'imageStyleLeft', title: 'Left aligned image', icon: alignLeftIcon, value: 'left', className: 'image-style-left' },
+				{
+					name: 'imageStyleLeft',
+					title: 'Left aligned image',
+					icon: alignLeftIcon,
+					value: 'left',
+					className: 'image-style-left'
+				},
 
 				// This represents an image aligned to right.
-				{ name: 'imageStyleRight', title: 'Right aligned image', icon: alignRightIcon, value: 'right', className: 'image-style-right' }
+				{
+					name: 'imageStyleRight',
+					title: 'Right aligned image',
+					icon: alignRightIcon,
+					value: 'right',
+					className: 'image-style-right'
+				}
 			],
 
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleFull', 'imageStyleLeft', 'imageStyleRight' ]
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ]
 		}
 	} )
 	.then( ... )
@@ -141,17 +158,20 @@ ClassicEditor
 
 ```css
 .image-style-left {
-	float: left;
-	width: 50%;
+    float: left;
+    width: 50%;
+    margin: 1em 1em 1em 0;
 }
 
 .image-style-right {
-	float: right;
-	width: 50%;
+    float: right;
+    width: 50%;
+    margin: 1em 0 1em 1em;
 }
+
 ```
 
-{@snippetTODO image-style-custom}
+{@snippet features/image-style-custom}
 
 <info-box hint>
 	In the example above the options used represent simple "align left" and "align right" styles. Most text editors support left, center, right alignments, however, try not to think about CKEditor 5's image styles in this way. Try to understand what use cases the system needs to support and define semantical options accordingly. Defining useful and clear styles is one of the steps towards a good user experience and clear, portable output. For example, the "side image" style can be displayed as a floated image on wide screens and as a normal image on low resolution screens.