[threestatedrive]

Hi, I think this is such an amazing solution, and will insanely speed up my work..
my question is.. how can i set up image upload inside textareas...
currently i can attach a link to a file.. but how can I insert an image into a text area, and browse my machine and upload?
i've looked all over, but no luck finding it...

thanks in advance

[web-johnny]

You have to buy the enterprise tinymce edition for images. I look through the internet and it is the cheapest one. That's why I choosed tinymce. For one licence it needs only 32 euro + 8 euro VAT ( for more go to http://www.tinymce.c...manager_buy.php ) . For example the licence to only USE ck editor (without image uploader) is $375!!! and for image upload is: + $59

If you want to have a basic texteditor with file uploader and FREE you can also add: http://nicedit.com . My suggestion is tinymce as I used it in many projects and didn't have any problem with this.

[threestatedrive]

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

[web-johnny]

Ok I will check it. I didn't know that exist such thing. Its better than nothing .

I will check for security issues as it is the most important thing for the uploader. Try it also from your own and tell us your experience with-it

Thanks.

[threestatedrive]

i do have a question though... where do i adjust the tinymce buttons? and how?

[web-johnny]

I don't know you have to read his documentation. The only thing that I can tell you is that the texteditor is at: assets/grocery_crud /texteditor and the configuration file at: assets/grocery_crud/js/jquery_plugins/config/jquery.tine_mce.config.js

[threestatedrive]

awesome that's what i was looking for!

[threestatedrive]

seems to work on the upload side...
still have to use the default image button to make any alignments sizing etc.
but as an uploader it works..
haven't had a chance to look into security side...
not sure when or if i will be able to...

[web-johnny]

Ok [member='threestatedrive'] . Thanks to share this info.

[noskov.biz]

hi!

recently i had to use file manager in one of my sites and integrate it with tinymce (or ckeditor). i used elfinder (http://elrte.org/elfinder) because mcfilemanager or mcimagemanager or ckeditor were too expensive for the project.

i agree that security is important, but i not spent much time for it and don't know how safe and serurely elfinder. it was easy to intagrate to tinymce + allow users manipulate with their pics.
web-johnny, if you will look at elfinder, i'm interested to know your opinion about it? is it worth or not?

have a good day!

[web-johnny]

elfinder is a great plugin. I used it before and I didn't have any security problems with it.I didn't know that you can intergate it so easy to tinymce. If you can share your code to this forum it will be great for everyone .

And lastly don't believe that I am a security freak. I have been hacked twice by the old FCKeditor (that was free by the way) to customer's website from the uploader. It is just that they create bots for known plugins so I am trying to avoid those things.

[noskov.biz]

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]

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/
--------/css/
--------/files/
--------/img/
--------/js/
--------/[b]php[/b]/
--------/sounds/
--------index.html
----/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]Elfinder_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 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 [b]examples[/b] 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: "[b]elfinder_popup_view.php[/b]" (for tinymce popup) and "[b]elfinder_view.php[/b]" (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[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",

   // 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/[b]files[/b]/, nor into grocery CRUD uploads folder ./your_project/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.

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

[web-johnny]

Thanks there. I think that your tutorial is fine. I will link at your post if anyone wants an uploader to their tinymce for free . Thanks for sharing this.

PS. I have also changed the title of this topic so it can attract more people to tinymce [b]+ free uploader [/b]. I hope [member='threestatedrive'] don't have any problem with that

[noskov.biz]

Nothing to
I tried not to change many things. And if anyone want to configurate it for themselves there is wiki and docs for elfinder.

Have a nice day!

[threestatedrive]

hey guys,
first off.. nope no problem in changing the thread title at all
second.. i found my solution to be a bit buggy... so i havent posted how i got it to work... am going to keep poking around a bit first

trying a few things

[threestatedrive]

[sub]i've managed to very buggily get my uploader working, but I'mg going to look into this one above. seems it could be a lot easier and better.[/sub]
[sub]that being said, is there a way that you can think of, to automatically wrap any image uploaded through tinymce in an anchor tag and prep it for fancybox or lightbox?[/sub]
[sub]i can't think how i could do that, hoping maybe one of you guys might.[/sub]

[noskov.biz]

Hi!

The first thing that comes to mind is to use regular expressions. For example, we have a text with images from our tinymce. By default each <img> has wraped in <p>, and we have something like this: <p><img src="" alt="" /></p>. In order to change this use:

$all_from_texteditor = preg_replace('/<p><img/', '<a href="" class="you_want" id="you_need"><img', $all_from_text_editor);

$all_from_texteditor = preg_replace('/ \/><\/p>/', ' /></a>', $all_from_texteditor);

echo $all_from_texteditor;

And as for automatically link <a> with correspond <img>, I can't say anything yet

It seems to me that all this stuff can be done much easier using jquery. Some functions simply can copy or replace attributes from image source to anchor href.

[TheUndsandpiper]

Hi! First of all, thanks noskov.biz for this great solution. However, i'm having problems when i uploaded my project to my web server. When i open the uploader, i get the following error:
[quote]Invalid backend response. Data is not JSON[/quote]

I checked with firebug and i saw a warning saying that proc_open() has been disabled for security reasons. I think i can change that in the php.ini file, but i don't have access to it and my hosting provider won't change it.
is there any solution for this?
Thanks in advance!

[noskov.biz]

Hm, i haven't faced with this problem. I don't know if it helps, but try to disable commands of "extract" and "archive" in [b]/you_website/assets/elfinder/js/elFinder.options.js[/b] file in line #114 (or near it). These commands use proc_open() as i know.

commands : [

  'open', 'reload', 'home', 'up', 'back', 'forward', 'getfile', 'quicklook',

  'download', 'rm', 'duplicate', 'rename', 'mkdir', 'mkfile', 'upload', 'copy',

  'cut', 'paste', 'edit', /*'extract', 'archive',*/ 'search', 'info', 'view', 'help', 'resize', 'sort'

],

[TheUndsandpiper]

I disabled those commands, but i still get the same error. So i tried to commented the function that uses proc_open() in elFinderVolumeDriver.class.php, which is procExec, but then i get the error "Unable to connecto to backend". I can't find a solution, so If you know a solution for this, it'll be really helpful, if not i'll try with another uploader.