Sfoglia il codice sorgente

Merge pull request #203 from ckeditor/t/202

Docs: Created the feature guide. See #202.
Piotrek Koszuliński 7 anni fa
parent
commit
0ebf278d3c

+ 16 - 0
packages/ckeditor5-link/docs/_snippets/features/link.html

@@ -0,0 +1,16 @@
+<div id="snippet-link">
+	<h3>Valletta</h3>
+
+	<p>
+		The capital city of <a href="https://en.wikipedia.org/wiki/Malta">Malta</a> is the top destination
+		this summer. It’s home to a cutting-edge contemporary architecture,
+		<a href="https://en.wikipedia.org/wiki/Baroque">baroque</a>
+		masterpieces, delicious local cuisine and at least 8 months of sun.
+	</p>
+	<p>
+		It’s also a top destination for filmmakers, so you can take a tour through locations familiar
+		to you from <a href="https://en.wikipedia.org/wiki/Game_of_Thrones">Game
+		of Thrones</a>, <a href="https://en.wikipedia.org/wiki/Gladiator_(2000_film)">Gladiator</a>,
+		<a href="https://en.wikipedia.org/wiki/Troy_(film)">Troy</a> and many more.
+	</p>
+</div>

+ 35 - 0
packages/ckeditor5-link/docs/_snippets/features/link.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-link' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'link',
+				'bulletedList',
+				'numberedList',
+				'blockQuote',
+				'undo',
+				'redo'
+			],
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

BIN
packages/ckeditor5-link/docs/assets/img/typing-before.gif


BIN
packages/ckeditor5-link/docs/assets/img/typing-inside.gif


+ 74 - 0
packages/ckeditor5-link/docs/features/link.md

@@ -0,0 +1,74 @@
+---
+title: Link
+category: features
+---
+
+The {@link module:link/link~Link} plugin brings the link editing to the editor. It allows links in the edited content and offers the UI to create and edit them.
+
+## Demo
+
+You can edit existing links by clicking them and using the balloon. Use the toolbar button press or press <kbd>Ctrl/⌘</kbd>+<kbd>K</kbd> to create new links.
+
+{@snippet features/link}
+
+### Typing around links
+
+CKEditor 5 allows typing both at inner and outer boundaries of links to make the editing easier for the users.
+
+**To type inside a link**, move the caret to its (start or end) boundary. As long as the link remains highlighted blue, typing and and applying formatting will be done within its boundaries:
+
+{@img assets/img/typing-inside.gif 770 The animation showing typing inside the link in CKEditor 5 rich text editor.}
+
+**To type before or after a link**, move the caret to its boundary, then press the arrow key (<kbd>→</kbd> or <kbd>←</kbd>) once. The link is no longer highlighted and whatever text you type or formatting you apply will not be enclosed by a link:
+
+{@img assets/img/typing-before.gif 770 The animation showing typing before the link in CKEditor 5 rich text editor.}
+
+## 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-link`](https://www.npmjs.com/package/@ckeditor/ckeditor5-link) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-link
+```
+
+Then add `Link` plugin to your plugin list:
+
+```js
+import Link from '@ckeditor/ckeditor5-link/src/link';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Link, ... ],
+		toolbar: [ 'link', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+## Common API
+
+The {@link module:link/link~Link} plugin registers the UI button component (`'link'`) and the following commands:
+
+* The `'link'` command implemented by {@link module:link/linkcommand~LinkCommand}.
+* The `'unlink'` command implemented by {@link module:link/unlinkcommand~UnlinkCommand}.
+
+which can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Applies the link to the selected content.
+// When the selection is collapsed, it creates a new text wrapped in a link.
+editor.execute( 'link', 'http://example.com' );
+
+// Removes the link from the selection.
+editor.execute( 'unlink' );
+```
+
+Links are represented in the {@link module:engine/model/model~Model model} using the `linkHref` attribute.
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-link.