Yii 1.1: redactor

Yii Widget for Redactor - Fantastic WYSIWYG editor on jQuery
48 followers

Redactor Widget

Info: Redactor is OEM licensed for Yii and you can use it for free with the framework. See official widget.

Requirements

  • Redactor 8.0 or above
  • Yii 1.1.10 or above (Redactor requires jQuery 1.7.1)

Installation

  1. Download yii-redactor or Clone the files
  2. Extract into the widgets or extensions folder
  3. Download Redactor and language files if needed
  4. Extract Redactor files
    • redactor.css -> redactor/assets/css/
    • redactor.js and redactor.min.js -> redactor/assets/js/
    • language files -> redactor/assets/js/lang/

Usage

Using with a model

$this->widget('ext.redactor.ERedactorWidget',array(
    'model'=>$model,
    'attribute'=>'some_attribute',
));

Using with a model and a different language

$this->widget('ext.redactor.ERedactorWidget',array(
    'model'=>$model,
    'attribute'=>'some_attribute',
    // Redactor options
    'options'=>array(
        'lang'=>'fi',
    ),
));

Using with a name and value

$this->widget('ext.redactor.ERedactorWidget',array(
    'name'=>'some_name',
    'value'=>'some_value',
    // Redactor options
    'options'=>array(),
));

Using with a jQuery selector

$this->widget('ext.redactor.ERedactorWidget',array(
    // the textarea selector
    'selector'=>'.redactor',
    // Redactor options
    'options'=>array(),
));

Override default settings in config/main.php

return array(

    // application components
    'components'=>array(
        (...)

        // Defaults to Widgets
        'widgetFactory' => array(
            'widgets' => array(
                'ERedactorWidget' => array(
                    'options'=>array(
                        'lang'=>'fi',
                        'buttons'=>array(
                            'formatting', '|', 'bold', 'italic', 'deleted', '|',
                            'unorderedlist', 'orderedlist', 'outdent', 'indent', '|',
                            'image', 'video', 'link', '|', 'html',
                        ),
                    ),
                ),
            ),
        ),

        (...)
    ),
);

Image and file upload with default actions

Step 1

Let's assume we are using Post model and PostController.

Create "uploads" folder to application root, add write permissions to it and add actions to PostController with default values.

class PostController extends Controller
{
    public function actions()
    {
        return array(
            'fileUpload'=>'ext.redactor.actions.FileUpload',
            'imageUpload'=>'ext.redactor.actions.ImageUpload',
            'imageList'=>'ext.redactor.actions.ImageList',
        );
    }
    ...
}

Or let actions create "uploads" folder automatically to application root folder.

class PostController extends Controller
{
    public function actions()
    {
        return array(
            'fileUpload'=>array(
                'class'=>'ext.redactor.actions.FileUpload',
                'uploadCreate'=>true,
            ),
            'imageUpload'=>array(
                'class'=>'ext.redactor.actions.ImageUpload',
                'uploadCreate'=>true,
            ),
            'imageList'=>array(
                'class'=>'ext.redactor.actions.ImageList',
            ),
        );
    }
    ...
}

Or add actions to PostController with other custom values.

class PostController extends Controller
{
    public function actions()
    {
        return array(
            'fileUpload'=>array(
                'class'=>'ext.redactor.actions.FileUpload',
                'uploadPath'=>'/path/to/uploads/folder',
                'uploadUrl'=>'/url/to/uploads/folder',
                'uploadCreate'=>true,
                'permissions'=>0755,
            ),
            'imageUpload'=>array(
                'class'=>'ext.redactor.actions.ImageUpload',
                'uploadPath'=>'/path/to/uploads/folder',
                'uploadUrl'=>'/url/to/uploads/folder',
                'uploadCreate'=>true,
                'permissions'=>0755,
            ),
            'imageList'=>array(
                'class'=>'ext.redactor.actions.ImageList',
                'uploadPath'=>'/path/to/uploads/folder',
                'uploadUrl'=>'/url/to/uploads/folder',
            ),
        );
    }
    ...
}

Step 2

Add widget to the form view.

$attribute='content';
$this->widget('ext.redactor.ERedactorWidget',array(
    'model'=>$model,
    'attribute'=>$attribute,
    'options'=>array(
        'fileUpload'=>Yii::app()->createUrl('post/fileUpload',array(
            'attr'=>$attribute
        )),
        'fileUploadErrorCallback'=>new CJavaScriptExpression(
            'function(obj,json) { alert(json.error); }'
        ),
        'imageUpload'=>Yii::app()->createUrl('post/imageUpload',array(
            'attr'=>$attribute
        )),
        'imageGetJson'=>Yii::app()->createUrl('post/imageList',array(
            'attr'=>$attribute
        )),
        'imageUploadErrorCallback'=>new CJavaScriptExpression(
            'function(obj,json) { alert(json.error); }'
        ),
    ),
));

Changelog

v1.1

  • Default actions for image and file upload.

v1.0

  • Initial version.

License

yii-redactor is free and unencumbered public domain software.

Total 20 comments

#16738 report it
exru at 2014/03/24 03:20am
ATTENTION!!! ADD PLUGINS
if(isset($this->options['plugins'])){
   $this->plugins = $this->options['plugins'];
}
// insert it into 104 line of "Redactor widget". Otherwise your plugins options will be lost :)
#16580 report it
Stefano Mtangoo at 2014/03/07 06:31am
Use official version

use official version here

#16576 report it
taggert at 2014/03/07 05:12am
where to download redactor?

Hi,

Just for inforamtion...

redactor.css redactor.js language files

Readme says: http://redactorjs.com/download/

Which leads to: http://imperavi.com/redactor/download/

But there is only a option to buy a license - not to download the files. So do we have to buy redactor when we want to use this?

Thanks.

#15851 report it
mem at 2013/12/22 10:17am
Step 4 question

It says on step number 4)

"Extract Redactor files"

Where should we "extract them"?

#14665 report it
egor at 2013/09/02 07:16am
To add plugins
$this->widget('ext.redactor.ImperaviRedactorWidget',array(
    /* ... */ 
    'options'=>array( /* ... */ ),
    'plugins' => array(
        'fontsize' => array('js' => array('fontsize.js')),
        'fullscreen' => array('js' => array('fullscreen.js'))
    ),
));
#14601 report it
JayRoe at 2013/08/27 06:57am
Redactor 9

How do we upgrade to redactor 9?

#13790 report it
janisto at 2013/06/26 08:27am
@qsrtlwe

Check out: https://github.com/yiiext/imperavi-redactor-widget

You can use the same default actions with that widget, too.

#13789 report it
qsrtlwe at 2013/06/26 07:44am
Plugins

Hi! Is there any easy way to use redactor's plugin like fontsize?

#13284 report it
Stefano Mtangoo at 2013/05/20 03:12pm
Error: Reload the page to get source for xxx

I want to upload image but I hit a wall. I did not change everything, just default. Upload folder is OK but I cannot upload. When I load widget I get (on Firebug)

Reload The Page To Get Source For: http://admin.promusic.local/uploads/site/summary_swa/96c09b9dc3116a7e07d312dc746c4ddf.jpeg

I do not know what to do. AFAICS all looks fine. Help!

Edit: I should add that I use Virtual host in apache! Full Trace

GET ?attr=awards_swa

500 Internal Server Error

admin.promusic.local

624 B

127.0.0.1:80

253ms ParamsHeadersResponseCacheHTMLCookies

PHP Error [2]

opendir(promusic/uploads/site/awards_swa): failed to open dir: No such file or directory (promusic/common/lib/Yii/utils/CFileHelper.php:160)

#0 unknown(0): WebApplication->handleError()

1 promusic/common/lib/Yii/utils/CFileHelper.php(160): opendir()

2 promusic/common/lib/Yii/utils/CFileHelper.php(87): findFilesRecursive()

3 promusic/backend/extensions/redactor/actions/ImageList.php(33): findFiles()

4 unknown(0): ImageList->run()

5 promusic/common/lib/Yii/web/actions/CAction.php(107): ReflectionMethod->invokeArgs()

6 promusic/common/lib/Yii/web/actions/CAction.php(73): ImageList->runWithParamsInternal()

7 promusic/common/lib/Yii/web/CController.php(309): ImageList->runWithParams()

8 promusic/common/lib/Yii/web/filters/CFilterChain.php(134): SiteController->runAction()

9 promusic/common/lib/Yii/web/filters/CFilter.php(41): CFilterChain->run()

10 promusic/common/lib/Yii/web/CController.php(1146): CAccessControlFilter->filter()

11 promusic/common/lib/Yii/web/filters/CInlineFilter.php(59): SiteController->filterAccessControl()

12 promusic/common/lib/Yii/web/filters/CFilterChain.php(131): CInlineFilter->filter()

13 promusic/common/lib/Yii/web/CController.php(292): CFilterChain->run()

14 promusic/common/lib/Yii/web/CController.php(266): SiteController->runActionWithFilters()

15 promusic/common/lib/Yii/web/CWebApplication.php(283): SiteController->run()

16 promusic/common/components/WebApplication.php(33): WebApplication->runController()

17 promusic/common/lib/Yii/web/CWebApplication.php(142): WebApplication->runController()

18 promusic/common/lib/Yii/base/CApplication.php(162): WebApplication->processRequest()

19 promusic/backend/www/index.php(43): WebApplication->run()

1 request

624 B

253ms

#12828 report it
sanguina at 2013/04/15 02:06am
erroneous markup pf redactor

@Callum Rexter - I have had exact similar markup problem. This seems to be wrong with redactor.

I had to change to other options after having a lot of trouble with erroneous markup pf redactor.

#12826 report it
Callum Rexter at 2013/04/14 11:46am
Extra markup from the editor

I have installed this extension easily enough but when I use it I seem to be left with extra markup in my source.

Fore example when I tried to create a simple paragraph to test it out the markup was this:

<p></p><p><span style="line-height:1.45em;">Test paragraph</span></p><p></p>

I can't seem to find out why it does this, has anyone else had this?

#12259 report it
Clem at 2013/03/10 09:10am
Multiple languages at once

If you want to have various languages at once on your page, there is many steps (v 8.2.2 now).

In each language file,

Replace var RELANG = {}; by

if (typeof RELANG === 'undefined'){
    var RELANG = {};
}

I add no translation for image upload, so i edited the redactor.js script line 3251, when is called dragupload function, add param

lang: this.opts.lang

Next, line 4031 edit the construct function and add at the begenning

if (typeof options !== 'undefined' && typeof options.lang !== 'undefined' && options.lang !== 'en' && typeof RELANG[options.lang] !== 'undefined')
        {
            RLANG = RELANG[options.lang];
        }

That's all.

#11809 report it
mbala at 2013/02/05 05:47am
Nice

Nice one to handle

#11427 report it
__construct() at 2013/01/13 08:29pm
Re: Original Redactor plugin is no more under public domain

@jacmoe Good news, thank you.

#11426 report it
jacmoe at 2013/01/13 08:10pm
Re: Original Redactor plugin is no more under public domain

Since Yii has purchased an OEM license, we are all good, as long as we're using Redactor in combination with the Yii framework.

#11424 report it
__construct() at 2013/01/13 07:31pm
Original Redactor plugin is no more under public domain

Text from official form site FAQ:

Can I use Redactor in my project, which is published under GPL, MIT, BSD, or other open-source/copyleft license?

Yes, go ahead! You just need to purchase the OEM license. No additional fees will be applied and there are no special terms or conditions, until Redactor is properly "linked" in your software.

However, keep in mind that Redactor is not an open-source product. It is proprietary commercial copyrighted software and we do not allow it's distribution under any open-source licenses. Think about Redactor as if it was a paid proprietary extension for your project.

imperavi.com/redactor/faq/

Looks like we can't use it without puscashing licence.

#11056 report it
janisto at 2012/12/12 01:46pm
Default actions

I just committed new default actions for image and file upload. What do you think?

https://github.com/janisto/yii-redactor

#10975 report it
janisto at 2012/12/07 10:25am
RE: Difference with yii-redactorjs-wysiwyg-widget

This one works with Redactor 8.0 or above.

#10788 report it
ema at 2012/11/23 12:44pm
Difference with yii-redactorjs-wysiwyg-widget

What's the difference with http://www.yiiframework.com/extension/yii-redactorjs-wysiwyg-widget ? Could you make a note at the beginning to explain why a different project? Thanks a lot! E.

#9892 report it
Roman Solomatin at 2012/09/19 09:36am
Thanks

This editor seems very nice. Thanks!

Leave a comment

Please to leave your comment.

Create extension