浏览代码

Improved the documentation of the plugin.

Kamil Piechaczek 6 年之前
父节点
当前提交
9856072f24

+ 6 - 0
packages/ckeditor5-horizontal-line/docs/_snippets/features/horizontal-rule.html

@@ -0,0 +1,6 @@
+<div id="demo-editor">
+	<h1>What is Lorem Ipsum?</h1>
+	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+	<hr>
+	<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+</div>

+ 45 - 0
packages/ckeditor5-horizontal-line/docs/_snippets/features/horizontal-rule.js

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import HorizontalRule from '@ckeditor/ckeditor5-horizontal-rule/src/horizontalrule';
+
+ClassicEditor.builtinPlugins.push( HorizontalRule );
+
+ClassicEditor
+	.create( document.querySelector( '#demo-editor' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'bulletedList',
+				'numberedList',
+				'blockQuote',
+				'link',
+				'|',
+				'mediaEmbed',
+				'insertTable',
+				'|',
+				'undo',
+				'redo',
+				'|',
+				'horizontalRule'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 34 - 0
packages/ckeditor5-horizontal-line/docs/api/horizontal-rule.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# Horizontal rule feature for CKEditor 5
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-horizontal-rule.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-horizontal-rule)
+
+This package implements the horizontal rule feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/horizontal-rule#demo demo in the Horizontal rule feature} guide.
+
+## Documentation
+
+See the {@link features/horizontal-rule Horizontal rule feature} guide and the {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-horizontal-rule
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-horizontal-rule.
+
+## External links
+
+* [`@ckeditor/ckeditor5-horizontal-rule` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-horizontal-rule)
+* [`ckeditor/ckeditor5-horizontal-rule` on GitHub](https://github.com/ckeditor/ckeditor5-horizontal-rule)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-horizontal-rule/blob/master/CHANGELOG.md)

+ 43 - 0
packages/ckeditor5-horizontal-line/docs/features/horizontal-rule.md

@@ -0,0 +1,43 @@
+---
+category: features
+menu-title: Horizontal rule
+---
+
+# Horizontal rule
+
+The {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin provides a possibility to insert a horizontal rule in the rich-text editor.
+
+## Demo
+
+Use the editor below to see the {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin in action.
+
+{@snippet features/horizontal-rule}
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-horizontal-rule`](https://www.npmjs.com/package/@ckeditor/ckeditor5-horizontal-rule) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-horizontal-rule
+```
+
+And add it to your plugin list configuration:
+
+```js
+import HorizontalRule from '@ckeditor/ckeditor5-horizontal-rule/src/horizontalrule';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ HorizontalRule, ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-horizontal-rule.

+ 1 - 2
packages/ckeditor5-horizontal-line/src/horizontalrule.js

@@ -12,8 +12,7 @@ import HorizontalRuleEditing from './horizontalruleediting';
 import HorizontalRuleUI from './horizontalruleui';
 
 /**
- * The horizontal rule plugin.
- *
+ * The horizontal rule plugin provides a possibility to insert a horizontal rule in the rich-text editor.
  *
  * @extends module:core/plugin~Plugin
  */

+ 11 - 1
packages/ckeditor5-horizontal-line/src/horizontalrulecommand.js

@@ -8,9 +8,19 @@
  */
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
-import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
 import { isHorizontalRuleAllowed } from './utils';
 
+/**
+ * The insert a horizontal rule command.
+ *
+ * The command is registered by the {@link module:horizontal-rule/horizontalruleediting~HorizontalRuleEditing} as `'horizontalRule'`.
+ *
+ * To insert the horizuntal rule at the current selection, execute the command:
+ *
+ *		editor.execute( 'horizontalRule' );
+ *
+ * @extends module:core/command~Command
+ */
 export default class HorizontalRuleCommand extends Command {
 	/**
 	 * @inheritDoc

+ 2 - 0
packages/ckeditor5-horizontal-line/src/horizontalruleediting.js

@@ -14,6 +14,8 @@ import { toHorizontalRuleWidget } from './utils';
 import '../theme/horizontalrule.css';
 
 /**
+ * The horizontal rule editing feature.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class HorizontalRuleEditing extends Plugin {

+ 2 - 0
packages/ckeditor5-horizontal-line/src/horizontalruleui.js

@@ -12,6 +12,8 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import horizontalRuleIcon from '../theme/icons/horizontalrule.svg';
 
 /**
+ * The horizontal rule UI plugin.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class HorizontalRuleUI extends Plugin {

+ 5 - 0
packages/ckeditor5-horizontal-line/src/utils.js

@@ -10,6 +10,11 @@
 import { findOptimalInsertionPosition, isWidget, toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 
 /**
+ * Converts a given {@link module:engine/view/element~Element} to a horizontal rule widget:
+ * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to
+ * recognize the horizontal rule widget element.
+ * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
+ *
  * @param {module:engine/view/element~Element} viewElement
  * @param {module:engine/view/downcastwriter~DowncastWriter} writer An instance of the view writer.
  * @param {String} label The element's label.