瀏覽代碼

Docs: Added remaining snippets.

Piotrek Koszuliński 8 年之前
父節點
當前提交
bd771a9976

文件差異過大導致無法顯示
+ 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 );
+	} );

文件差異過大導致無法顯示
+ 30 - 10
packages/ckeditor5-image/docs/features/image.md