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

Added demo of inserting image via pasting url into editor to docs

Paweł Kwaśnik 5 лет назад
Родитель
Сommit
d42ebd77a3

+ 2 - 0
packages/ckeditor5-image/docs/_snippets/features/build-image-source.js

@@ -9,10 +9,12 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
 
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
 import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
+import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
 import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
 import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
 
 
 ClassicEditor.builtinPlugins.push( ImageResize );
 ClassicEditor.builtinPlugins.push( ImageResize );
 ClassicEditor.builtinPlugins.push( ImageInsert );
 ClassicEditor.builtinPlugins.push( ImageInsert );
 ClassicEditor.builtinPlugins.push( LinkImage );
 ClassicEditor.builtinPlugins.push( LinkImage );
+ClassicEditor.builtinPlugins.push( AutoImage );
 
 
 window.ClassicEditor = ClassicEditor;
 window.ClassicEditor = ClassicEditor;

+ 3 - 0
packages/ckeditor5-image/docs/_snippets/features/image-insert-via-pasting-url-into-editor.html

@@ -0,0 +1,3 @@
+<div id="snippet-image-insert-via-pasting-url-into-editor">
+	<p>Insert an URL of an image: </p>
+</div>

+ 20 - 0
packages/ckeditor5-image/docs/_snippets/features/image-insert-via-pasting-url-into-editor.js

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-insert-via-pasting-url-into-editor' ), {
+		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize', 'LinkImage' ],
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorInsertImageViaPastingUrlIntoEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

+ 6 - 0
packages/ckeditor5-image/docs/features/image.md

@@ -116,6 +116,12 @@ The {@link module:image/autoimage~AutoImage} plugin recognizes image links in th
 
 
 If the automatic embedding was unexpected, for instance when the link was meant to remain in the content as text, simply undo the action (by clicking the "Undo" button in the toolbar or using the <kbd>Ctrl/⌘</kbd>+<kbd>Z</kbd> keystrokes).
 If the automatic embedding was unexpected, for instance when the link was meant to remain in the content as text, simply undo the action (by clicking the "Undo" button in the toolbar or using the <kbd>Ctrl/⌘</kbd>+<kbd>Z</kbd> keystrokes).
 
 
+You can paste the image URL directly into the editor content, and it will be automatically embedded.
+
+<input class="example-input" type="text" value="https://ckeditor.com/docs/ckeditor5/latest/assets/img/malta.jpg">
+
+{@snippet features/image-insert-via-pasting-url-into-editor}
+
 ## Responsive images
 ## Responsive images
 
 
 Support for responsive images in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Refer to the {@link features/easy-image#responsive-images Easy Image integration} guide to learn how to use the feature in your project.
 Support for responsive images in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Refer to the {@link features/easy-image#responsive-images Easy Image integration} guide to learn how to use the feature in your project.