The example below shows the Summernote-ext-CKfinder plugin for integrating CKFinder into Summernote WYSIWYG editor. All you have to do is adding some additional configuration options to CKEditor and Summernote. Please, have a look at software documentation.
The plugin for the Summernote WYSIWYG editor.
(function(factory) {-
if (typeof define === 'function' && define.amd) {
-
-
define(['jquery'], factory);
-
} else if (typeof module === 'object' && module.exports) {
-
-
module.exports = factory(require('jquery'));
-
} else {
-
-
factory(window.jQuery);
-
}
}(function($) {-
-
-
$.extend($.summernote.plugins, {
-
-
-
-
'CKFinder': function(context) {
-
var self = this;
-
-
-
-
var ui = $.summernote.ui;
-
-
-
context.memo('button.CKFinder', function() {
-
-
var button = ui.button({
-
contents: ' CKFinder',
-
tooltip: 'CKFinder',
-
click: function() {
-
CKFinder.modal( {
-
-
-
-
-
-
-
chooseFiles: true,
-
-
-
-
onInit: function( finder ) {
-
finder.on( 'files:choose', function( evt ) {
-
var file = evt.data.files.first();
-
var url = file.getUrl();
-
-
console.log(url);
-
context.invoke('editor.insertImage', url);
-
} );
-
finder.on( 'file:choose:resizedImage', function( evt ) {
-
var url_resizedUrl = evt.data.resizedUrl;
-
-
context.invoke('editor.insertImage', url_resizedUrl);
-
} );
-
}
-
} );
-
},
-
});
-
-
-
var $CKFinder = button.render();
-
return $CKFinder;
-
});
-
},
-
});
}));
Installation
1. Download CKFinder for PHP.
Install, integrate, configure and develop CKFinder.
Вrowse through documentation.
All downloads are full versions with just a few features locked. Use your license key to unlock complete CKFinder functionality, with no need to download a separate package. Try it for a limited period of time and buy it when you are ready. CKFinder prepared easy licensing options for your development purposes.
View license options
2. Include JS
Include the following code after Summernote:
<script src="ckfinder.js"></script><script src="summernote-ext-ckfinder.js"></script>
3. Summernote options:
$('.summernote').summernote({-
height: 150,
-
toolbar:[
-
['CKFinder', ['CKFinder']],
-
['style',['style']],
-
['font',['bold','italic','underline','clear']],
-
['fontname',['fontname']],
-
['color',['color']],
-
['para',['ul','ol','paragraph']],
-
['height',['height']],
-
['table',['table']],
-
['insert',['media','link','hr']],
-
['view',['fullscreen','codeview']],
-
['help',['help']]
-
],
-
}
});
Tested v0.8.12 - v0.8.18
Summernote-ext-CKFinder provides configuration options that can be changed to customize the plugin.
In the example the commented out code options:
Plugins for CKFinder.
displayFoldersPanel - changes the folders display mode. When set to true, folders are displayed as a tree in the primary panel. When set to false, folders are displayed inline with files, there is no folders tree, and breadcrumbs are displayed.
startupPath - The resource type and name of the startup folder, separated with a colon. If defined, on startup CKFinder will open the given folder and will list its contents.
rememberLastFolder - whether CKFinder should remember the last used folder in the local storage and open it automatically next time.
Can be also set to an absolute URL (now relative).
summernote-ext-ckfinder.js distributed under the MIT license.
