Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
189 lines (148 sloc) 12.6 KB
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="File Upload">
<meta name="keywords" content="ckeditor, editor, wysiwyg, file, image, photo, upload, drag, drop, file, manager, uploader, drag and drop, paste">
<meta name="sdk-samples" content="File Manager Integration|Uploading Dropped and Pasted Images">
<meta name="sdk-category" content="sdk-inserting-content">
<meta name="sdk-order" content="30">
<title>File Upload</title>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:700,500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor-dev/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/sample.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<![endif]-->
<link rel="icon" href="../template/theme/img/favicon.ico">
</head>
<body>
<header class="sdk-header">
</header>
<section class="sdk-container">
<nav class="sdk-sidebar">
</nav>
<section class="sdk-contents">
<h1>File Upload through Dialogs and Drag&amp;Drop <a class="documentation" href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html">Documentation</a></h1>
<p>
By default CKEditor does not include a file manager, but it can be easily integrated with an external
tool thanks to the <a href="https://ckeditor.com/cke4/addon/filebrowser">File Browser</a> plugin that
is available in all official CKEditor distributions.
</p>
<p>
Once properly set up through the <code><a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-filebrowserBrowseUrl">config.filebrowserBrowseUrl</a></code>
and <code><a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-filebrowserUploadUrl">config.filebrowserUploadUrl</a></code>
configuration settings, all file manager features will automatically become available. This includes
the Upload tab in the Link or Image Properties dialog windows as well as the Browse Server button.
</p>
<textarea cols="10" id="editor1" name="editor1" rows="10" data-sample="1" data-sample-short>
<h1>Rosetta</h1>
<p><a href="http://en.wikipedia.org/wiki/File:Comet_67P_on_19_September_2014_NavCam_mosaic.jpg"><img alt="Comet 67P" src="assets/comet-67p.jpg" style="float:right; height:239px; width:300px" /></a></p>
<p>Rosetta is a robotic space probe built and launched by the <a href="http://en.wikipedia.org/wiki/European_Space_Agency">European Space Agency</a>. Along with <a href="http://en.wikipedia.org/wiki/Philae_(spacecraft)">Philae</a>, its lander module, Rosetta is performing a detailed study of <a href="http://en.wikipedia.org/wiki/67P/Churyumov%E2%80%93Gerasimenko">comet 67P/Churyumov–Gerasimenko (67P)</a>. On 12 November 2014 the mission performed the first soft landing on a comet and returned data from the surface.</p>
<h2>Mission overview</h2>
<p>Rosetta was launched on 2 March 2004 on an <a href="http://en.wikipedia.org/wiki/Ariane_5">Ariane 5</a> rocket and reached the comet on 6 August 2014, becoming the first spacecraft to orbit a comet. (Previous missions had conducted successful flybys of seven other comets.) It is one of ESA's Horizon 2000 cornerstone missions. The spacecraft consists of the Rosetta orbiter, which features 12 instruments, and the Philae lander, with nine additional instruments. The Rosetta mission will orbit 67P for 17 months and is designed to complete the most detailed study of a comet ever attempted. The spacecraft is controlled from the <a href="http://en.wikipedia.org/wiki/European_Space_Operations_Centre">European Space Operations Centre</a> (ESOC), in Darmstadt, Germany. The planning for the operation of the scientific payload, together with the data retrieval, calibration, archiving and distribution, is performed from the <a href="http://en.wikipedia.org/wiki/European_Space_Astronomy_Centre">European Space Astronomy Centre</a> (ESAC), in Villanueva de la Cañada, near Madrid, Spain. It has been estimated that in the decade preceding 2014, some 2,000 people assisted in the mission in some capacity.</p>
<p>The probe is named after the <a href="http://en.wikipedia.org/wiki/Rosetta_Stone">Rosetta Stone</a>, a stele of Egyptian origin featuring a decree in three scripts. The lander is named after the Philae obelisk, which bears a bilingual Greek and Egyptian hieroglyphic inscription. A comparison of its hieroglyphs with those on the Rosetta Stone catalysed the deciphering of the Egyptian writing system. Similarly, it is hoped that these spacecraft will result in better understanding of comets and the early Solar System. In a more direct analogy to its namesake, the Rosetta spacecraft also carries a micro-etched nickel alloy Rosetta disc donated by the Long Now Foundation inscribed with 13,000 pages of text in 1200 languages.</p>
<hr />
<p>Source: <a href="http://en.wikipedia.org/wiki/Rosetta_(spacecraft)">Wikipedia.org</a></p>
</textarea>
<p>
<strong>Note:</strong> The examples on this page integrate CKEditor with
<a href="https://ckeditor.com/ckeditor-4/ckfinder/">CKFinder</a>,
but you are free to implement your own solution thanks to the editor
<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browser_api.html">File Browser API</a> or choose
another existing product. Additionally, file manager integration
<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html">can be customized</a>
thanks to numerous editor configuration features that make it possible to, for example, setup the integration
for selected dialog windows or customize the file browser window size.
</p>
<h2 id="uploading-dropped-and-pasted-images">Uploading Dropped and Pasted Images</h2>
<p>
The optional <a href="https://ckeditor.com/cke4/addon/uploadimage">Upload Image</a> plugin enables support for uploading
images that were dropped or pasted into the editor.
</p>
<p class="tip">
Drag and drop file upload is not supported in Internet Explorer 9 and below.
Support for pasting images and its fragments varies depending on the browser, operating system and application
from which the image or its fragment was copied. This is a new feature, so it is likely to change in the future.
</p>
<p>
The sample below uses the Upload Image plugin together with <a href="./image2.html">enhanced images</a>.
Additional <a href="https://ckeditor.com/docs/ckeditor4/latest/features/styles.html#widget-styles">widget styles</a> are
defined to control image size and alignment.
</p>
<p>
Try pasting or dropping images into the editor below (you can drop multiple files at a time). You can also try
to paste fragments of images (e.g. copied from an image editing application).
</p>
<textarea cols="10" id="editor2" name="editor2" rows="10" data-sample="2" data-sample-short>
<h1>Rosetta</h1>
<figure class="image image-narrow image-align-right">
<a href="http://en.wikipedia.org/wiki/File:Comet_67P_on_19_September_2014_NavCam_mosaic.jpg"><img src="assets/comet-67p.jpg" alt="Comet 67P" width="1131" height="900" /></a>
<figcaption>Comet 67P in September 2014</figcaption>
</figure>
<p>Rosetta is a robotic space probe built and launched by the <a href="http://en.wikipedia.org/wiki/European_Space_Agency">European Space Agency</a>. Along with <a href="http://en.wikipedia.org/wiki/Philae_(spacecraft)">Philae</a>, its lander module, Rosetta is performing a detailed study of <a href="http://en.wikipedia.org/wiki/67P/Churyumov%E2%80%93Gerasimenko">comet 67P/Churyumov–Gerasimenko (67P)</a>. On 12 November 2014 the mission performed the first soft landing on a comet and returned data from the surface.</p>
<h2>Mission overview</h2>
<p>Rosetta was launched on 2 March 2004 on an <a href="http://en.wikipedia.org/wiki/Ariane_5">Ariane 5</a> rocket and reached the comet on 6 August 2014, becoming the first spacecraft to orbit a comet. (Previous missions had conducted successful flybys of seven other comets.) It is one of ESA's Horizon 2000 cornerstone missions. The spacecraft consists of the Rosetta orbiter, which features 12 instruments, and the Philae lander, with nine additional instruments. The Rosetta mission will orbit 67P for 17 months and is designed to complete the most detailed study of a comet ever attempted. The spacecraft is controlled from the <a href="http://en.wikipedia.org/wiki/European_Space_Operations_Centre">European Space Operations Centre</a> (ESOC), in Darmstadt, Germany. The planning for the operation of the scientific payload, together with the data retrieval, calibration, archiving and distribution, is performed from the <a href="http://en.wikipedia.org/wiki/European_Space_Astronomy_Centre">European Space Astronomy Centre</a> (ESAC), in Villanueva de la Cañada, near Madrid, Spain. It has been estimated that in the decade preceding 2014, some 2,000 people assisted in the mission in some capacity.</p>
<p>The probe is named after the <a href="http://en.wikipedia.org/wiki/Rosetta_Stone">Rosetta Stone</a>, a stele of Egyptian origin featuring a decree in three scripts. The lander is named after the Philae obelisk, which bears a bilingual Greek and Egyptian hieroglyphic inscription. A comparison of its hieroglyphs with those on the Rosetta Stone catalysed the deciphering of the Egyptian writing system. Similarly, it is hoped that these spacecraft will result in better understanding of comets and the early Solar System. In a more direct analogy to its namesake, the Rosetta spacecraft also carries a micro-etched nickel alloy Rosetta disc donated by the Long Now Foundation inscribed with 13,000 pages of text in 1200 languages.</p>
<hr />
<p>Source: <a href="http://en.wikipedia.org/wiki/Rosetta_(spacecraft)">Wikipedia.org</a></p>
</textarea>
<h2>Related Features</h2>
<ul>
<li><a href="./image2.html">Inserting Images &ndash; Enhanced Image Plugin</a></li>
<li><a href="./draganddrop.html">API Usage &ndash; Drag and Drop Integration</a></li>
</ul>
<script data-sample="1">
CKEDITOR.replace( 'editor1', {
height: 300,
// Configure your file manager integration. This example uses CKFinder 3 for PHP.
filebrowserBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html',
filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
filebrowserUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images'
} );
</script>
<script data-sample="2">
CKEDITOR.replace( 'editor2', {
extraPlugins: 'uploadimage,image2',
height: 300,
// Upload images to a CKFinder connector (note that the response type is set to JSON).
uploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
// Configure your file manager integration. This example uses CKFinder 3 for PHP.
filebrowserBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html',
filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
filebrowserUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images',
// The following options are not necessary and are used here for presentation purposes only.
// They configure the Styles drop-down list and widgets to use classes.
stylesSet: [
{ name: 'Narrow image', type: 'widget', widget: 'image', attributes: { 'class': 'image-narrow' } },
{ name: 'Wide image', type: 'widget', widget: 'image', attributes: { 'class': 'image-wide' } }
],
// Load the default contents.css file plus customizations for this sample.
contentsCss: [
CKEDITOR.basePath + 'contents.css',
'assets/css/widgetstyles.css'
],
// Configure the Enhanced Image plugin to use classes instead of styles and to disable the
// resizer (because image size is controlled by widget styles or the image takes maximum
// 100% of the editor width).
image2_alignClasses: [ 'image-align-left', 'image-align-center', 'image-align-right' ],
image2_disableResizer: true
} );
</script>
</section>
</section>
<footer class="sdk-footer">
</footer>
</body>
</html>
You can’t perform that action at this time.