froala/yii2-froala-editor A beautiful jQuery WYSIWYG HTML text editor based on HTML5 technology. Cross browser, with mobile support, high performance and

Yii Framework Froala WYSIWYG HTML Editor

  1. Installation
  2. Usage
  3. Upload example
  4. Custom Buttons Example
  5. License

Packagist Packagist

>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": "^2.6.0"

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

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.

0 0
1 follower
19 152 downloads
Yii Version: 2.0
License: MIT
Category: User Interface
Tags: Editor
Developed by: dungphanxuan999
Created on: Mar 26, 2018
Last updated: 6 months ago
Packagist Profile
Github Repository

Related Extensions