Primer Commit
This commit is contained in:
LuisAngelSalinasl
177
assets/ckfinder/samples/ckeditor.html
Normal file
177
assets/ckfinder/samples/ckeditor.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub tree-a-active"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>CKEditor Integration</h1>
|
||||
<h2 id="integration-ckeditor5">CKEditor 5</h2>
|
||||
<p>To integrate CKFinder with CKEditor 5
|
||||
all you have to do is pass some additional configuration options to CKEditor:</p>
|
||||
<pre class="prettyprint"><code style="overflow-x: scroll">ClassicEditor
|
||||
.create( document.querySelector( '#editor1' ), {
|
||||
ckfinder: {
|
||||
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
|
||||
},
|
||||
toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
|
||||
} )
|
||||
.catch( error => {
|
||||
console.error( error );
|
||||
} );
|
||||
</code></pre>
|
||||
<p>
|
||||
The sample below presents the result of the integration. Try pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKFinder.
|
||||
</p>
|
||||
<p>
|
||||
You can use the <svg width="20" height="20" viewBox="0 0 20 20"><path d="M11.627 16.5a3.496 3.496 0 0 1 0 0zm5.873-.196a3.484 3.484 0 0 1 0 0zm0-7.001V8h-13v8.5h4.341c.191.54.457 1.044.785 1.5H2a1.5 1.5 0 0 1-1.5-1.5v-13A1.5 1.5 0 0 1 2 2h4.5a1.5 1.5 0 0 1 1.06.44L9.122 4H16a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 19 8v2.531a6.027 6.027 0 0 0-1.5-1.228zM16 6.5v-1H8.5l-2-2H2v13h1V8a1.5 1.5 0 0 1 1.5-1.5H16z"></path><path d="M14.5 19.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zM15 14v-2h-1v2h-2v1h2v2h1v-2h2v-1h-2z"></path></svg>
|
||||
(Insert image or file) toolbar button to open a CKFinder window. Then you can mange your files or choose an asset that
|
||||
should be added to the edited content.
|
||||
</p>
|
||||
<div id="editor1"></div>
|
||||
<p>
|
||||
For detailed information about the integration between CKEditor 5 and CKFinder, please refer to the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html">CKFinder integration</a>
|
||||
article in the <a href="https://ckeditor.com/docs/ckeditor5/latest/index.html">CKEditor 5 documentation</a>.
|
||||
</p>
|
||||
|
||||
<h2 id="integration-ckeditor4">CKEditor 4</h2>
|
||||
<p>To <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_ckeditor">integrate CKFinder with CKEditor 4</a>
|
||||
all you have to do is pass some additional configuration options to CKEditor:</p>
|
||||
<pre class="prettyprint"><code>CKEDITOR.replace( 'editor2', {
|
||||
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
|
||||
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
|
||||
} );</code></pre>
|
||||
<p>It is also possible to use <code>CKFinder.setupCKEditor()</code> as shown below:</p>
|
||||
<pre class="prettyprint"><code>var editor = CKEDITOR.replace( 'ckfinder' );
|
||||
CKFinder.setupCKEditor( editor );</code></pre>
|
||||
<p>The sample below presents the result of the integration. You can manage and select files from your server when creating links or embedding images in CKEditor 4 content. In modern browsers you may also try <strong>pasting images from clipboard</strong> directly into the editing area as well as <strong>dropping images</strong> — the files will be saved on the fly by CKFinder.</p>
|
||||
<div id="editor2"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>div.ck-editor__editable { min-height: 200px;}</style>
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="https://cdn.ckeditor.com/4.12.1/standard-all/ckeditor.js"></script>
|
||||
<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
if ( typeof ClassicEditor !== 'undefined' ) {
|
||||
ClassicEditor
|
||||
.create( document.querySelector( '#editor1' ), {
|
||||
ckfinder: {
|
||||
// To avoid issues, set it to an absolute path that does not start with dots, e.g. '/ckfinder/core/php/(...)'
|
||||
uploadUrl: '../core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
|
||||
},
|
||||
toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
|
||||
|
||||
} )
|
||||
.then( function( editor ) {
|
||||
// console.log( editor );
|
||||
} )
|
||||
.catch( function( error ) {
|
||||
console.error( error );
|
||||
} );
|
||||
} else {
|
||||
document.getElementById( 'editor1' ).innerHTML =
|
||||
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 5 from CDN.</div>'
|
||||
}
|
||||
|
||||
// Note: in this sample we use CKEditor with two extra plugins:
|
||||
// - uploadimage to support pasting and dragging images,
|
||||
// - image2 (instead of image) to provide images with captions.
|
||||
// Additionally, the CSS style for the editing area has been slightly modified to provide responsive images during editing.
|
||||
// All these modifications are not required by CKFinder, they just provide better user experience.
|
||||
if ( typeof CKEDITOR !== 'undefined' ) {
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
CKEDITOR.addCss( 'img {max-width:100%; height: auto;}' );
|
||||
var editor = CKEDITOR.replace( 'editor2', {
|
||||
extraPlugins: 'uploadimage,image2',
|
||||
removePlugins: 'image',
|
||||
height:250
|
||||
} );
|
||||
CKFinder.setupCKEditor( editor );
|
||||
} else {
|
||||
document.getElementById( 'editor2' ).innerHTML =
|
||||
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 4 from CDN.</div>'
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
assets/ckfinder/samples/css/img/adjoined-separator.png
Normal file
BIN
assets/ckfinder/samples/css/img/adjoined-separator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 B |
BIN
assets/ckfinder/samples/css/img/alert.png
Normal file
BIN
assets/ckfinder/samples/css/img/alert.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/ckfinder/samples/css/img/icon-close.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 B |
BIN
assets/ckfinder/samples/css/img/icon-download.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 327 B |
BIN
assets/ckfinder/samples/css/img/icon-navigation-a-github.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-navigation-a-github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
BIN
assets/ckfinder/samples/css/img/icon-question-mark.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-question-mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
BIN
assets/ckfinder/samples/css/img/icon-sdk-book.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-sdk-book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 B |
BIN
assets/ckfinder/samples/css/img/icon-sdk-documentation.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-sdk-documentation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 B |
BIN
assets/ckfinder/samples/css/img/icon-sdk-gear.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-sdk-gear.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 B |
BIN
assets/ckfinder/samples/css/img/icon-sdk-sample.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-sdk-sample.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 B |
BIN
assets/ckfinder/samples/css/img/icon-toggler-light.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-toggler-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 523 B |
BIN
assets/ckfinder/samples/css/img/icon-toggler.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-toggler.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 514 B |
BIN
assets/ckfinder/samples/css/img/icon-tree-a-collapser.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-tree-a-collapser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 514 B |
BIN
assets/ckfinder/samples/css/img/icon-tree-a-link.png
Normal file
BIN
assets/ckfinder/samples/css/img/icon-tree-a-link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
assets/ckfinder/samples/css/img/tip.png
Normal file
BIN
assets/ckfinder/samples/css/img/tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
4
assets/ckfinder/samples/css/sample.css
Normal file
4
assets/ckfinder/samples/css/sample.css
Normal file
File diff suppressed because one or more lines are too long
23
assets/ckfinder/samples/full-page-open.html
Normal file
23
assets/ckfinder/samples/full-page-open.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
|
||||
<title>CKFinder 3 - Full Page Sample</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
var finder;
|
||||
|
||||
CKFinder.start( {
|
||||
onInit: function( instance ) {
|
||||
finder = instance;
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
assets/ckfinder/samples/full-page.html
Normal file
98
assets/ckfinder/samples/full-page.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2 class="tree-a-active">Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li class="tree-a-active"><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Full Page Mode</h1>
|
||||
|
||||
<p>The <strong>full page</strong> mode opens CKFinder using the entire page as the working area.</p>
|
||||
<pre class="prettyprint"><code>CKFinder.start();</code></pre>
|
||||
<p>Click the button below to open CKFinder in full page mode.</p>
|
||||
|
||||
<a href="full-page-open.html" class="button-a button-a-background" target="_blank">Open CKFinder</a>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
assets/ckfinder/samples/img/favicon.ico
Normal file
BIN
assets/ckfinder/samples/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/ckfinder/samples/img/logo.png
Normal file
BIN
assets/ckfinder/samples/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
96
assets/ckfinder/samples/index.html
Normal file
96
assets/ckfinder/samples/index.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<p>This page presents a few samples of CKFinder 3 features. Use the navigation menu on the left side to browse all samples.</p>
|
||||
<p>For more detailed information about CKFinder and its features please refer to documentation pages:</p>
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/">CKFinder 3 documentation</a></li>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3-php/">CKFinder 3 PHP connector documentation</a></li>
|
||||
</ul>
|
||||
<p>In case of any issues or suggestions please feel free to <a href="http://cksource.com/contact">contact us</a>.</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
assets/ckfinder/samples/js/html5shiv.min.js
vendored
Normal file
4
assets/ckfinder/samples/js/html5shiv.min.js
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
/**
|
||||
* @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.2",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b)}(this,document);
|
||||
144
assets/ckfinder/samples/js/sf.js
Normal file
144
assets/ckfinder/samples/js/sf.js
Normal file
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
* Licensed under the terms of the MIT license. See LICENSE.md for more information.
|
||||
*/
|
||||
|
||||
/* exported SF */
|
||||
|
||||
'use strict';
|
||||
|
||||
var SF = ( function() {
|
||||
var SF = {};
|
||||
|
||||
SF.attachListener = function( elem, evtName, callback ) {
|
||||
if ( elem.addEventListener ) {
|
||||
elem.addEventListener( evtName, callback, false );
|
||||
} else if ( elem.attachEvent ) {
|
||||
elem.attachEvent( 'on' + evtName , function() {
|
||||
callback.apply( elem, arguments );
|
||||
} );
|
||||
} else {
|
||||
throw new Error( 'Could not attach event.' );
|
||||
}
|
||||
};
|
||||
|
||||
SF.indexOf = ( function() {
|
||||
var indexOf = Array.prototype.indexOf;
|
||||
|
||||
if ( indexOf === 'function' ) {
|
||||
return function( arr, elem ) {
|
||||
return indexOf.call( arr, elem );
|
||||
};
|
||||
} else {
|
||||
return function( arr, elem ) {
|
||||
var max = arr.length;
|
||||
|
||||
for ( var i = 0; i < max; i++ ) {
|
||||
if ( arr[ i ] === elem ) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
};
|
||||
}
|
||||
|
||||
}() );
|
||||
|
||||
SF.accept = function( node, visitor ) {
|
||||
var children;
|
||||
|
||||
// Handling node as a node and array
|
||||
if ( node.children ) {
|
||||
children = node.children;
|
||||
|
||||
visitor( node );
|
||||
} else if ( typeof node.length === 'number' ) {
|
||||
children = node;
|
||||
}
|
||||
|
||||
var i = children ? ( children.length || 0 ) : 0;
|
||||
while ( i-- ) {
|
||||
SF.accept( children[ i ], visitor );
|
||||
}
|
||||
};
|
||||
|
||||
SF.getByClass = ( function( ) {
|
||||
var getByClass = document.getElementsByClassName;
|
||||
if ( typeof getByClass === 'function' ) {
|
||||
return function( root, className ) {
|
||||
if ( typeof root === 'string' ) {
|
||||
className = root;
|
||||
root = document;
|
||||
}
|
||||
|
||||
return getByClass.call( root, className );
|
||||
};
|
||||
}
|
||||
|
||||
return function( root, className ) {
|
||||
if ( typeof root === 'string' ) {
|
||||
className = root;
|
||||
root = document.getElementsByTagName( 'html' )[ 0 ];
|
||||
}
|
||||
var results = [];
|
||||
|
||||
SF.accept( root, function( elem ) {
|
||||
if ( SF.classList.contains( elem, className ) ) {
|
||||
results.push( elem );
|
||||
}
|
||||
} );
|
||||
|
||||
return results;
|
||||
};
|
||||
}() );
|
||||
|
||||
SF.classList = {};
|
||||
|
||||
SF.classList.add = function( elem, className ) {
|
||||
var classes = parseClasses( elem );
|
||||
classes.push( className );
|
||||
|
||||
elem.attributes.setNamedItem( createClassAttr( classes ) );
|
||||
};
|
||||
|
||||
SF.classList.remove = function( elem, className ) {
|
||||
var classes = parseClasses( elem, className ),
|
||||
foundAt = SF.indexOf( classes, className );
|
||||
|
||||
if ( foundAt === -1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
classes.splice( foundAt, 1 );
|
||||
elem.attributes.setNamedItem( createClassAttr( classes ) );
|
||||
};
|
||||
|
||||
SF.classList.contains = function( elem, className ) {
|
||||
return findIndex( elem, className ) !== -1;
|
||||
};
|
||||
|
||||
SF.classList.toggle = function( elem, className ) {
|
||||
this.contains( elem, className ) ? this.remove( elem, className ) : this.add( elem, className );
|
||||
};
|
||||
|
||||
function findIndex( elem, className ) {
|
||||
return SF.indexOf( parseClasses( elem ), className );
|
||||
}
|
||||
|
||||
function parseClasses( elem ) {
|
||||
var classAttr = elem.attributes ? elem.attributes.getNamedItem( 'class' ) : null;
|
||||
|
||||
return classAttr ? classAttr.value.split( ' ' ) : [];
|
||||
}
|
||||
|
||||
function createClassAttr( classesArray ) {
|
||||
var attr = document.createAttribute( 'class' );
|
||||
|
||||
attr.value = classesArray.join( ' ' );
|
||||
|
||||
return attr;
|
||||
}
|
||||
|
||||
return SF;
|
||||
}() );
|
||||
26
assets/ckfinder/samples/js/tree-a.js
Normal file
26
assets/ckfinder/samples/js/tree-a.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
* Licensed under the terms of the MIT license. See LICENSE.md for more information.
|
||||
*/
|
||||
|
||||
/* global SF */
|
||||
|
||||
'use strict';
|
||||
|
||||
( function() {
|
||||
// All .tree-a elements in DOM.
|
||||
var trees = SF.getByClass( 'tree-a' );
|
||||
|
||||
for ( var i = trees.length; i--; ) {
|
||||
var tree = trees[ i ];
|
||||
|
||||
SF.attachListener( tree, 'click', function( evt ) {
|
||||
var target = evt.target || evt.srcElement;
|
||||
|
||||
// Collapse or expand item groups.
|
||||
if ( target.nodeName === 'H2' && !SF.classList.contains( target, 'tree-a-no-sub' ) ) {
|
||||
SF.classList.toggle( target, 'tree-a-active' );
|
||||
}
|
||||
} );
|
||||
}
|
||||
} )();
|
||||
118
assets/ckfinder/samples/localization.html
Normal file
118
assets/ckfinder/samples/localization.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub tree-a-active"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Localization</h1>
|
||||
|
||||
<p>CKFinder interface is automatically displayed in the user's language (as set in the browser or operating system settings).</p>
|
||||
<p>The language of the CKFinder UI can also be set manually by using the <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-language"><code>language</code></a> configuration option.</p>
|
||||
|
||||
<div class="tip-a" style="padding-top:0.5em;padding-bottom:0.5em">
|
||||
<h4>CKFinder Is Truly Global</h4>
|
||||
<p>CKFinder is translated into around 50 languages.<br />If you would like to <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_translations">improve the existing translations or submit new ones</a>, your help will be much appreciated!</p>
|
||||
</div>
|
||||
|
||||
<p>In the example below CKFinder is started in Brazilian Portuguese.</p>
|
||||
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
language: 'pt-br',
|
||||
width: '100%',
|
||||
height: 500
|
||||
} );</code></pre>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
language: 'pt-br',
|
||||
width: '100%',
|
||||
height: 500
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
assets/ckfinder/samples/modals.html
Normal file
207
assets/ckfinder/samples/modals.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2 class="tree-a-active">Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li class="tree-a-active"><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Modal Mode</h1>
|
||||
|
||||
<p>The modal mode is similar to <a href="popups.html">popup</a>. The difference is that popups are opened using a separate browser window while in modal mode CKFinder is opened inside a modal container that is appended to current page document.</p>
|
||||
|
||||
<div class="modal-example">
|
||||
<button id="ckfinder-modal" class="button-a button-a-background" style="float: left">Open Modal</button>
|
||||
<div id="output" style="float: left;font-size: 0.8em;line-height: 1.4em;margin: 3px 7px;"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<h2>Multiple Modals</h2>
|
||||
|
||||
<p>In some cases you may need more than one modal to handle multiple places that require selecting a file.
|
||||
Below you can find an example that fills each of the inputs with the URL of the selected file.</p>
|
||||
|
||||
<input id="ckfinder-input-1" type="text" style="width:60%">
|
||||
<button id="ckfinder-modal-1" class="button-a button-a-background">Browse Server</button>
|
||||
|
||||
<div style="height: 5px"></div>
|
||||
|
||||
<input id="ckfinder-input-2" type="text" style="width:60%">
|
||||
<button id="ckfinder-modal-2" class="button-a button-a-background">Browse Server</button>
|
||||
|
||||
<pre class="prettyprint"><code>var button1 = document.getElementById( 'ckfinder-popup-1' );
|
||||
var button2 = document.getElementById( 'ckfinder-popup-2' );
|
||||
|
||||
button1.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-1' );
|
||||
};
|
||||
button2.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-2' );
|
||||
};
|
||||
|
||||
function selectFileWithCKFinder( elementId ) {
|
||||
CKFinder.modal( {
|
||||
chooseFiles: true,
|
||||
width: 800,
|
||||
height: 600,
|
||||
onInit: function( finder ) {
|
||||
finder.on( 'files:choose', function( evt ) {
|
||||
var file = evt.data.files.first();
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = file.getUrl();
|
||||
} );
|
||||
|
||||
finder.on( 'file:choose:resizedImage', function( evt ) {
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = evt.data.resizedUrl;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
var button = document.getElementById( 'ckfinder-modal' );
|
||||
|
||||
button.onclick = function() {
|
||||
CKFinder.modal( {
|
||||
chooseFiles: true,
|
||||
width: 800,
|
||||
height: 600,
|
||||
onInit: function( finder ) {
|
||||
finder.on( 'files:choose', function( evt ) {
|
||||
var file = evt.data.files.first();
|
||||
var output = document.getElementById( 'output' );
|
||||
output.innerHTML = 'Selected: ' + escapeHtml( file.get( 'name' ) ) + '<br>URL: ' + escapeHtml( file.getUrl() );
|
||||
} );
|
||||
|
||||
finder.on( 'file:choose:resizedImage', function( evt ) {
|
||||
var output = document.getElementById( 'output' );
|
||||
output.innerHTML = 'Selected resized image: ' + escapeHtml( evt.data.file.get( 'name' ) ) + '<br>url: ' + escapeHtml( evt.data.resizedUrl );
|
||||
} );
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
var button1 = document.getElementById( 'ckfinder-modal-1' );
|
||||
var button2 = document.getElementById( 'ckfinder-modal-2' );
|
||||
|
||||
button1.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-1' );
|
||||
};
|
||||
button2.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-2' );
|
||||
};
|
||||
|
||||
function selectFileWithCKFinder( elementId ) {
|
||||
CKFinder.modal( {
|
||||
chooseFiles: true,
|
||||
width: 800,
|
||||
height: 600,
|
||||
onInit: function( finder ) {
|
||||
finder.on( 'files:choose', function( evt ) {
|
||||
var file = evt.data.files.first();
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = file.getUrl();
|
||||
} );
|
||||
|
||||
finder.on( 'file:choose:resizedImage', function( evt ) {
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = evt.data.resizedUrl;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
116
assets/ckfinder/samples/other-custom-configuration.html
Normal file
116
assets/ckfinder/samples/other-custom-configuration.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2 class="tree-a-active">Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li class="tree-a-active"><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Custom Configuration</h1>
|
||||
<p>CKFinder provides many configuration options that can be changed to customize the application.
|
||||
For details please check the <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config">documentation</a>.</p>
|
||||
<p>In the example below the following options are set:</p>
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-id"><code>id</code></a> sets the instance ID to <code>custom-instance-id</code>,</li>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-thumbnailDefaultSize"><code>thumbnailDefaultSize</code></a> sets the default thumbnail size to 400px after CKFinder is started,</li>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-width"><code>width</code></a> sets the widget width to 100% to use all available space,</li>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-height"><code>height</code></a> sets the widget height to 500 pixels.</li>
|
||||
</ul>
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
id: 'custom-instance-id',
|
||||
thumbnailDefaultSize: 400,
|
||||
width: '100%',
|
||||
height: 500
|
||||
} );</code></pre>
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
id: 'custom-instance-id',
|
||||
thumbnailDefaultSize: 400,
|
||||
width: '100%',
|
||||
height: 500
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
141
assets/ckfinder/samples/other-read-only.html
Normal file
141
assets/ckfinder/samples/other-read-only.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2 class="tree-a-active">Other</h2>
|
||||
<ul>
|
||||
<li class="tree-a-active"><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Read-only Mode</h1>
|
||||
<p>Read-only mode can be enabled in CKFinder with the <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-readOnly"><code>readOnly</code></a>
|
||||
configuration option. The user will be able to browse the files but will not be able to introduce any changes. Thanks to this setting you will be able to use
|
||||
CKFinder as an online gallery.</p>
|
||||
<p>Note: This will only disable certain UI elements. In order to successfully block file uploads and modifications, or to set read-only permissions for particular
|
||||
folders, you will need to adjust <a href="https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_accessControl">ACL settings</a>
|
||||
accordingly in the server-side configuration file.</p>
|
||||
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
readOnly: true,
|
||||
width: '100%',
|
||||
height: 500
|
||||
} );</code></pre>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
<h2>Simple Gallery</h2>
|
||||
<p>With a little bit of imagination it is possible to turn CKFinder into a very simple gallery. Here CKFinder is configured to
|
||||
open a file on double click, run without a toolbar and without the folders panel.</p>
|
||||
<div id="ckfinder-widget2"></div>
|
||||
<p>The code behind this setup is quite simple:</p>
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget2', {
|
||||
displayFoldersPanel: false,
|
||||
height: 500,
|
||||
id: 'gallery',
|
||||
readOnly: true,
|
||||
readOnlyExclude: 'Toolbars',
|
||||
thumbnailDefaultSize: 143,
|
||||
width: '100%'
|
||||
} );
|
||||
</code></pre>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
readOnly: true,
|
||||
width: '100%',
|
||||
height: 500
|
||||
} );
|
||||
</script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget2', {
|
||||
displayFoldersPanel: false,
|
||||
height: 500,
|
||||
// The main reason why ID is set here is "thumbnailDefaultSize" specified below.
|
||||
// Without setting the ID, CKFinder would use remembered user setting from previously used instance.
|
||||
id: 'gallery',
|
||||
readOnly: true,
|
||||
readOnlyExclude: 'Toolbars',
|
||||
thumbnailDefaultSize: 143,
|
||||
width: '100%'
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
assets/ckfinder/samples/plugin-examples.html
Normal file
114
assets/ckfinder/samples/plugin-examples.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub tree-a-active"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Plugin Examples</h1>
|
||||
<p>The example below shows the <code>StatusBarInfo</code> plugin that displays basic information about the selected file in the application status bar.
|
||||
You can find more plugin examples in the <a href="https://github.com/ckfinder/ckfinder-docs-samples">CKFinder sample plugins repository</a>.
|
||||
Please have a look at <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_plugins">plugin documentation</a>, too.</p>
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 500,
|
||||
plugins: [
|
||||
// The path must be relative to the location of the ckfinder.js file.
|
||||
'../samples/plugins/StatusBarInfo/StatusBarInfo'
|
||||
]
|
||||
} );</code></pre>
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 500,
|
||||
plugins: [
|
||||
// Path must be relative to the location of ckfinder.js file
|
||||
'samples/plugins/StatusBarInfo/StatusBarInfo'
|
||||
]
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
* CKFinder - Sample Plugins
|
||||
* ==========================
|
||||
* http://cksource.com/ckfinder
|
||||
* Copyright (C) 2007-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
*
|
||||
* This file and its contents are subject to the MIT License.
|
||||
* Please read the LICENSE.md file before using, installing, copying,
|
||||
* modifying or distribute this file or part of its contents.
|
||||
*/
|
||||
|
||||
CKFinder.define( [ 'underscore', 'backbone', 'marionette', 'doT' ], function( _, Backbone, Marionette, doT ) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* This plugin illustrates how to show, style and add information to the Status Bar.
|
||||
*/
|
||||
return {
|
||||
init: function( finder ) {
|
||||
// A basic model that stores the message which will be displayed in the status bar.
|
||||
var messageModel = new Backbone.Model( { message: '' } );
|
||||
|
||||
// A view that will be displayed inside the status bar.
|
||||
var statusBarView = new Marionette.ItemView( {
|
||||
tagName: 'p',
|
||||
template: doT.template( '{{= it.message }}' ),
|
||||
model: messageModel,
|
||||
modelEvents: {
|
||||
// This will call the render method when any model attribute will change.
|
||||
'change': 'render'
|
||||
}
|
||||
} );
|
||||
|
||||
// Wait for the 'page:create:Main' event to attach the status bar
|
||||
finder.on( 'page:create:Main', function() {
|
||||
// Create a status bar named 'MyStatusBar' for the 'Main' page which contains the files pane.
|
||||
finder.request( 'statusBar:create', {
|
||||
name: 'MyStatusBar',
|
||||
page: 'Main',
|
||||
label: 'My Status Bar'
|
||||
} );
|
||||
|
||||
// Add a region inside the 'MyStatusBar' status bar. By default the status bar is empty.
|
||||
finder.request( 'statusBar:addRegion', {
|
||||
id: 'my-status-bar-region',
|
||||
name: 'MyStatusBar'
|
||||
} );
|
||||
|
||||
// Pass a view instance to the status bar. This will add a view to the regions layout manager.
|
||||
finder.request( 'statusBar:showView', {
|
||||
region: 'my-status-bar-region',
|
||||
name: 'MyStatusBar',
|
||||
view: statusBarView
|
||||
} );
|
||||
|
||||
// Listen to the 'files:selected' event which is triggered when file selection changes.
|
||||
finder.on( 'files:selected', function( evt ) {
|
||||
var selectedFiles = evt.data.files;
|
||||
|
||||
if ( !selectedFiles.length ) {
|
||||
// There are no selected files so display information about folder contents.
|
||||
// Get current folder.
|
||||
var folder = evt.finder.request( 'folder:getActive' );
|
||||
// Get all files in the current folder.
|
||||
var filesCount = evt.finder.request( 'files:getCurrent' ).length;
|
||||
// Display information about the current folder and the number of files.
|
||||
messageModel.set( 'message', 'Folder "' + finder.util.escapeHtml( folder.get( 'name' ) ) + '" contains ' + filesCount + ' file(s)' );
|
||||
} else if ( selectedFiles.length === 1 ) {
|
||||
// There is only one file selected so get the first file and show its name.
|
||||
messageModel.set( 'message', 'Selected: ' + finder.util.escapeHtml( selectedFiles.at( 0 ).get( 'name' ) ) );
|
||||
} else {
|
||||
// There are many files selected so display the number of selected files.
|
||||
messageModel.set( 'message', 'Selected ' + selectedFiles.length + ' files' );
|
||||
}
|
||||
} );
|
||||
|
||||
finder.on( 'folder:getFiles:after', function( evt ) {
|
||||
// Get all files in the current folder.
|
||||
var filesCount = evt.finder.request( 'files:getCurrent' ).length;
|
||||
|
||||
// Display information about the current folder and the number of files.
|
||||
messageModel.set( 'message', 'Folder "' + finder.util.escapeHtml( evt.data.folder.get( 'name' ) ) + '" contains ' + filesCount + ' file(s)' );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Set some nicer styles for the status bar content.
|
||||
this.addCss( '#my-status-bar-region {padding: 0 1em;font-size:0.8em;font-weight:normal}' );
|
||||
}
|
||||
};
|
||||
} );
|
||||
212
assets/ckfinder/samples/popups.html
Normal file
212
assets/ckfinder/samples/popups.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2 class="tree-a-active">Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li class="tree-a-active"><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Popup Mode</h1>
|
||||
|
||||
<p>The <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_installation-section-using-ckfinder-in-a-popup-window">popup mode</a> is most suitable for selecting files that are stored on a server.<br />
|
||||
Click the button below to open the popup and choose any file. After that you will see basic information
|
||||
about the file that was selected, including the URL.</p>
|
||||
|
||||
<div class="popup-example">
|
||||
<button id="ckfinder-popup" class="button-a button-a-background" style="float: left">Open Popup</button>
|
||||
<div id="output" style="float: left;font-size: 0.8em;line-height: 1.4em;margin: 3px 7px;"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<p>Additionally, CKFinder supports a special file selection mode for images called <strong>Choose Resized</strong>. This feature
|
||||
allows you to resize the selected image to any size that is suitable for you. The CKFinder connector will automatically create
|
||||
a resized version of the image and return its URL.</p>
|
||||
|
||||
<h2>Multiple Popups</h2>
|
||||
<p>In some cases you may need more than one popup to handle multiple places that require selecting a file.
|
||||
Below you can find an example that fills each of the inputs with the URL of the selected file.</p>
|
||||
|
||||
<input id="ckfinder-input-1" type="text" style="width:60%">
|
||||
<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>
|
||||
|
||||
<div style="height: 5px"></div>
|
||||
|
||||
<input id="ckfinder-input-2" type="text" style="width:60%">
|
||||
<button id="ckfinder-popup-2" class="button-a button-a-background">Browse Server</button>
|
||||
|
||||
<pre class="prettyprint"><code>var button1 = document.getElementById( 'ckfinder-popup-1' );
|
||||
var button2 = document.getElementById( 'ckfinder-popup-2' );
|
||||
|
||||
button1.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-1' );
|
||||
};
|
||||
button2.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-2' );
|
||||
};
|
||||
|
||||
function selectFileWithCKFinder( elementId ) {
|
||||
CKFinder.popup( {
|
||||
chooseFiles: true,
|
||||
width: 800,
|
||||
height: 600,
|
||||
onInit: function( finder ) {
|
||||
finder.on( 'files:choose', function( evt ) {
|
||||
var file = evt.data.files.first();
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = file.getUrl();
|
||||
} );
|
||||
|
||||
finder.on( 'file:choose:resizedImage', function( evt ) {
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = evt.data.resizedUrl;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
var button = document.getElementById( 'ckfinder-popup' );
|
||||
|
||||
button.onclick = function() {
|
||||
CKFinder.popup( {
|
||||
chooseFiles: true,
|
||||
width: 800,
|
||||
height: 600,
|
||||
onInit: function( finder ) {
|
||||
finder.on( 'files:choose', function( evt ) {
|
||||
var file = evt.data.files.first();
|
||||
var output = document.getElementById( 'output' );
|
||||
output.innerHTML = 'Selected: ' + escapeHtml( file.get( 'name' ) ) + '<br>URL: ' + escapeHtml( file.getUrl() );
|
||||
} );
|
||||
|
||||
finder.on( 'file:choose:resizedImage', function( evt ) {
|
||||
var output = document.getElementById( 'output' );
|
||||
output.innerHTML = 'Selected resized image: ' + escapeHtml( evt.data.file.get( 'name' ) ) + '<br>url: ' + escapeHtml( evt.data.resizedUrl );
|
||||
} );
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
var button1 = document.getElementById( 'ckfinder-popup-1' );
|
||||
var button2 = document.getElementById( 'ckfinder-popup-2' );
|
||||
|
||||
button1.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-1' );
|
||||
};
|
||||
button2.onclick = function() {
|
||||
selectFileWithCKFinder( 'ckfinder-input-2' );
|
||||
};
|
||||
|
||||
function selectFileWithCKFinder( elementId ) {
|
||||
CKFinder.popup( {
|
||||
chooseFiles: true,
|
||||
width: 800,
|
||||
height: 600,
|
||||
onInit: function( finder ) {
|
||||
finder.on( 'files:choose', function( evt ) {
|
||||
var file = evt.data.files.first();
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = file.getUrl();
|
||||
} );
|
||||
|
||||
finder.on( 'file:choose:resizedImage', function( evt ) {
|
||||
var output = document.getElementById( elementId );
|
||||
output.value = evt.data.resizedUrl;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
129
assets/ckfinder/samples/skins-jquery-mobile.html
Normal file
129
assets/ckfinder/samples/skins-jquery-mobile.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2 class="tree-a-active">Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li class="tree-a-active"><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>jQuery Mobile Skin</h1>
|
||||
|
||||
<p>CKFinder UI is based on <a href="http://jquerymobile.com/">jQuery Mobile</a> so its look & feel can be changed using the <a href="http://themeroller.jquerymobile.com/">jQuery Mobile Theme Roller</a>.
|
||||
For more information about custom skins and Theme Roller please refer to <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_themeroller">CKFinder documentation</a>.</p>
|
||||
|
||||
<h3>jQuery Mobile Swatch "a" Skin </h3>
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 600,
|
||||
skin: 'jquery-mobile',
|
||||
swatch: 'a'
|
||||
} );</code></pre>
|
||||
<div id="ckfinder-widget-a"></div>
|
||||
|
||||
<h3>jQuery Mobile Swatch "b" Skin </h3>
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 600,
|
||||
skin: 'jquery-mobile',
|
||||
swatch: 'b'
|
||||
} );</code></pre>
|
||||
<div id="ckfinder-widget-b"></div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget-a', {
|
||||
width: '100%',
|
||||
height: 600,
|
||||
skin: 'jquery-mobile',
|
||||
swatch: 'a'
|
||||
} );
|
||||
|
||||
CKFinder.widget( 'ckfinder-widget-b', {
|
||||
width: '100%',
|
||||
height: 600,
|
||||
skin: 'jquery-mobile',
|
||||
swatch: 'b'
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
assets/ckfinder/samples/skins-moono.html
Normal file
101
assets/ckfinder/samples/skins-moono.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2 class="tree-a-active">Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li class="tree-a-active"><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Moono Skin</h1>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 700,
|
||||
skin: 'moono'
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
102
assets/ckfinder/samples/skins-neko.html
Normal file
102
assets/ckfinder/samples/skins-neko.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2 class="tree-a-active">Skins</h2>
|
||||
<ul>
|
||||
<li class="tree-a-active"><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Neko Skin</h1>
|
||||
|
||||
<p>Neko is a default skin used in CKFinder that provides visual integration with CKEditor.</p>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
109
assets/ckfinder/samples/user-interface-compact.html
Normal file
109
assets/ckfinder/samples/user-interface-compact.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-active">User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li class="tree-a-active"><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Compact User Interface</h1>
|
||||
<p>It is possible to disable the folders panel and have folders displayed as icons in the main area of the application.
|
||||
In the example below this mode is initialized inside a widget, but it also works in all standalone modes.</p>
|
||||
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
displayFoldersPanel: false,
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );</code></pre>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
displayFoldersPanel: false,
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
assets/ckfinder/samples/user-interface-default.html
Normal file
101
assets/ckfinder/samples/user-interface-default.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-active">User Interface</h2>
|
||||
<ul>
|
||||
<li class="tree-a-active"><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Default User Interface</h1>
|
||||
<p>By default folders are displayed in CKFinder in a folder tree panel, like in the example below.</p>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
112
assets/ckfinder/samples/user-interface-listview.html
Normal file
112
assets/ckfinder/samples/user-interface-listview.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-active">User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li class="tree-a-active"><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>List View</h1>
|
||||
<p>By default files are displayed in CKFinder as thumbnails. With list view enabled all files will be displayed as a list, one bellow the other. No image previews are available in this mode.</p>
|
||||
<p>The list view can be enabled regardless of the selected user interface (Default/Compact/Mobile).</p>
|
||||
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
defaultViewType: 'list',
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );</code></pre>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
defaultViewType: 'list',
|
||||
width: '100%',
|
||||
height: 700,
|
||||
// Specifying ID is not needed when setting defaultViewType.
|
||||
// It is set here just to make sure this CKFinder instance will not share user settings with other instances.
|
||||
id: 'custom-listview'
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
assets/ckfinder/samples/user-interface-mobile.html
Normal file
105
assets/ckfinder/samples/user-interface-mobile.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2>Website Integration</h2>
|
||||
<ul>
|
||||
<li><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-active">User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li class="tree-a-active"><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Mobile User Interface</h1>
|
||||
<p>Mobile user interface is enabled automatically when the width of the working area of the application gets below the value
|
||||
defined in the <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-uiModeThreshold"><code>uiModeThreshold</code></a>
|
||||
configuration option.</p>
|
||||
<p>Note: This mode works best on mobile devices, as touch and swipe events are not enabled for desktop browsers.</p>
|
||||
|
||||
<div id="ckfinder-widget" style="width: 500px; margin: 30px auto 0;"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
displayFoldersPanel: false,
|
||||
width: 500,
|
||||
height: 700
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
106
assets/ckfinder/samples/widget.html
Normal file
106
assets/ckfinder/samples/widget.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2007-2019, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or https://ckeditor.com/sales/license/ckfinder
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKFinder 3 Samples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
|
||||
</h1>
|
||||
<nav class="navigation-b grid-width-70">
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grid-container">
|
||||
<nav class="tree-a tree-a-layout grid-width-30">
|
||||
<h1>CKFinder Samples</h1>
|
||||
<h2 class="tree-a-active">Website Integration</h2>
|
||||
<ul>
|
||||
<li class="tree-a-active"><a href="widget.html">Widget</a></li>
|
||||
<li><a href="popups.html">Popup</a></li>
|
||||
<li><a href="modals.html">Modal</a></li>
|
||||
<li><a href="full-page.html">Full Page</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
|
||||
<h2>Skins</h2>
|
||||
<ul>
|
||||
<li><a href="skins-neko.html">Neko</a></li>
|
||||
<li><a href="skins-moono.html">Moono</a></li>
|
||||
<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
|
||||
</ul>
|
||||
<h2>User Interface</h2>
|
||||
<ul>
|
||||
<li><a href="user-interface-default.html">Default</a></li>
|
||||
<li><a href="user-interface-compact.html">Compact</a></li>
|
||||
<li><a href="user-interface-mobile.html">Mobile</a></li>
|
||||
<li><a href="user-interface-listview.html">List View</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
|
||||
<h2>Other</h2>
|
||||
<ul>
|
||||
<li><a href="other-read-only.html">Read-only Mode</a></li>
|
||||
<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
|
||||
</ul>
|
||||
<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
|
||||
</nav>
|
||||
<section class="content grid-width-70">
|
||||
<h1>Widget Mode</h1>
|
||||
|
||||
<p>Using the <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_installation-section-embedding-as-widget">widget mode</a> you can embed CKFinder directly on a page, as shown below.</p>
|
||||
<pre class="prettyprint"><code>CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );</code></pre>
|
||||
|
||||
<div id="ckfinder-widget"></div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKFinder 3 – <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
|
||||
</p>
|
||||
<p class="grid-width-100">
|
||||
Copyright © 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico
|
||||
Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
|
||||
<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
|
||||
<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="js/sf.js"></script>
|
||||
<script src="js/tree-a.js"></script>
|
||||
<script src="../ckfinder.js"></script>
|
||||
<script>
|
||||
CKFinder.widget( 'ckfinder-widget', {
|
||||
width: '100%',
|
||||
height: 700
|
||||
} );
|
||||
</script>
|
||||
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user