浏览代码

Docs: Introduced config docs.

Piotrek Koszuliński 8 年之前
父节点
当前提交
ca311ee2b9

+ 23 - 0
packages/ckeditor5-image/src/image.js

@@ -58,3 +58,26 @@ export default class Image extends Plugin {
 		}
 	}
 }
+
+/**
+ * The configuration of the image features. Used by the image features in `@ckeditor/ckeditor5-image` package.
+ *
+ * Read more in {@link module:image/image~ImageConfig}.
+ *
+ * @member {module:image/image~ImageConfig} module:core/editor/editorconfig~EditorConfig#image
+ */
+
+/**
+ * The configuration of the image features. Used by the image features in `@ckeditor/ckeditor5-image` package.
+ *
+ *		ClassicEditor
+ *			.create( {
+ * 				image: ... // Image feature options.
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface ImageConfig
+ */

+ 40 - 0
packages/ckeditor5-image/src/imagestyle.js

@@ -72,3 +72,43 @@ export default class ImageStyle extends Plugin {
 		} );
 	}
 }
+
+/**
+ * Available image styles.
+ * The option is used by the {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine} feature.
+ *
+ * The default value is:
+ *
+ *		import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+ *		import sideIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+ *
+ *		// ...
+ *
+ *		const imageConfig = {
+ *			styles: [
+ *				// Option which defines a style which doesn't apply any class.
+ *				// The style is titled "full" because such images are often styled to take 100% width of the content.
+ *				{ name: 'imageStyleFull', title: t( 'Full size image' ), icon: fullSizeIcon, value: null },
+ *
+ *				// Option which represents a side image.
+ *				{ name: 'imageStyleSide', title: t( 'Side image' ), icon: sideIcon, value: 'side', className: 'image-style-side' }
+ *			]
+ *		};
+ *
+ * Read more about styling images in the {@linkTODO Image styles guide}.
+ *
+ * The feature creates commands based on defined styles, so you can change the style of a selected image by executing
+ * the following command:
+ *
+ *		editor.execute( 'imageStyleSide' );
+ *
+ * The features creates also buttons which execute the commands, so assuming that you use the
+ * default image styles setting you can {@link module:image/image~ImageConfig#toolbar configure the image toolbar}
+ * to contain these options:
+ *
+ *		const imageConfig = {
+ *			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
+ *		};
+ *
+ * @member {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat>} module:image/image~ImageConfig#styles
+ */

+ 10 - 10
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -77,23 +77,23 @@ export default class ImageStyleEngine extends Plugin {
 /**
  * Image style format descriptor.
  *
- *	import fullIcon from 'path/to/icon.svg`;
+ *		import fullIcon from 'path/to/icon.svg`;
  *
- *	const imageStyleFormat = {
- *		name: 'fullSizeImage',
- *		value: 'full',
- *		icon: fullIcon,
- *		title: `Full size image`,
- *		class: `image-full-size`
- *	}
+ *		const imageStyleFormat = {
+ *			name: 'fullSizeImage',
+ *			value: 'full',
+ *			icon: fullIcon,
+ *			title: 'Full size image',
+ *			class: 'image-full-size'
+ *		}
  *
  * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
  * @property {String} name The name of the style. It will be used to:
  * * register the {@link module:core/command~Command command} which will apply this style,
- * * store the style's button in the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
+ * * store the style's button in the editor {@link module:ui/componentfactory~ComponentFactory}.
  * @property {String} value A value used to store this style in the model attribute.
  * When the value is `null`, the style will be used as the default one. A default style does not apply any CSS class to the view element.
- * @property {String} icon An SVG icon representation to use when creating the style's button.
+ * @property {String} icon An SVG icon source (as XML string) to use when creating the style's button.
  * @property {String} title The style's title.
  * @property {String} className The CSS class used to represent the style in view.
  */

+ 24 - 0
packages/ckeditor5-image/src/imagetoolbar.js

@@ -159,3 +159,27 @@ export default class ImageToolbar extends Plugin {
 		return this._balloon.visibleView == this._toolbar;
 	}
 }
+
+/**
+ * Items to be placed in the image toolbar.
+ * The option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
+ *
+ * Assuming that you use the following features:
+ *
+ * * {@link module:image/imagestyle~ImageStyle} (with a default configuration),
+ * * {@link module:image/imagetextalternative~ImageTextAlternative}.
+ *
+ * Three toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
+ * `'imageStyleFull'`, `'imageStyleSide'`, and `'imageTextAlternative'` so you can configure the toolbar like this:
+ *
+ *		const imageConfig = {
+ *			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+ *		};
+ *
+ * Of course, the same buttons can also be used in the
+ * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
+ *
+ * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+ *
+ * @member {Array.<String>} module:image/image~ImageConfig#toolbar
+ */