Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

yii

Yii Framework Froala Editor

Installation

The preferred way to install this extension is through composer.

To install it run:

php composer.phar require --prefer-dist froala/yii2-froala-editor
  

Alternatively, you can add it to the require section of composer.json.

"froala/yii2-froala-editor": "^2.6.0"
  

Usage

Once the extension is installed, you can use it in your code:

<?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 ...
      ]
  ]); ?>
  

You can also useit 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 ...
      ]
  ]); ?>
  

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 refer to Custom Buttons

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1865361626" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_2136698459" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_234825131" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>