README

Yii2 Summernote 小部件。基于 Bootstrap 的超简单 WYSIWYG 编辑器

安装

Composer

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

运行以下命令之一

php composer.phar require marqu3s/yii2-summernote "dev-master"

或者

"marqu3s/yii2-summernote": "dev-master"

将以下内容添加到您的 composer.json 文件的 require 部分

用法

<?php
use marqu3s\summernote\Summernote;

/** @var $form \yii\widgets\ActiveForm */
/** @var $model \yii\base\Model */

echo $form->field($model, 'content')->widget(Summernote::class, [
    'clientOptions' => [
        // ...
    ]
]);

或者

<?php
use marqu3s\summernote\Summernote;

echo Summernote::widget([
    'name' => 'editor_id',
    'clientOptions' => [
        // ...
    ]
]);

Bootstrap 版本

默认情况下，\marqu3s\summernote\SummernoteAsset 加载与 Bootstrap 4 兼容的 Summernote 版本。如果您需要与 Bootstrap 3 兼容的版本，请按以下方式配置您的应用程序

'assetManager' => [
    'bundles' => [
        'marqu3s\summernote\SummernoteAsset'   => [
            'css' => [
                'summernote.css'
            ],
            'js' => [
                'summernote.js'
            ], 
            'depends' => [
                'yii\bootstrap\BootstrapPluginAsset',
            ]
        ]
    ]
]

如果您需要与 Bootstrap 5 兼容的版本，配置方式如下

'assetManager' => [
    'bundles' => [
        'marqu3s\summernote\SummernoteAsset'   => [
            'css' => [
                'summernote-bs5.css'
            ],
            'js' => [
                'summernote-bs5.js'
            ], 
            'depends' => [
                'yii\bootstrap\BootstrapPluginAsset',
            ]
        ]
    ]
]

直接上传到 Amazon S3

要将编辑器中插入的图像上传到 S3，您必须配置一些选项。

<?php
use marqu3s\summernote\Summernote;

/** @var $model \yii\base\Model */

echo Summernote::widget([
    'uploadToS3' => true,
    'signEndpoint' => '/<controller>/sign-aws-request?v4=true',
    'bucket' => 'S3-BUCKET-NAME',
    //'folder' => '',
    'folder' => new \yii\web\JsExpression("function() { return $('#aFormFieldId').val() + '/'; }"),
    'filenamePrefix' => "'{$model->id}-'",
    'maxFileSize' => 1024000,
    'expiration' => gmdate('Y-m-d\TH:i:s.000\Z', strtotime('+5 minutes')),
    'clientOptions' => [
        ...
    ]
]);

然后，在您的控制器中，配置一个操作作为 signEndpoint 以签署将要上传图像的 POST 请求。

<?php
public function actions()
{
   return [
      'sign-aws-request' => [
          'class' => 'marqu3s\summernote\actions\SignAwsRequestAction',
          'clientPrivateKey' => 'AWS-KEY',
          'clientPrivateSecret' => 'AWS-SECRET',
          'expectedBucketName' => 'BUCKET-NAME',
          'expectedHostName' => 'BUCKET-NAME',
          'expectedMaxSize' => 'MAX-FILE-SIZE'
      ]
   ];
}

参见 clientOptions

原始作者

Aleksandr Zelenin，电子邮件：aleksandr@zelenin.me

更新者

João Marques，电子邮件：joao@jjmf.com