Yii 1.1: elrtef

elRTE WYSIWYG editor with media-manager which can download files to your project media directory directly from editor
26 followers

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:

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 (or connectors/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

  1. Backup your connector file ('connectors/php/connector.php');
  2. Clean your assets dir
  3. Rename old elrtef extension to elrtef-bak
  4. Unpack new extension file to previous extension location
  5. Replace connector file in elfinder/connectors/php/connector.php with your backup connector copy
  6. Clean up your assets dir manually, or using cleanassets command line script
  7. Test all required functionalities
  8. Remove elrtef-bak directory

Resources

You can try demo on this sites and see available script options too.

Total 20 comments

#13782 report it
m3mm0 at 2013/06/25 10:07am
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??

#8736 report it
GOsha at 2012/06/22 08:25am
@prchakal
  1. ELRTEF uses the last version of ELRTE && Stable version of Elfinder. 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.
  2. I don't modify connector to save original paths and upgradeabilty. And will not do it at all. =)
#8730 report it
prchakal at 2012/06/22 04:52am
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!

#8201 report it
Chris Backhouse at 2012/05/17 08:57am
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!

#7971 report it
qsrtlwe at 2012/04/30 07:55am
Upload regular files

Hi! Is there any way to upload just regular files, neither images nor flashes? Just a word document.

Thank you!

#7959 report it
shalaby at 2012/04/29 08:15am
@GOsha

but this means i'll duplicate the files, is there away to avoid that?

#7958 report it
GOsha at 2012/04/29 04:56am
@shalaby

I don`t implemented separate elfinder widget, but other people do it: separate Elfinder widgets

#7954 report it
shalaby at 2012/04/28 07:47am
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?

#7191 report it
shalaby at 2012/03/02 07:54am
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?

#6320 report it
GOsha at 2011/12/29 05:26am
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.

#6315 report it
Rutger at 2011/12/28 10:06am
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');
#6204 report it
kusanagi at 2011/12/19 10:46am
not work

it's not work

#5407 report it
GOsha at 2011/10/10 07:24am
Update v.1.2

Extension updated to v. 1.2. JQUI included by default Upgraded to elrte 1.3 + elfinder 1.2

#5387 report it
TomTheGeek at 2011/10/08 09:42pm
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);
#5386 report it
TomTheGeek at 2011/10/08 08:24pm
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

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

// 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.

$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'
                ),
            )
        );
#4304 report it
ram0973 at 2011/06/23 07:44am
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"

#4266 report it
ram0973 at 2011/06/21 07:56am
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

#3129 report it
nettrinity at 2011/03/19 12:28am
is it possible to past a screen shot?

For a beginner, I need to figure out if it is what I think it is...

#2916 report it
micz at 2011/02/25 08:29am
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;

#2894 report it
Sarke at 2011/02/23 04:08am
jquery.ui

You need to register jquery.ui as well, not just jquery.

$clientScript->registerCoreScript('jquery.ui');

Leave a comment

Please to leave your comment.

Create extension