diff --git a/docs/_snippets/features/build-link-source.html b/docs/_snippets/features/build-link-source.html new file mode 100644 index 0000000..e69de29 diff --git a/docs/_snippets/features/build-link-source.js b/docs/_snippets/features/build-link-source.js new file mode 100644 index 0000000..e50af69 --- /dev/null +++ b/docs/_snippets/features/build-link-source.js @@ -0,0 +1,12 @@ +/** + * @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 */ + +import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; +import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; + +window.ClassicEditor = ClassicEditor; +window.CS_CONFIG = CS_CONFIG; diff --git a/docs/_snippets/features/link.js b/docs/_snippets/features/link.js index ef43ff2..e6bcd2e 100644 --- a/docs/_snippets/features/link.js +++ b/docs/_snippets/features/link.js @@ -3,10 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -/* 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'; +/* globals console, window, document, ClassicEditor, CS_CONFIG */ ClassicEditor .create( document.querySelector( '#snippet-link' ), { diff --git a/docs/_snippets/features/linkdecorators.html b/docs/_snippets/features/linkdecorators.html new file mode 100644 index 0000000..0112843 --- /dev/null +++ b/docs/_snippets/features/linkdecorators.html @@ -0,0 +1,14 @@ +
+
+
diff --git a/docs/_snippets/features/linkdecorators.js b/docs/_snippets/features/linkdecorators.js
new file mode 100644
index 0000000..360c5ea
--- /dev/null
+++ b/docs/_snippets/features/linkdecorators.js
@@ -0,0 +1,70 @@
+/**
+ * @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 console, window, document, Worker, setTimeout, ClassicEditor, CS_CONFIG */
+
+ClassicEditor
+ .create( document.querySelector( '#snippet-link-decorators' ), {
+ cloudServices: CS_CONFIG,
+ toolbar: {
+ items: [
+ 'heading',
+ '|',
+ 'bold',
+ 'italic',
+ 'link',
+ 'bulletedList',
+ 'numberedList',
+ 'blockQuote',
+ 'undo',
+ 'redo'
+ ],
+ viewportTopOffset: window.getViewportTopOffsetConfig()
+ },
+ link: {
+ targetDecorator: true,
+ decorators: [
+ {
+ mode: 'manual',
+ label: 'Downloadable',
+ attributes: {
+ download: 'download'
+ }
+ }
+ ]
+ }
+ } )
+ .then( editor => {
+ if ( !window.editors ) {
+ window.editors = {};
+ }
+ window.editors.decorators = editor;
+
+ const outputElement = document.querySelector( '#output-link-decorators' );
+ const worker = new Worker( window.umberto.relativeAppPath + '/highlight.worker.js' );
+
+ worker.addEventListener( 'message', evt => {
+ const data = JSON.parse( evt.data );
+
+ outputElement.innerHTML = data.payload;
+ } );
+
+ editor.model.document.on( 'change', () => {
+ worker.postMessage( JSON.stringify( {
+ payload: editor.getData(),
+ language: 'html'
+ } ) );
+ } );
+
+ setTimeout( () => {
+ worker.postMessage( JSON.stringify( {
+ payload: editor.getData(),
+ language: 'html'
+ } ) );
+ }, 500 );
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
diff --git a/docs/features/link.md b/docs/features/link.md
index e927b74..ec9a67d 100644
--- a/docs/features/link.md
+++ b/docs/features/link.md
@@ -3,6 +3,8 @@ title: Link
category: features
---
+{@snippet features/build-link-source}
+
The {@link module:link/link~Link} feature brings support for link editing to the editor. It allows for inserting hyperlinks into the edited content and offers the UI to create and edit them.
## Demo
@@ -23,6 +25,82 @@ CKEditor 5 allows for typing both at inner and outer boundaries of links to make
{@img assets/img/typing-before.gif 770 The animation showing typing before the link in CKEditor 5 rich text editor.}
+## Decorators
+
+Decorator feature provides an easy way to configure and extend links with additional attributes. A decorator is an object defined in the configuration, which describes additional rules applied to the link feature. There are 2 types of decorators: "automatic" and "manual". More information about each of them might be found in sections below or in {@link module:link/link~LinkConfig#decorators the API documentation}.
+
+