elRTE + elFinder (File manager)
Requirements ¶
Ext pack contains all necessary to start work. Works with JQ, JQ UI, .php Tested with Yii v.1.1.5+ but I think it would work in earlier versions too. publishes it`s resources into assets dir.
Versions ¶
ELRTEF 1.2.1:
- bugfix by rhertogh
ELRTEF 1.2:
- elRTE v. 1.3
- elFinder v. 1.2
ELRTEF 1.1:
- elRTE v. 1.2
- elFinder v. 1.1
ELRTEF 1.0:
- elRTE v. 1.1
- elFinder v. 1.1
Usage ¶
- Unpack extension to desired dir.
- Go to
elfinder/connectors/php/connector.php
(orconnectors/php/connector.php
in v.1.0) and edit it. Enter your passkey in first line
>Note: if you reconfigure your connector.php settings or changing styles - you must clean your assets dir to take effect.
- Insert the following code:
<?php //you can use any desired dir to install this extension
$this->widget('application.widgets.elrtef.elRTE', array(
'model' => $model,
'attribute' => 'text',
//'name' => 'text',
//'htmlOptions' => array('height' => '600'),
'options' => array(
'doctype'=>'js:\'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\'',
'cssClass' => 'el-rte',
'cssfiles' => array('css/elrte-inner.css'),
'absoluteURLs'=>true,
'allowSource' => true,
'lang' => 'ru',
'styleWithCss'=>'',
'height' => 400,
'fmAllow'=>true, //if you want to use Media-manager
'fmOpen'=>'js:function(callback) {$("<div id=\"elfinder\" />").elfinder(%elfopts%);}',//here used placeholder for settings
'toolbar' => 'maxi',
),
'elfoptions' => array( //elfinder options
'url'=>'auto', //if set auto - script tries to connect with native connector
'passkey'=>'mypass', //here passkey from first connector`s line
'lang'=>'ru',
'dialog'=>array('width'=>'900','modal'=>true,'title'=>'Media Manager'),
'closeOnEditorCallback'=>true,
'editorCallback'=>'js:callback'
),
)
);
?>
- try to add an image into your edit field by clicking directory icon in the right of image URL field.
Extension features ¶
- Added elFinder file manager
- Added passkey to connector and passkey field to elfinder options to get more secure
- All styles work fine
- Field remembers last input if validation errors
Whats new in: ¶
1.2.1
1.2.1 - bugfix by rhertogh
1.2
1.2 - adding jquery.ui loader
1.2 - updated elrte version to 1.3
1.2 - updated efinder version to 1.2
1.1
1.1 - lil bugfixes
1.1 - changed extension structure to easier update
1.1 - updated elrte version to 1.2
1.0
1.0 - initial release
Update instructions ¶
- Backup your connector file ('connectors/php/connector.php');
- Clean your assets dir
- Rename old
elrtef
extension toelrtef-bak
- Unpack new extension file to previous extension location
- Replace connector file in
elfinder/connectors/php/connector.php
with your backup connector copy - Clean up your assets dir manually, or using cleanassets command line script
- Test all required functionalities
- Remove
elrtef-bak
directory
Resources ¶
You can try demo on this sites and see available script options too.
about connector
Why don't you put connector into special action ?
It will help you to handle access for media uploading process.
You may find some info about it on this page
about connector
Потому что нужно было использовать этот виджет в отдельном модуле, а коннектор был вынесен в corecontroller. Но для паблика было решено оставить коннектор как есть, для простоты установки.
about connector in english
Because it was used in separate module, and connector was in corecontroller. But in public version I use original connector to simplify installation.
Good job
Looks good, I'll give it a try and give you my feedback. For now, Looks great, without no noticeable issues.
2 robregonm:
So there are some crossbrowser problems in Firefox. But they are from elRTE, not mine. We`ll wait for next elRTE release to fix it.
online demo
Online demo available on official elRTE site
Some Buttons on the Toolbar don't work!
Do you have any clue about why some buttons on the bottom row like image link and smileys would not work?I am using yii 1.5.
jquery-ui-1.8.5 not included by default??
Seems like -surprisingly enough- jquery-ui-1.8.5.custom.min.js is not registered by default in the widget's run method.I had to add this line:
$clientScript->registerScriptFile($baseUrl.'/js/jquery-ui-1.8.5.custom.min.js',CClientScript::POS_HEAD);
Hope that helps someone...
@drumaddict
Sorry for it, I`ll fix it in next release.
Thumbnails created only for images whose filename begins with number!
Hi again,sorry for too many posts.I have the editor and elfinder almost working perfect except for one last weird thing:Thumbnails in elfinder are created only for images whose filename begins with number!Now,how weird is that??My connector settings are
$opts = array( 'root' => 'J:\xampp\htdocs\yii_test\assets\uploads', 'URL' => 'http://localhost/yii_test/assets/uploads/', 'rootAlias' => 'Media', // display this instead of root directory nam 'imgLib' => 'gd', // image manipulation library (imagick, mogrify, gd) 'tmbDir' => '_tmb2', 'tmbCleanProb' => 1, 'tmbAtOnce' => 5, 'tmbSize' => 48, );
I will appreciate your help!
@drumaddict
You can ask this question on elfinder forum. I just only wrote an extension for Yii. But in my case all works fine and I can't help you (. tmbs name are some
md5's
from filepaths.@GOsha
i already did that, they have no clue.My problem is with the extension,the original source files work perfect on their own.In yii extension,thumbnails are created only for filenames that begin with number. (mypic.jpg does not generate thumbnail,2mypic.jpg does,this is crazy).Also preview with quick look does not work.Anyway,one last thing,what OS did you test on?I am on windows and use xampp stack as a local server.
@drumaddict
OS: WinXP SP3, Mandriva Linux - tested. Try not to cpecify additional options, and work with default options. Check. Change 1 option. Check... All is working on my computer. The last thing - check page with firefox firebug. Switch on profiler and error logging.
i have some error
i have some problem .. its didn't work .. the message of error
_Property "elRTE.elfoptions" is not defined.
Source File
/opt/lampp/htdocs/yii/framework/web/CWidgetFactory.php(162)_
could some body help me to resolve this?
Hmm
Hmmm. It couldn`t be, because it is defined in widget class:
class elRTE extends CInputWidget { public $options = array(); public $elfoptions = array();
If you want to resolve this problem - I need more info. Please contact my forum profile.
Thank you
Good extension.
I've made some modifications to the lib. I added a elFinder-only widget basically deleting lines from the elRTE widget and also modified the latter one to register properly Yii's jquery.ui and jquery-ui.css.
Where do I upload/post those changes?
@bigchirv
You can post your own extension. Simply, if you want, adding link to this this extension in description.
Situation with connecting JQuery and JQueryUI will be fixed next release.
Bug upon creation
Hi,
Found a bug; When one uses this in a create view and the model is empty, CActiveRecord::getAttributes() will not return an array key and value for all attributes (those that aren't set).
The fix is this, at the bottom of elRTE.php:
$cs->registerScript($id,$js,CClientScript::POS_HEAD); echo '<textarea id="'.$id.'" name="'.$name.'" rows="10" cols="40">'; // echo $this->model['attributes'][$this->attribute]; echo $this->model->{$this->attribute}; echo '</textarea>';
This asks for CActiveRecord::__get() instead, which returns a value even if its empty.
jquery.ui
You need to register jquery.ui as well, not just jquery.
$clientScript->registerCoreScript('jquery.ui');
Support for tabular input
You should change line 87 of elRTE.php from:
echo '<textarea id="'.$id.'" name="'.$name.'" rows="10" cols="40">'; echo $this->model['attributes'][$this->attribute]; echo '</textarea>';
to:
echo '<textarea id="'.$id.'" name="'.$name.'" rows="10" cols="40">'; $text=CHtml::resolveValue($this->model,$this->attribute); echo $text; echo '</textarea>';
So it could support tabular input like 'model'=>model[$index],'attribute'=>"[$index]text"
$text=CHtml::resolveValue($this->model,$this->attribute);
echo $text;
is it possible to past a screen shot?
For a beginner, I need to figure out if it is what I think it is...
Error
The editor is works fine. But when I pushed a button of File Manager, I've got an error:
Uncaught TypeError: Object [object Object] has no method 'resizable'
elFinder.viewelfinder.min.js:1
elFinderelfinder.min.js:1
a.fn.elfinderelfinder.min.js:1
d.d.extend.eachjquery.min.js:16
d.d.fn.d.eachjquery.min.js:16
a.fn.elfinderelfinder.min.js:1
opts.fmOpencreate:29
commandelrte.min.js:148
elRTE.ui.buttons.buttonelrte.min.js:111
d.event.handlejquery.min.js:16
d.event.add.m.k.handle.mjquery.min.js:16
fixed previous problem but het a new one
Previous problem => no jquery UI connected. But now i have a new problem - with file manager - "Invalid server response"
How to add a custom toolbar
First make a new js file in the elRTE js folder, something like "protected/extensions/elrtef/elrte/js". You can name it anything you want, I named mine toolbar.js. I created one new panel which is called web2pyPanel. The panel is used in my custom toolbar web2pyToolbar.
toolbar.js
~~~
[javascript]
elRTE.prototype.options.panels.web2pyPanel = [
'bold', 'italic', 'underline', 'forecolor', 'formatblock', 'justifyleft', 'justifyright', 'justifycenter', 'justifyfull', 'outdent', 'indent', 'insertorderedlist', 'insertunorderedlist', 'link', 'image'
];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel', 'elfinder',
'fullscreen'];
Tell the widget to load your custom toolbar definition. elRTE.php ```php // find this line $clientScript->registerScriptFile($baseUrl. '/js/elrte.min.js',CClientScript::POS_HEAD); // then add this line $clientScript->registerScriptFile($baseUrl. '/js/toolbar.js',CClientScript::POS_HEAD); ``` Now you can use your custom toolbar name (in my case web2pyToolbar) in the Options property of elRTE. ```php $this->widget('application.extensions.elrtef.elRTE', array( 'model' =>$model, 'attribute' => 'Content', 'options' => array( // specify doctype used in your application. Yii // default is below. 'doctype'=>'js:\'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">\'', 'cssClass' => 'el-rte', // I added a second css file that contains the main // tags css so the WSYIWYG part renders using the same // styles as the site. 'cssfiles' => array('css/elrte-inner.css', 'css/main.css'), 'absoluteURLs'=>true, 'allowSource' => true, 'styleWithCss'=>false, 'width' => 600, 'height' => 400, 'fmAllow'=>true, //if you want to use Media-manager 'fmOpen'=>'js:function(callback) {$("<div id=\"elfinder\" />"). elfinder(%elfopts%);}',//here used placeholder for settings // specify your custom toolbar name here 'toolbar' => 'web2pyToolbar', ), 'elfoptions' => array( //elfinder options 'url'=>'auto', //if set auto - script tries to connect with native connector 'passkey'=>'mypass', //here passkey from first connector`s line 'dialog'=>array('width'=>'700','modal'=>true,'title'=>'Media Manager'), 'closeOnEditorCallback'=>true, 'editorCallback'=>'js:callback' ), ) ); ```
Inserting images not working - solution
Apparently this extension is sensitive to the jQuery version. When I used the version of jQuery included in Yii 1.1.8 everything worked except actually inserting the images into the content. I kept getting errors like "elrte object #<> has no method apply".
The solution is to use the version of jQuery and jQuery UI included with this extension, jquery-1.4.4.min.js and jquery-ui-1.8.7.custom.min.js.
elRTE.php
// these should work but don't // $clientScript->registerCoreScript('jquery'); // $clientScript->registerCoreScript('jquery.ui'); $clientScript->registerScriptFile($baseUrl.'/js/jquery-1.4.4.min.js',CClientScript::POS_HEAD); $clientScript->registerScriptFile($baseUrl.'/js/jquery-ui-1.8.7.custom.min.js',CClientScript::POS_HEAD); $clientScript->registerScriptFile($baseUrl.'/js/elrte.min.js',CClientScript::POS_HEAD);
Update v.1.2
Extension updated to v. 1.2.
JQUI included by default
Upgraded to elrte 1.3 + elfinder 1.2
not work
it's not work
Bug fix
after installing version 1.2 the dialogs(like the image window) were transparant.
I fixed this in elRTE.php
Line 6 from
public $jui_elrte_css = "";
to
public $jui_elrte_css = "default";
And line 37 from
$clientScript->registerCssFile($baseUrl.'/css/smoothness/jquery-ui-1.8.5.custom.css');
to
$clientScript->registerCssFile($baseUrl.'/css/smoothness/jquery-ui-1.8.13.custom.css');
Bugfix release
@rhertogh Thanx for report.
This ext. is very sensitive to JQ and JQUI versions.
In my cmf i use JQUI 1.8.5, and I can`t see errors.
Thanx for your bugfix.
weird problem
Hi, great extension, i love it, but i am having a weird problem with it, i included it's intializer code in the _form view and it works greate with the create action, but when using update, it does not show the thumbnails nor the image in the editor nor the file manager, although the both create and update actions using the same _form file, so what is the problem?
using elfinder only
great extension, and it's working, but i need to be able to run elfinder only in some pages without the editor, how?
@shalaby
I don`t implemented separate elfinder widget, but other people do it: separate Elfinder widgets
@GOsha
but this means i'll duplicate the files, is there away to avoid that?
Upload regular files
Hi!
Is there any way to upload just regular files, neither images nor flashes?
Just a word document.
Thank you!
Language
Just installed it and set the language option to "en" but it still seems to default to russian. I cleaned the assets directory just in case ...
Otherwise, looks great and easy to install - thx!
Update!
Hi,
1 - Can you update the extension to use the last version of ELRTEF library?
2 - i dont want set manually the absolute url on connector, i want pass from my view to the component, because the absolute url depending of my server. How i can get the absolute url from Yii and send to editor image path when select image?
Thanks!
@prchakal
The latest version of elfinder is unstable (RC1) - Release Candidate.
May be it will be good to do next RC-release. If I had time - I'll do it.
maxlength in elRTE
How to Limit the Number of Characters in elRTE ??
this fails
'htmlOptions' => array('maxlength' => 10),
and
'options' => array('maxlength' => 10 ),
some solution??
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.