浏览代码

Stub mention docs pages.

Maciej Gołaszewski 6 年之前
父节点
当前提交
27084d9da4

+ 6 - 0
packages/ckeditor5-mention/docs/_snippets/features/build-mention-source.html

@@ -0,0 +1,6 @@
+<style>
+	.mention {
+		background: hsla(341, 100%, 87%, 0.4);
+		color: hsl(340, 100%, 31%);
+	}
+</style>

+ 13 - 0
packages/ckeditor5-mention/docs/_snippets/features/build-mention-source.js

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import Mention from '@ckeditor/ckeditor5-mention/src/mention';
+
+ClassicEditor.builtinPlugins.push( Mention );
+
+window.ClassicEditor = ClassicEditor;

+ 3 - 0
packages/ckeditor5-mention/docs/_snippets/features/mention.html

@@ -0,0 +1,3 @@
+<div id="snippet-media-embed">
+	<p>Hello <span class="mention" data-mention="Ted">@Ted</span>.</p></p>
+</div>

+ 31 - 0
packages/ckeditor5-mention/docs/_snippets/features/mention.js

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-mention-embed' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig(),
+			mention: [
+				{
+					marker: '@',
+					feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ]
+				}
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 34 - 0
packages/ckeditor5-mention/docs/api/mention.md

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

+ 56 - 0
packages/ckeditor5-mention/docs/features/mention.md

@@ -0,0 +1,56 @@
+---
+category: features
+---
+
+{@snippet features/build-mention-source}
+
+# Mention
+
+The {@link module:mention/mention~Mention} feature brings support for smart completion based on user input. When user types a pre-configured marker, such as `@` or `#`, they get an autocomplete suggestions in a balloon panel displayed next to a caret. The selected suggestion is inserted to the content.
+
+## Demo
+
+{@snippet features/mention}
+
+## Installation
+
+<info-box info>
+	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.
+</info-box>
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-mention`](https://www.npmjs.com/package/@ckeditor/ckeditor5-mention) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-mention
+```
+
+Then add `Mention` to your plugin list and {@link module:mention/mention~MentionConfig configure} the feature (if needed):
+
+```js
+import Mention from '@ckeditor/ckeditor5-mention/src/mention';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Mention, ... ],
+		mention: {
+			// configuration...
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+## Common API
+
+The {@link module:mention/mention~Mention} plugin registers:
+* the `'mention'` command implemented by {@link module:mention/mentioncommand~MentionCommand}.
+
+	You can insert a mention element by executing the following code:
+
+	```js
+	editor.execute( 'mention', { marker: '@', mention: 'John' } );
+	```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-mention.