Bladeren bron

Docs: Added remaining snippets.

Piotrek Koszuliński 8 jaren geleden
bovenliggende
commit
bd771a9976

File diff suppressed because it is too large
+ 9 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.html


+ 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 );
+	} );

File diff suppressed because it is too large
+ 30 - 10
packages/ckeditor5-image/docs/features/image.md