Parcourir la source

Docs: Added remaining snippets.

Piotrek Koszuliński il y a 8 ans
Parent
commit
bd771a9976

Fichier diff supprimé car celui-ci est trop grand
+ 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 );
+	} );

Fichier diff supprimé car celui-ci est trop grand
+ 30 - 10
packages/ckeditor5-image/docs/features/image.md