8
0
Просмотр исходного кода

Docs: Implemented a basic guide in the 'Features' section.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
87c7bd00de

+ 0 - 0
packages/ckeditor5-media-embed/docs/_snippets/features/build-media-source.html


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

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

+ 32 - 0
packages/ckeditor5-media-embed/docs/_snippets/features/media-embed.html

@@ -0,0 +1,32 @@
+<div id="snippet-media-embed">
+	<h3>YouTube</h3>
+
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=DgM5DfAPQTI"></oembed>
+	</figure>
+
+	<h3>Vimeo</h3>
+
+	<figure class="media">
+		<oembed url="https://vimeo.com/1084537"></oembed>
+	</figure>
+
+	<h3>Twitter</h3>
+
+	<figure>
+		<oembed url="https://twitter.com/ckeditor/status/1027571541989572612"></oembed>
+	</figure>
+
+	<h3>Google Maps</h3>
+
+	<figure class="media">
+		<oembed url="https://www.google.com/maps/place/Poland/@51.9537505,19.1343786,6z/data=!3m1!4b1!4m5!3m4!1s0x47009964a4640bbb:0x97573ca49cc55ea!8m2!3d51.919438!4d19.145136?hl=en"></oembed>
+	</figure>
+</div>
+
+<style>
+	.ck.ck-content .media iframe {
+		/* Override default Umberto guide styles. */
+		margin: 0;
+	}
+</style>

+ 28 - 0
packages/ckeditor5-media-embed/docs/_snippets/features/media-embed.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2018, 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-media-embed' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'insertMedia', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		mediaEmbed: {
+			semanticDataOutput: true
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 56 - 0
packages/ckeditor5-media-embed/docs/features/media-embed.md

@@ -0,0 +1,56 @@
+---
+category: features
+---
+
+{@snippet features/build-media-source}
+
+# Media embed
+
+## Demo
+
+{@snippet features/media-embed}
+
+## Installation
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-media-embed`](https://www.npmjs.com/package/@ckeditor/ckeditor5-media-embed) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-media-embed
+```
+
+Then add `'MediaEmbed'` to your plugin list and configure the media providers:
+
+```js
+import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/table';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ MediaEmbed, ... ],
+		toolbar: [ 'insertMedia', ... ]
+		mediaEmbed: {
+			...
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+## Configuring the media
+
+TODO
+
+## Common API
+
+The {@link module:mediaembed/mediaembed~MediaEmbed} plugin registers:
+* the `'insertMedia'` UI button component,
+* the `'insertMedia'` command implemented by {@link module:mediaembed/insertmediacommand~InsertMediaCommand}.
+
+	You can insert a new media or update the selected media URL by executing the following code:
+
+	```js
+	editor.execute( 'insertMedia', { url: 'http://url.to.the/media' } );
+	```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-media-embed.