froala / yii2-froala-editor
A beautiful WYSIWYG HTML text editor based on HTML5 technology. Cross browser, with mobile support, high performance and Retina Ready modern design.
Installs: 189 446
Dependents: 6
Suggesters: 1
Security: 0
Stars: 104
Watchers: 16
Forks: 35
Open Issues: 8
Type:yii2-extension
Requires
- froala/wysiwyg-editor: 4.3.0
- rmrevin/yii2-fontawesome: ^2.0 | ^3.0
- yiisoft/yii2: ^2.0
- dev-master
- 4.3.0
- 4.2.2
- 4.2.1
- 4.2.0
- 4.1.4
- 4.1.3
- 4.1.2
- 4.1.1
- 4.1.0
- 4.0.19
- 4.0.18
- 4.0.17
- 4.0.16
- 4.0.15
- 4.0.14
- 4.0.13
- 4.0.12
- 4.0.11
- 4.0.10
- 4.0.9
- 4.0.8
- 4.0.7
- 4.0.6
- 4.0.5
- 4.0.4
- 4.0.3
- 4.0.2
- 4.0.1
- 4.0.0
- 3.2.7
- 3.2.6
- 3.2.5
- 3.2.3
- 3.2.2
- 3.2.1
- v3.2.0.x-dev
- 3.2.0
- 3.1.0
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 3.0.0-rc.2
- 3.0.0-rc.1
- 3.0.0-beta.2
- 3.0.0-beta.1
- v2.x-dev
- 2.9.8
- 2.9.7
- 2.9.5
- 2.9.4
- 2.9.3
- 2.9.2
- 2.9.1
- 2.9.0
- 2.8.5
- 2.8.3
- 2.8.1
- 2.8.0
- 2.7.6
- 2.7.5
- 2.7.4
- 2.7.3
- 2.7.2
- 2.7.0
- 2.6.0
- 2.5.1
- 2.5.0
- 2.4.1
- 2.4.0
- 2.3.5
- 2.3.4
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.4
- 2.2.3
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.0
- 2.0.5
- 2.0.3
- 2.0.2
- 2.0.1
- dev-QA2911
This package is auto-updated.
Last update: 2024-10-31 09:35:13 UTC
README
Yii 2 widget for Froala Wysiwyg editor.
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist froala/yii2-froala-editor
or add
"froala/yii2-froala-editor": "^3.2.5"
to the require section of your composer.json
file.
Usage
Once the extension is installed, simply use it in your code by :
<?php echo froala\froalaeditor\FroalaEditorWidget::widget([ 'name' => 'content', 'options' => [ // html attributes 'id'=>'content' ], 'clientOptions' => [ 'toolbarInline'=> false, 'theme' =>'royal', //optional: dark, red, gray, royal 'language'=>'en_gb' // optional: ar, bs, cs, da, de, en_ca, en_gb, en_us ... ] ]); ?>
or use with a model:
<?php echo froala\froalaeditor\FroalaEditorWidget::widget([ 'model' => $model, 'attribute' => 'content', 'options' => [ // html attributes 'id'=>'content' ], 'clientOptions' => [ 'toolbarInline' => false, 'theme' => 'royal', //optional: dark, red, gray, royal 'language' => 'en_gb' // optional: ar, bs, cs, da, de, en_ca, en_gb, en_us ... ] ]); ?>
add Font-awesome cdn for font-awesome plugin
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Upload example
Using the basic Yii template make a new folder under /web/ called uploads.
For controler:
public function actionUpload() { $base_path = Yii::getAlias('@app'); $web_path = Yii::getAlias('@web'); $model = new UploadForm(); if (Yii::$app->request->isPost) { $model->file = UploadedFile::getInstanceByName('file'); if ($model->validate()) { $model->file->saveAs($base_path . '/web/uploads/' . $model->file->baseName . '.' . $model->file->extension); } } // Get file link $res = [ 'link' => $web_path . '/uploads/' . $model->file->baseName . '.' . $model->file->extension, ]; // Response data Yii::$app->response->format = Yii::$app->response->format = Response::FORMAT_JSON; return $res; }
For model:
namespace app\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is the model behind the upload form. */ class UploadForm extends Model { /** * @var UploadedFile|Null file attribute */ public $file; /** * @return array the validation rules. */ public function rules() { return [ [['file'], 'file'] ]; } }
For the view:
<?= \froala\froalaeditor\FroalaEditorWidget::widget([ 'name' => 'body', 'clientOptions' => [ 'toolbarInline'=> false, 'height' => 200, 'theme' => 'royal',//optional: dark, red, gray, royal 'language' => 'en_gb' , 'toolbarButtons' => ['fullscreen', 'bold', 'italic', 'underline', '|', 'paragraphFormat', 'insertImage'], 'imageUploadParam' => 'file', 'imageUploadURL' => \yii\helpers\Url::to(['site/upload/']) ], 'clientPlugins'=> ['fullscreen', 'paragraph_format', 'image'] ]); ?>
For full details on usage, see the documentation.
Custom Buttons Example
The custom Buttons can be defined in JS files anywhere you want, in this example in /basic/assets/ folder.
In the view:
<?php $this->registerJsFile('/basic/assets/alert.js', ['depends' => '\Froala\Editor\FroalaEditorAsset']);?> <?= \Froala\Editor\FroalaEditorWidget::widget([ 'name' => 'body', 'clientOptions' => [ 'toolbarInline' => false, 'height' => 200, 'theme' => 'royal',//optional: dark, red, gray, royal 'language' => 'en_gb', 'toolbarButtons' => ['fullscreen', 'bold', 'italic', 'underline', '|', 'paragraphFormat', 'insertImage', 'alert'] ], 'clientPlugins' => ['fullscreen', 'paragraph_format', 'image'] ]); ?>
In /basic/assets/alert.js:
FroalaEditor.DefineIcon('alert', {NAME: 'info'}); FroalaEditor.RegisterCommand('alert', { title: 'Hello', focus: false, undo: false, refreshAfterCallback: false, callback: function () { alert('Hello!'); } } );
For more details you can go to Custom Buttons
License
This package is available under MIT License. However, Froala editor requires purchasing a license from https://www.froala.com/wysiwyg-editor/pricing.