Redactor Widget ¶
>Info: Redactor is OEM licensed for Yii and you can use it for free with the framework. See official widget.
- Examples
- Documentation
- Download Redactor
- Download languages
-
Requirements ¶
- Redactor 8.0 or above
- Yii 1.1.10 or above (Redactor requires jQuery 1.7.1)
Installation ¶
- Download yii-redactor or Clone the files
- Extract into the widgets or extensions folder
- Download Redactor and language files if needed
- 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.
Thanks
This editor seems very nice. Thanks!
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.
RE: Difference with yii-redactorjs-wysiwyg-widget
This one works with Redactor 8.0 or above.
Default actions
I just committed new default actions for image and file upload. What do you think?
https://github.com/janisto/yii-redactor
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.
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.
Re: Original Redactor plugin is no more under public domain
@jacmoe
Good news, thank you.
Nice
Nice one to handle
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
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.
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:
[html] <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?
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.
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)
1 request
624 B
253ms
Plugins
Hi! Is there any easy way to use redactor's plugin like fontsize?
@qsrtlwe
Check out: https://github.com/yiiext/imperavi-redactor-widget
You can use the same default actions with that widget, too.
Redactor 9
How do we upgrade to redactor 9?
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')) ), ));
Step 4 question
It says on step number 4)
"Extract Redactor files"
Where should we "extract them"?
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.
Use official version
use official version here
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 :)
Disable the option to upload images and videos
You can disable the option to upload images and videos ??
remove html markup
@Callum Rexter You can remove the extra markup like this:
in your _view use CHtml::decode instead of CHtml::encode:
<?php echo CHtml::decode($data->content); ?>
OR
<div class="content"> <?php $this->beginWidget('CMarkdown', array('purifyOutput'=>true)); echo $data->content; $this->endWidget(); ?> </div>
Plugins not registered
I have found a problem with the plugins (e.g. fontcolor). I configure redactor as follows:
$this->widget('ImperaviRedactorWidget', array( ... 'options' => array( ... 'plugins' => array('fontcolor'), ... ), ));
The problem is that redactor.js is not aware of the plugin files in the assets directory. The solution I have found is to modify ImperaviRedactorWidget.php replacing lines 121 to 125 with:
foreach ($this->options['plugins'] as $id) { $clientScript->registerScriptFile($this->getAssetsUrl() . '/plugins/' . $id . '/' . $id . '.js', CClientScript::POS_END); }
The _plugins array as well as the corresponding setter and getter methods are unnecessary and can be removed.
If anybody has a better solution, I would be happy to see it!
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.