elFinder
Open-source file manager for web, written in JavaScript using jQuery and jQuery UI
elFinder - file manager for web elfinder - file manager from web
I try to follow an instruction in elfinder.org how to Integration CKEditor with elFinder but not work. is there an example of CKEditor that has been integrated with elFinder, if anybody know, please share it.
Thanks
Source: (StackOverflow)
I'm using elfinder plugin in my grails project, but I have problems with preview. Infact, if I select one image (gif, png, jpeg) and I try to preview it, I only see a black window.
Any suggestion about how to solve this problem?
Source: (StackOverflow)
I'm using elfinder and I would like to add new functionality by adding a command to the context menu. I found a solution on the github issue tracker of the project but I can't get it to work. Here's what I do:
var elf;
jQuery().ready(function() {
elFinder.prototype._options.commands.push('editimage');
elFinder.prototype._options.contextmenu.files.push('editimage');
elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image';
elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten';
elFinder.prototype.commands.editimage = function() {
this.exec = function(hashes) {
console.log('hallo');
}
}
elf = jQuery('#elfinder').elfinder({
...
//elfinder initialization
The context menu item does not show up, no error message is to be found in the console. I also tried putting editimage under contextmenu->"files" in the init part in case that was overwritten by the initialization.
Source: (StackOverflow)
I'm using Symfony 2.3, FMElfinderBundle and FOSUserBundle. Both bundles works fine. My question relates to how to connect both bundles. When user register then I want to create directory for him and tell FMElfinderBundle to use that directory for that user. Another user will have another directory etc.
I know that FMElfinderBundle can have multiple roots in config.yml
fm_elfinder:
locale: %locale%
editor: ckeditor # other choices are tinymce or simple
showhidden: false # defaults to false
fullscreen: true # defaults true, applies to simple and ckeditor editors
connector:
debug: false # defaults to false
roots: # at least one root must be defined
uploads:
driver: LocalFileSystem
path: uploads
upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
upload_deny: ['all']
upload_max_size: 2M
How can I dynamically assign users to directories with all permissions? Any idea? What is the best solution for that? Maybe another file manager?
Source: (StackOverflow)
I'm using ElFinder.NET connector in my MVC applications. In one application everything works fine, but the other application can't initialize Elfinder.
The code used to initialize Elfinder is the same in both applications. The problem is probably in Connector.Process(this.HttpContext.Request) call.
In the application, where ElFinder is working, Connector.Process returns JSON result with correct data, the other application returns a wierd result.
I can see in the browser, that the request was processed, but the response body contains string System.Web.Mvc.JsonDataContractResult instead of JSON data. If I step through the code in Visual Studio, I see that Connector.Process return a JsonDataContractResult but it's empty.
Source: (StackOverflow)
I'm trying to work with the IvoryCKEditorBundleand FMElfinderBundle. The IvoryCKEditorBundle is a CKEditor and the ElfinderBundle is a finder to integrate images in my CKEditor.
The CKEditor works and is integrated in my form like this:
->add('articleBody', 'ckeditor',[
'config' => [
'toolbar' => [
[
'name' => 'document',
'items' => ['Source', '-', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'],
],
'/',
[
'name' => 'basicstyles',
'items' => ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
]
],
'uiColor' => '#ffffff',
]])
Now I would like to integrate the finder. To integrate this you have to follow thesesteps. These are the steps that I have already done:
- Downloaded bundle
- Added to kernel
- Import FMElfinderBundle routing file
- Configure assetic
- Install and dump assets
But now I'm stuck at the Basic configuration. When I copy the code and paste it in my config.yml I get the following error:
InvalidConfigurationException: Unrecognized options "instances" under "fm_elfinder"
What am I doing wrong?
Source: (StackOverflow)
I am trying to add http://elfinder.org which is the most professional php file manager on the web, i have uploaded the file in a subfolder http://example.com/admin but the connector does not work
$opts = array(
// 'debug' => true,
'roots' => array(
array(
'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED)
'path' => '../files/', // path to files (REQUIRED)
'URL' => dirname($_SERVER['PHP_SELF']) . '/../files/', // URL to files (REQUIRED)
'accessControl' => 'access' // disable and hide dot starting files (OPTIONAL)
)
)
);
in my web-host panel this is the address to my account
/dns/in/olympe/moderactif
but I really can't set the correct paths
Can you help me?
Source: (StackOverflow)
I have a little question : Is it possible to remove the auto focus on the online filemanager elfinder ?
Edit : you can test it on the official site home page : http://elfinder.org/
I mean : when the page loads, elfinder automaticaly get the focus. The problem is that I can't (for example) use F5 to reload the page, unless I click outside the file manager.
I tried to get the focus on another element using :
$().ready(function() {
document.getElementById("getFocus").focus;
$( "#getFocus" ).focus();
console.log(document.activeElement);
});
But it doesn't work.
console.log(document.activeElement);
is giving me :
<body>...</body>
Which is what I actually want, but the keyboard stay focused on elfinder.
Is it any way to do that without simulating a click on an element ?
Source: (StackOverflow)
I've integrated Elfinder in a CodeIgniter 2 site, following this instructions. In the view, I load Elfinder on a bootstrap modal.
Everything is working fine, except that when double-clicking on a file (Open) I get a new window with this error:
{"error":["errUnknownCmd"]}
However, if I right-click->preview o right-click->download I can preview or download the file without problems.
After long search and test, I don't really understand why is this happening.
My controller:
<?php
class ex_cont extends CI_Controller
{
public function __construct()
{
parent::__construct();
applogin_check();
}
public function index()
{
$this->elfinder_init();
return;
}
private function elfinder_init()
{
$this->load->helper('path');
$opts = array(
// 'debug' => true,
'roots' => array(
array(
'driver' => 'LocalFileSystem',
'path' => '../../download-area',
'accessControl' => 'access',
'defaults' => array('read' => true, 'write' => false)
)
)
);
$this->load->library('elfinder_lib', $opts);
}
}
My view:
<link rel="stylesheet" type="text/css" rel='nofollow' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" rel='nofollow' href="/elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" rel='nofollow' href="/elfinder/css/theme.css">
<script src="/elfinder/js/elfinder.min.js"></script>
<script src="/elfinder/js/i18n/elfinder.ca.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#elfinder').elfinder({
url : '/utilities/ex_cont' // connector URL (REQUIRED)
, lang: 'ca' // language (OPTIONAL)
, resizable: false
});
});
</script>
<div id="elfinder"></div>
Any suggestion about what else can I check? ...I start to be tempted to overwrite double-click handler. :P
I've tested it both in a Linux+apache and Windows+xampp environements. Same issue.
Source: (StackOverflow)
I'm using the Elfinder filemanager. When I upload a file, it automatically detect the file extension and adding a class to the file. But it lacks in some cases for new file types.
I have tried by adding the file under 'kinds' option in js but no joy;
'text/htm' : 'HTM'
How can I create custom css classes for new file types which are not identified.
Source: (StackOverflow)
My project requires me to make a file manager and I just saw elfinder and it looks great but it's in php and my project is in node(express). Is there a way to use elfinder in node?
I saw https://github.com/sax1johno/node-elfinder but it doesn't have any documentation on how to use implement it. And is there also a way to use Amazon s3 instead of the local folder?
Source: (StackOverflow)
I am still newbie to integrate elfinder and tinymce, i already follow tutorial in elfinder wiki
in form.php in tinymce init already added file_browser_callback:elFinderBrowser:
tinyMCE.init({
mode : "exact",
elements : "txt_content",
theme : "advanced",
file_browser_callback : elFinderBrowser,
plugins : "advimage,advlink,media,contextmenu",
theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,separator,",
theme_advanced_buttons3_add_before : "",
theme_advanced_buttons3_add : "media",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "hr[class|width|size|noshade]",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});
And also add function elFinderBrowser too:
function elFinderBrowser (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
file: 'elfinder.html',// use an absolute path!
title: 'elFinder 2.0',
width: 900,
height: 450,
resizable: 'yes',
inline:true
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
return false;
}
elfinder.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>elFinder 2.0</title>
<!-- jQuery and jQuery UI (REQUIRED) -->
<link rel="stylesheet" type="text/css" media="screen" rel='nofollow' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- elFinder CSS (REQUIRED) -->
<link rel="stylesheet" type="text/css" media="screen" rel='nofollow' href="<?php echo base_url() ?>assets/vendor/elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" rel='nofollow' href="<?php echo base_url() ?>assets/vendor/elfinder/css/theme.css">
<!-- elFinder JS (REQUIRED) -->
<script type="text/javascript" src="<?php echo base_url() ?>assets/vendor/elfinder/js/elfinder.min.js"></script>
<!-- elFinder initialization (REQUIRED) -->
</head>
<body>
<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
<script type="text/javascript" charset="utf-8">
var FileBrowserDialogue = {
init: function() {
// Here goes your code for setting your custom things onLoad.
},
mySubmit: function (URL) {
// pass selected file path to TinyMCE
parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
// close popup window
parent.tinymce.activeEditor.windowManager.close();
}
}
$().ready(function() {
var elf = $('#elfinder').elfinder({
url : 'connector.php',
getFileCallback: function(file) { // editor callback
// file.url - commandsOptions.getfile.onlyURL = false (default)
// file - commandsOptions.getfile.onlyURL = true
FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>
</body>
</html>
but when i choose/select image in elfinder window, it show error in firegbug:
"TypeError: parent.tinymce.activeEditor.windowManager.getParams is not
a function"
and it already driving me crazy, any hints, guys?
Source: (StackOverflow)
I have implemented CKEditor as:
<div class="form-group">
{!! Form::label('text', '*Article') !!}
{!! Form::textarea('text', null, ['class' => 'form-control ckeditor', 'placeholder' => 'Article.', 'name'=>'text', 'rows' => '7']) !!}
<script>
CKEDITOR.replace( 'text', {
filebrowserBrowseUrl = '/elfinder/ckeditor',
filebrowserImageBrowseUrl : '/elfinder/ckeditor',
uiColor : '#9AB8F3',
height : 300
} );
</script>
and at the bottom of the file I have
<script src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
I have installed elfinder following the instructions here:
https://github.com/barryvdh/laravel-elfinder
And I can access elfinder by going to localhost/elfinder (EDIT: or localhost/elfinder/ckeditor)
However, I am missing the "Browse server" button that (I suppose) should open elfinder in a pop-up window.
Here are my routes:
Please ask if you need anything more. Thank you!
EDIT: --missing browse button html--
Below is the browse button that is rendered with display:none;.
<a style="margin-top: 14px; margin-left: auto; margin-right: auto; display: none; -moz-user-select: none;" rel='nofollow' href="javascript:void(0)" title="Browse Server" hidefocus="true" class="cke_dialog_ui_button" role="button" aria-labelledby="cke_76_label" id="cke_77_uiElement"><span id="cke_76_label" class="cke_dialog_ui_button">Browse Server</span></a>
EDIT2: --Inspect this element error--
When I right click in browser on inspect this element and then on console I get back this error:
ReferenceError: CKEDITOR is not defined
on first line of the script:
CKEDITOR.replace( 'text', {
Source: (StackOverflow)