Summernote Plugin for elFinder File Manager
Download plugin files. Extract it and copy into your summernote plugin directory.
Include the summernote ext javascript file into your html page.
<script src="https://github.com/semplon/summernote-ext-elfinder/raw/master/path/to/plugin/summernote-ext-elfinder/summernote-ext-elfinder.js"></script>
Initialize the plugin at your summernote initialization code.
<script type="text/javascript">
$(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['insert', ['elfinder']]
]
});
});
function elfinderDialog() {
var fm = $('<div/>').dialogelfinder({
url : 'https://path.to/your/connector.php', // change with the url of your connector
lang : 'en',
width : 840,
height: 450,
destroyOnClose : true,
getFileCallback : function(files, fm) {
console.log(files);
$('.editor').summernote('editor.insertImage', files.url);
},
commandsOptions : {
getfile : {
oncomplete : 'close',
folders : false
}
}
}).dialogelfinder('instance');
}
</script>
Don't forget to include the jQuery and jQuery-UI. The latest elFinder not include jquery-ui file.