froala/yii2-froala-editor

基于HTML5技术的美观WYSIWYG HTML文本编辑器。支持跨浏览器,移动端,高性能,并具备Retina Ready的现代设计。

安装次数: 186 669

依赖者: 6

建议者: 1

安全: 0

星标: 103

关注者: 16

分支: 35

公开问题: 8

类型:yii2-extension


README

Packagist Packagist

Yii 2小部件,用于Froala Wysiwyg编辑器。

安装

安装此扩展的首选方式是通过composer

运行以下命令:

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

或者将以下内容添加到你的composer.json文件的require部分:

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

使用方法

扩展安装完成后,只需在代码中使用即可

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

或者与模型一起使用

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

添加Font-awesome cdn以使用Font-awesome插件

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

上传示例

使用基本的Yii模板,在/web/目录下创建一个新的文件夹,命名为uploads。

对于控制器

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;
}

对于模型

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']
        ];
    }
}

对于视图

<?= \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']
]); ?>

有关使用方法的详细信息,请参阅文档

自定义按钮示例

自定义按钮可以在任何你想要的JS文件中定义,例如在这个示例中在/basic/assets/文件夹中。

在视图中

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

在/basic/assets/alert.js中

FroalaEditor.DefineIcon('alert', {NAME: 'info'});
FroalaEditor.RegisterCommand('alert', {
        title: 'Hello',
        focus: false,
        undo: false,
        refreshAfterCallback: false,
        callback: function () {
            alert('Hello!');
        }
    }
);

有关更多详细信息,请访问自定义按钮

许可证

此软件包可在MIT许可证下使用。然而,Froala编辑器需要从https://www.froala.com/wysiwyg-editor/pricing购买许可证。