⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

tinymce + free uploader

Started by , 29 March 2012 - 17:29 PM


noskov.biz
  • profile picture
  • Member

Posted 16 April 2012 - 20:09 PM

Hi! I will try to find the solution, but no promises.

noskov.biz
  • profile picture
  • Member

Posted 17 April 2012 - 08:21 AM

TheUndsandpiper, I have looked my server php.ini file and it has disabled proc_open() too as you have. But Elfinder works well for me. I added proc_open() to disabled functions in my localhost php.ini and Elfinder still works properly in my local machine.

I think the problem is somewhere else. What response in firebug have you got from your server? Have you any php errors, warnings or notices? If yes, this is could be the cause of invalid JSON.

gouarv
  • profile picture
  • Member

Posted 26 April 2012 - 04:17 AM

[quote name='noskov.biz' timestamp='1333106438' post='1012']
hi!

I don't think that I'm good developer, I'm comparatively new to all of this and when I can do something (e.g. just put elfinder to tinymce) i say "it's easy". Because I realise: if I can do this, anybody can do the same or even better :) Actually it was not so easy for me.

Yeah, I share the code with pleasure, I'll be happy if it will be usefull for someone. And any comments and suggestions are welcome!

So, in two words about the code. I use available versions for today from github:[list=1]
[*]Codeigniter (https://github.com/E...Lab/CodeIgniter);
[*]grocery CRUD (https://github.com/s...is/grocery-crud);
[*]elFinder (https://github.com/Studio-42/elFinder).
[/list]
I put CodeIgniter on website folder. Don't want index.php in my urls, thats why I change line #54 in application/config/config.php
from
$config['index_page'] = 'index.php';


to
$config['index_page'] = '';


and add to website folder .htaccess file with these lines



RewriteEngine on

RewriteCond $1 !^(index\.php|assets|myuploads)

RewriteRule ^(.*)$ /index.php/$1 [L]


In application/config/autoload.php I load database library, line #81:

[i]
$autoload['libraries'] = array('database');
[/i]

and url helper, line #93:
[i]
$autoload['helper'] = array('url');
[/i]

Following this instruction http://www.grocerycr...er_installation I put grocery CRUD files into the correspondes CodeIgniter folders and config some settings to make it work.

Then I put elFinder folder to [b]assets[/b] folder and rename it to "[b]elfinder[/b]". So we have assets structure looks like this:
/assets/
----/elfinder/
--------/build/
--------/css/
--------/files/
--------/img/
--------/jquery/
--------/js/
--------/[b]php[/b]/
--------/sounds/
(-------- and some other files)
----/grocery_crud/
----/uploads/
----index.html

Then I move [b]php[/b] folder from [i]/assets/elfinder/[/i] into [i]/application/libraries/[/i] and rename folder to "[b]elfinder_lib[/b]". Find [i]/application/libraries/elfinder_lib/[b]connector.php[/b]/ [/i]file and rename it to "[b]Elf_lib.php[/b]". In new CodeIgniter library I change code into this:



<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

error_reporting(E_ALL | E_STRICT);

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderConnector.class.php';

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinder.class.php';

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeDriver.class.php';

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeLocalFileSystem.class.php';

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeMySQL.class.php';

include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeFTP.class.php';

class Elf_lib {

function __construct($opts)

{

  $connector = new elFinderConnector(new elFinder($opts), true);

  $connector->run();

}

}

/* End of file Elf_lib.php */

/* Location: ./application/libraries/elfinder_lib/Elf_lib.php */


Then I create new controller, let's call it [b]elf.php[/b], witch will use our Elf_lib:



<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Elf extends CI_Controller {

function index()

{

  $this->load->view('elf_view');

}

function elf_init()

{

  $this->load->helper('path');

  $opts = array(

   'debug' => true,

   'roots' => array(

	array(

	 'driver'	=> 'LocalFileSystem',

	 'path'	 => set_realpath('myuploads'),

	 'URL'	  => base_url('myuploads'),

	 'alias'	 => 'My Uploads',

	 'attributes' => array(

	  array(

	   'pattern' => '/\.tmb$/', // Also for file types: .jpg inside pattern.

	   'read'	=> false,

	   'write'   => false,

	   'locked'  => true,

	   'hidden' => true

	  )

	 ),

	)

   )

  );

  $this->load->library('elfinder_lib/elf_lib', $opts);

}

function elf_popup()

{

  $this->load->view('elf_popup_view');

}

}



/* End of file elf.php */

/* Location: ./application/controllers/elf.php */


Then I create couple of new view files: "[b]elf_popup_view.php[/b]" (for tinymce popup) and "[b]elf_view.php[/b]" (for elFinder only as file manager).
This is /application/views/elf_popup_view.php/



<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>File Manager</title>

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/jquery/ui-themes/smoothness/jquery-ui-1.8.18.custom.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/common.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/dialog.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/toolbar.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/navbar.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/statusbar.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/contextmenu.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/cwd.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/quicklook.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/commands.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/theme.css">

<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-1.7.1.min.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-ui-1.8.18.custom.min.js"></script>

<!-- elfinder core -->

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.version.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/jquery.elfinder.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.resources.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.options.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.history.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.command.js"></script>

<!-- elfinder ui -->

<script src="<?php echo base_url();?>assets/elfinder/js/ui/overlay.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/workzone.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/navbar.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/dialog.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/tree.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/cwd.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/toolbar.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/button.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/uploadButton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/viewbutton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/searchbutton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/sortbutton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/panel.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/contextmenu.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/path.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/stat.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/places.js"></script>

<!-- elfinder commands -->

<script src="<?php echo base_url();?>assets/elfinder/js/commands/back.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/forward.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/reload.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/up.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/home.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/copy.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/cut.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/paste.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/open.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/rm.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/info.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/duplicate.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/rename.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/help.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/getfile.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/mkdir.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/mkfile.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/upload.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/download.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/edit.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/quicklook.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/quicklook.plugins.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/extract.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/archive.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/search.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/view.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/resize.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/sort.js"></script>

<!-- elfinder languages -->

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.ar.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.bg.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.ca.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.cs.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.de.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.en.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.es.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.fr.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.hu.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.jp.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.nl.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.pt_BR.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.ru.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.zh_CN.js"></script>

<!-- elfinder dialog -->

<script src="<?php echo base_url();?>assets/elfinder/js/jquery.dialogelfinder.js"></script>

<!-- elfinder 1.x connector API support -->

<script src="<?php echo base_url();?>assets/elfinder/js/proxy/elFinderSupportVer1.js"></script>

<!-- for our tinymce texteditor -->

<script src="<?php echo base_url('assets/grocery_crud/texteditor/tiny_mce_popup.js');?>"></script>

<script>

var FileBrowserDialogue = {

  init: function() {},

  mySubmit: function (URL) {

   var win = tinyMCEPopup.getWindowArg('window');

   win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;

   if (typeof(win.ImageDialog) != 'undefined') {

	if (win.ImageDialog.getImageData) {

	 win.ImageDialog.getImageData();

	}

	if (win.ImageDialog.showPreviewImage) {

	 win.ImageDialog.showPreviewImage(URL);

	}

   }

   tinyMCEPopup.close();

  }

};

tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);

$().ready(function() {

  $('#elfinder').elfinder({

   url : '<?php echo base_url("elf/elf_init");?>',

   getFileCallback: function(url) {

	FileBrowserDialogue.mySubmit(url);

   }

  })

});

</script>

</head>

<body>

<div id="elfinder">File Manager</div>

</body>

</html>


And this is /application/views/elf_view.php/



<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>File Manager</title>

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/jquery/ui-themes/smoothness/jquery-ui-1.8.18.custom.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/common.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/dialog.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/toolbar.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/navbar.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/statusbar.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/contextmenu.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/cwd.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/quicklook.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/commands.css">

<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/theme.css">

<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-1.7.1.min.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-ui-1.8.18.custom.min.js"></script>

<!-- elfinder core -->

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.version.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/jquery.elfinder.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.resources.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.options.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.history.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/elFinder.command.js"></script>

<!-- elfinder ui -->

<script src="<?php echo base_url();?>assets/elfinder/js/ui/overlay.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/workzone.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/navbar.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/dialog.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/tree.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/cwd.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/toolbar.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/button.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/uploadButton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/viewbutton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/searchbutton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/sortbutton.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/panel.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/contextmenu.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/path.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/stat.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/ui/places.js"></script>

<!-- elfinder commands -->

<script src="<?php echo base_url();?>assets/elfinder/js/commands/back.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/forward.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/reload.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/up.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/home.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/copy.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/cut.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/paste.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/open.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/rm.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/info.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/duplicate.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/rename.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/help.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/getfile.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/mkdir.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/mkfile.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/upload.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/download.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/edit.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/quicklook.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/quicklook.plugins.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/extract.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/archive.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/search.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/view.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/resize.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/commands/sort.js"></script>

<!-- elfinder languages -->

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.ar.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.bg.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.ca.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.cs.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.de.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.en.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.es.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.fr.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.hu.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.jp.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.nl.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.pt_BR.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.ru.js"></script>

<script src="<?php echo base_url();?>assets/elfinder/js/i18n/elfinder.zh_CN.js"></script>

<!-- elfinder dialog -->

<script src="<?php echo base_url();?>assets/elfinder/js/jquery.dialogelfinder.js"></script>

<!-- elfinder 1.x connector API support -->

<script src="<?php echo base_url();?>assets/elfinder/js/proxy/elFinderSupportVer1.js"></script>

<script>

$().ready(function(){

  $('#elfinder').elfinder({

   url:'<?php echo base_url("elf/elf_init");?>'

  })

})

</script>

</head>

<body>

<div id="elfinder">File Manager</div>

</body>

</html>


And at last to make it work with tinymce popup in grocery CRUD I add to file [i]/assets/grocery_crud/js/jquery_plugins/config/jquery.tine_mce.config.js[/i] few line of code. This is with changes:



$().ready(function() {

  $('textarea.texteditor').tinymce({

   // Location of TinyMCE script

   script_url : base_url+'assets/grocery_crud/texteditor/tiny_mce.js',

   // General options

   theme : "advanced",

   plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

   // Theme options

   theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

   theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

   theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",

   theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",

   theme_advanced_toolbar_location : "top",

   theme_advanced_toolbar_align : "left",

   theme_advanced_statusbar_location : "bottom",

   theme_advanced_resizing : true,

   /*

   // Example content CSS (should be your site CSS)

   content_css : "css/content.css",

   */

   // Drop lists for link/image/media/template dialogs

   template_external_list_url : base_url+'assets/grocery_crud/texteditor/lists/template_list.js',

   external_link_list_url : base_url+"assets/grocery_crud/texteditor/lists/link_list.js",

   // i commented this line, cause of firebug

   //external_image_list_url : base_url+"assets/grocery_crud/texteditor/lists/image_list.js",

   media_external_list_url : base_url+"assets/grocery_crud/texteditor/lists/media_list.js",

   // Replace values for the template plugin

   template_replace_values : {

	username : "Some User",

	staffid : "991234"

   },

   // TinyMCE init code of elFinderBrowser

   file_browser_callback : 'elFinderBrowser'

  });

});

// function elFinderBrowser

function elFinderBrowser (field_name, url, type, win) {

  var elfinder_url = base_url+'elf/elf_popup';	// use an absolute path!

  tinyMCE.activeEditor.windowManager.open({

	file: elfinder_url,

	title: 'File Manager',

	width: 900,

	height: 470,

	resizable: 'yes',

	inline: 'yes',	// This parameter only has an effect if you use the inlinepopups plugin!

	popup_css: false, // Disable TinyMCE's default popup CSS

	close_previous: 'no'

  }, {

	window: win,

	input: field_name

  });

  return false;

}


So if we click button "Insert/Edit image" in TinyMCE, we have popup window, where we can click "Browse" and choose or upload an image with elFinder and use it in text editor.

And one more thing. I don't want to put pics or files neither into standard elFinder folder /assets/elfinder/[b]files[/b]/, nor into grocery CRUD uploads folder /assets/[b]uploads[/b]/. So I made new one in web site folder and call it /[b]myuploads[/b]/. Check permitions of this folder in your server, if something won't work.

P.S. I made .zip archive, but I can't share it in forum, cause of upload quota. If anyone want to get all in one, its here http://noskov.biz/ci...ud_elfinder.zip
[/quote]
Hi i download the zip and setup in my domain but it show error unable to connect to backend while i click the upload button,

gouarv
  • profile picture
  • Member

Posted 26 April 2012 - 04:33 AM

i download the zip and test but get an error as Unable to connect backend.Backend not found. Need help to solve this issue

noskov.biz
  • profile picture
  • Member

Posted 26 April 2012 - 13:19 PM

Hi! I've made a fresh compilation of Codeigniter + grocery_CRUD + elFinder (stable version 2.0rc1): http://noskov.biz/ci...ud_elfinder.zip and update the previous manual.

gouarv, please try the new compilation. If there will be the same error, please tell me what response you get from [b]elfinder_init[/b] function in the firebug? For example: [attachment=129:resp.png]

cangak
  • profile picture
  • Member

Posted 27 April 2012 - 17:37 PM

hi noskov i love your selution about elfinder but there is some problem in my pc
1, i cannot use your .httaccess


RewriteEngine on

RewriteCond $1 !^(index\.php|assets|myuploads)

RewriteRule ^(.*)$ /index.php/$1 [L]

it shown
[b] Object not found![/b]

show i use




RewriteEngine On

RewriteBase /code/

RewriteCond %{REQUEST_URI} ^system.*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

ErrorDocument 404 /index.php

work good but it shown blank page when i click the file manager only shown
File Manager

i got no idea about this

thanks before

noskov.biz
  • profile picture
  • Member

Posted 28 April 2012 - 08:07 AM

Hi, cangak! As I see, your files are located in the subfolder [b]code[/b] and not in the web site root folder. But in the .htaccess you didn't specify this place:


RewriteRule ^(.*)$ index.php?/$1 [L]


Try to change RewriteRule into this:


RewriteRule ^(.*)$ /code/index.php?/$1 [L]


Or into this (I don't sure, but it may be because of missing slash before index.php):


RewriteRule ^(.*)$ /index.php?/$1 [L]


Please, let me know if it will work well or not.

P.S. Tell me, if you don't use .htaccess file, is it work well with index.php in your url?

cangak
  • profile picture
  • Member

Posted 29 April 2012 - 08:42 AM

edit:


//start edit

it work the problem is in path data, i try to create new folder in asset/data and set the


'path'  => set_realpath('asset/data'),

'URL'	=> base_url('asset/data'),

it sown error
[b]Invalid backend configuration.
Readable volumes not available.[/b]

it could be a selution for gouarv too, just change the realpath to dfoult that noskov.biz give us,


'path'  => set_realpath('myuploads'),

		 'URL'	=> base_url('myuploads'),

and dont foget to create it folder
i dont get it why it come error when i change to other folder, but ill try find it, thanks noskov


//end edit


ok it work, and the probem is in [b]elf_view.php[/b], in your code you write


<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-1.7.1.min.js"></script>

it should be


<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-1.7.2.min.js"></script>


but i have same problem with
[b]Invalid backend configuration.
Readable volumes not available.[/b]
and what them meaning of error below



{"error":["errConf","errNoVolumes"],"debug":["Driver \"elFinderVolumeLocalFileSystem\" : Root folder does not exists."]}

noskov.biz
  • profile picture
  • Member

Posted 29 April 2012 - 09:58 AM

Hey there!



<script src="<?php echo base_url();?>assets/elfinder/jquery/jquery-1.7.1.min.js"></script>


This version jquery library was in previous compilation. In the new one I have already changed it to jquery-1.7.2. Please, download it from http://noskov.biz/ci...ud_elfinder.zip and replace [b]all[/b] with new files and folders.

I've also changed in [b]./application/controllers/examples.php[/b] file elfinder initializing function. Just not to load Path helper and use codeigniter's reserved name FCPATH:


/* Elfinder initialization */

public function elfinder_init()

{

  $opts = array(

   'debug' => true,

   'roots' => array(

	array(

	 'driver' => 'LocalFileSystem',

	 'path' => FCPATH.'myuploads',

	 'URL' => base_url('myuploads'),

	 'alias' => 'My Uploads',

	 'uploadMaxSize' => '2M',

	 'attributes' => array(

	  array(

	   'pattern' => '/\.tmb$/',

	   'read' => false,

	   'write' => false,

	   'locked' => true,

	   'hidden' => true

	  )

	 ),

	)

   )

  );

  $this->load->library('elfinder_lib/Elfinder_lib', $opts);

}


As for your problem with "[b]Invalid backend configuration. [/b][b]Readable volumes not available.[/b]" Elfinder for some reason can not find the correct path to the specified directory :huh: There is something wrong in "[color=#008800][size=2]'path'[/size][/color][color=#666600][size=2]=>[/size][/color][color=#000000][size=2] 'correct_path_to_the_directory'[/size][/color]".

Please, for the test change in function [b]elfinder_init[/b]:


$this->load->library('elfinder_lib/Elfinder_lib', $opts);


into this:


echo '<pre>';

print_r($opts);

exit();

$this->load->library('elfinder_lib/Elfinder_lib', $opts);


and go in the browser to [b]http://your_project/examples/elfinder_init[/b] and give me what you have in $opts. Is it correct path to your folders in "path" and "url" values?

stavgian
  • profile picture
  • Member

Posted 31 May 2012 - 22:34 PM

Works Great!!!
Worked from the First Page Posts....

noskov.biz
  • profile picture
  • Member

Posted 01 June 2012 - 05:46 AM

Hi, I'm glad to hear that :)

I didn't change the compilation from the end of April and didn't make any update of grocery_CRUD, but in last month there were a lot of commits in github and we have new stable version 1.2.2

If you want you can update grocery_CRUD for your project, I tried not to change many files in the library.

shadesoflight
  • profile picture
  • Member

Posted 16 August 2012 - 21:40 PM

1) If you notice when creating elfinder_lib.php there's a function and some options in an array, it's fine to delete those.

2)[font=arial,helvetica,sans-serif][size=4] change "examples" in 
url:'<?php echo base_url("examples/elfinder_init");?>',
located in [b]elfinder_popup_view[/b] and [b]elfinder_view[/b] and also change "examples" in 
  var elfinder_url = base_url+'examples/elfinder_popup'
located in [b]jquery.tine_mce.config.js[/b] --[/size][/font] [color=#ff0000][b]change the "examples" to the name of the [u]controller[/u] you put the following elfinder functions in:[/b][/color]

[i]


/* Standalone Elfinder */

public function elfinder_files()

{

  $this->load->view('elfinder_view');

}[/i]

[i]/* Popup Elfinder in TinyMCE */

public function elfinder_popup()

{

  $this->load->view('elfinder_popup_view');

}

/* Elfinder initialization */

public function elfinder_init()

{

  $opts = array(

   'debug' => true,

   'roots' => array(

		array(

		 'driver' => 'LocalFileSystem',

		 'path' => FCPATH.'myuploads',[color=#ff0000] [b]  // SEE STEP 4[/b][/color]

		 'URL' => base_url('myuploads'),[color=#ff0000] [b] // SEE STEP 4[/b][/color]

		 'alias' => 'My Uploads',

		 'uploadMaxSize' => '2M',

		 'attributes' => array(

		  array(

		   'pattern' => '/\.tmb$/',

		   'read' => false,

		   'write' => false,

		   'locked' => true,

		   'hidden' => true

		  )

		 ),

		)

   )

  );

  $this->load->library('elfinder_lib/Elfinder_lib', $opts);

}
[/i]




[font=helvetica, arial, sans-serif][color=#282828]3) Set the script and link tags in elfinder_popup_view and elfinder_view ( I used google's CDN so that you don't have to download to your CI and for caching reasons):[/color][/font]




<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>




4) set your upload folder path correctly in your controller with the function 
public function elfinder_init()

This should be set to a folder which exists and which your webserver user has write privileges on. [color=#ff0000]([b]Note[/b]: in step 2, the current folder is base_url/myuploads --- we changed this to base_url/assets/uploads/elfinder_uploads)[/color]

stavgian
  • profile picture
  • Member

Posted 29 September 2012 - 16:12 PM

Did someone make this work with the latest version Grocery Crud 1.3.1 ?

onayz
  • profile picture
  • Member

Posted 16 December 2012 - 11:04 AM

Hi all...
I've got a problem with elfinder and grocery crud...
"Unable to connet to backend"

i'am using grocery crud 133

please: i need the solution immedietly

daniel
  • profile picture
  • Member

Posted 26 May 2013 - 11:19 AM

hi!

I don't think that I'm good developer, I'm comparatively new to all of this and when I can do something (e.g. just put elfinder to tinymce) i say "it's easy". Because I realise: if I can do this, anybody can do the same or even better :) Actually it was not so easy for me.

Yeah, I share the code with pleasure, I'll be happy if it will be usefull for someone. And any comments and suggestions are welcome!

So, in two words about the code. I use available versions for today from github:

I put CodeIgniter on website folder. Don't want index.php in my urls, thats why I change line #54 in application/config/config.php
from
$config['index_page'] = 'index.php';
to
$config['index_page'] = '';
and add to website folder .htaccess file with these lines

RewriteEngine on
RewriteCond $1 !^(index\.php|assets|myuploads)
RewriteRule ^(.*)$ /index.php/$1 [L]
Following this instruction http://www.grocerycr...er_installation I put grocery CRUD files into the correspondes CodeIgniter folders and config some settings to make it work.

Then I put elFinder folder to assets folder and rename it to "elfinder". So we have assets structure looks like this:
/assets/
----/elfinder/
--------/css/
--------/files/
--------/img/
--------/js/
--------/php/
--------/sounds/
--------index.html
----/grocery_crud/
----/uploads/
----index.html

Then I move php folder from /assets/elfinder/ into /application/libraries/ and rename folder to "elfinder_lib". Find /application/libraries/elfinder_lib/connector.php/ file and rename it to "Elfinder_lib.php". In new CodeIgniter library I change code into this:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
error_reporting(E_ALL|E_STRICT);
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderConnector.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinder.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeDriver.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeLocalFileSystem.class.php';
#include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeMySQL.class.php';
#include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeFTP.class.php';
class Elfinder_lib {
function __construct($opts)
{
  $connector = new elFinderConnector(new elFinder($opts), true);
  $connector->run();
}
}

/* End of file Elf_lib.php */
/* Location: ./application/libraries/elfinder_lib/Elfinder_lib.php */
Then I create new functions in our examples controller (./your_project/application/controllers/examples.php), witch will use Elfinder_lib class:

/* Standalone Elfinder */
public function elfinder_files()
{
  $this->load->view('elfinder_view');
}

/* Popup Elfinder in TinyMCE */
public function elfinder_popup()
{
  $this->load->view('elfinder_popup_view');
}

/* Elfinder initialization */
public function elfinder_init()
{
  $opts = array(
   'debug' => true,
   'roots' => array(
	array(
	 'driver' => 'LocalFileSystem',
	 'path' => FCPATH.'myuploads',
	 'URL' => base_url('myuploads'),
	 'alias' => 'My Uploads',
	 'uploadMaxSize' => '2M',
	 'attributes' => array(
	  array(
	   'pattern' => '/\.tmb$/',
	   'read' => false,
	   'write' => false,
	   'locked' => true,
	   'hidden' => true
	  )
	 ),
	)
   )
  );
  $this->load->library('elfinder_lib/Elfinder_lib', $opts);
}
Then I create couple of new view files: "elfinder_popup_view.php" (for tinymce popup) and "elfinder_view.php" (for elFinder only as file manager).

This is ./your_project/application/views/elfinder_popup_view.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Elfinder</title>
<meta name="description" content="">
<link rel="stylesheet" href="<?php echo base_url();?>assets/jquery/ui-themes/smoothness/jquery-ui-1.8.18.custom.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/elfinder.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/theme.css">
<script src="<?php echo base_url();?>assets/jquery/jquery-1.7.2.min.js"></script>
<script src="<?php echo base_url();?>assets/jquery/jquery-ui-1.8.18.custom.min.js"></script>
<script src="<?php echo base_url();?>assets/elfinder/js/elfinder.min.js"></script>
<script src="<?php echo base_url();?>assets/grocery_crud/texteditor/tiny_mce_popup.js"></script>
<script>
var FileBrowserDialogue={
  init:function(){},
  mySubmit:function(URL){
   var win=tinyMCEPopup.getWindowArg('window');
   win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value=URL;
   if (typeof(win.ImageDialog)!='undefined'){
	if (win.ImageDialog.getImageData){
	 win.ImageDialog.getImageData();
	}
	if (win.ImageDialog.showPreviewImage){
	 win.ImageDialog.showPreviewImage(URL);
	}
   }
   tinyMCEPopup.close();
  }
};
tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
$().ready(function(){
  var elf = $('#elfinder').elfinder({
   url:'<?php echo base_url("examples/elfinder_init");?>',
   height:450,
   getFileCallback:function(url){
	FileBrowserDialogue.mySubmit(url);
   }
  }).elfinder('instance');
});
</script>
</head>
<body>
<div id="elfinder">Elfinder</div>
</body>
</html>
And this is ./your_project/application/views/elfinder_view.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Elfinder</title>
<meta name="description" content="">
<link rel="stylesheet" href="<?php echo base_url();?>assets/jquery/ui-themes/smoothness/jquery-ui-1.8.18.custom.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/elfinder.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/elfinder/css/theme.css">
<script src="<?php echo base_url();?>assets/jquery/jquery-1.7.2.min.js"></script>
<script src="<?php echo base_url();?>assets/jquery/jquery-ui-1.8.18.custom.min.js"></script>
<script src="<?php echo base_url();?>assets/elfinder/js/elfinder.min.js"></script>
<script>
$().ready(function(){
  var elf = $('#elfinder').elfinder({
   url:'<?php echo base_url("examples/elfinder_init");?>',
   height:460,
  }).elfinder('instance');
});
</script>
</head>
<body>
<div id="elfinder">Elfinder</div>
</body>
</html>
And at last to make it work with tinymce popup in grocery CRUD I add to file ./your_project/assets/grocery_crud/js/jquery_plugins/config/jquery.tine_mce.config.js few line of code. This is with changes:

$().ready(function() {
  $('textarea.texteditor').tinymce({
   // Location of TinyMCE script
   script_url : base_url+'assets/grocery_crud/texteditor/tiny_mce.js',
  
   // General options
   theme : "advanced",
   plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
   // Theme options
   theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
   theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
   theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
   theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "left",
   theme_advanced_statusbar_location : "bottom",
   theme_advanced_resizing : true,
   /*
   // Example content CSS (should be your site CSS)
   content_css : "css/content.css",
   */
   // Drop lists for link/image/media/template dialogs
   template_external_list_url : base_url+'assets/grocery_crud/texteditor/lists/template_list.js',
   external_link_list_url : base_url+"assets/grocery_crud/texteditor/lists/link_list.js",
   // external_image_list_url : base_url+"assets/grocery_crud/texteditor/lists/image_list.js",
   media_external_list_url : base_url+"assets/grocery_crud/texteditor/lists/media_list.js",
   // Replace values for the template plugin
   template_replace_values : {
	username : "Some User",
	staffid : "991234"
   },
  
   file_browser_callback : 'elFinderBrowser'
  });
});

function elFinderBrowser (field_name, url, type, win){
  var elfinder_url = base_url+'examples/elfinder_popup';
  tinyMCE.activeEditor.windowManager.open({
	file: elfinder_url,
	title: 'Elfinder',
	width: 920,
	height: 470,
	resizable: 'yes',
	inline: 'yes',
	popup_css: false,
	close_previous: 'no'
  },{
	window: win,
	input: field_name
  });
  return false;
}
So if we click button "Insert/Edit image" in TinyMCE, we have popup window, where we can click "Browse" and choose or upload an image with elFinder and use it in texteditor.

And one more thing. I don't want to put pics or files neither into standard elFinder folder ./your_project/assets/elfinder/files/, nor into grocery CRUD uploads folder ./your_project/assets/uploads/. So I made new one in web site folder and call it myuploads. Check permitions of this folder in your server, if something won't work.

I made .zip archive, if anyone want to get all in one, its here http://noskov.biz/ci...ud_elfinder.zip

 

I  followed your tutorial and use the codes you provided but it's not working ... i get this error instead "Invalid backend configuration.

Readable volumes not available. "


rothkj1022
  • profile picture
  • Member

Posted 06 August 2013 - 20:23 PM

oh wow.. those are crazy prices...
any thoughts on this: http://justboil.me/tinymce-images-plugin/ ?

 

I successfully implemented this - wasn't too bad.  I'd recommend it.