D7net Mini Sh3LL v1
| Current File : C:/Domains/maymaytinson.com/httpdocs/filebrowser/../ckfinder/samples/ckeditor.html |
<!DOCTYPE html>
<!--
Copyright (c) 2007-2018, 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>CKEditor 4</h2>
<p>To <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_ckeditor">integrate CKFinder with CKEditor</a>
all you have to do is pass some additional configuration options to CKEditor:</p>
<pre class="prettyprint"><code>CKEDITOR.replace( 'editor1', {
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="editor1"></div>
<h2>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>ClassicEditor
.create( document.querySelector( '#editor2' ), {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
}
} )
.catch( error => {
console.error( error );
} );
</code></pre>
<p>The sample below presents the result of the integration. 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 for PHP – <a href="https://ckeditor.com/ckeditor-4/ckfinder/">https://ckeditor.com/ckeditor-4/ckfinder/</a>
</p>
<p class="grid-width-100">
Copyright © 2003-2018, <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/ckeditor-4/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.9.2/standard-all/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<script src="../ckfinder.js"></script>
<script>
// 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( 'editor1', {
extraPlugins: 'uploadimage,image2',
removePlugins: 'image',
height:250
} );
CKFinder.setupCKEditor( editor );
} else {
document.getElementById( 'editor1' ).innerHTML =
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 4 from CDN.</div>'
}
if ( typeof ClassicEditor !== 'undefined' ) {
ClassicEditor
.create( document.querySelector( '#editor2' ), {
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'
}
} )
.then( function( editor ) {
// console.log( editor );
} )
.catch( function( error ) {
console.error( error );
} );
} else {
document.getElementById( 'editor2' ).innerHTML =
'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 5 from CDN.</div>'
}
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>
</body>
</html>
AnonSec - 2021 | Recode By D7net