diff --git a/README.md b/README.md index e7827ae..2cb7a62 100644 --- a/README.md +++ b/README.md @@ -7,18 +7,27 @@ ## Installation -The preferred way to install this extension is through [composer](http://getcomposer.org/download/). +The preferred way to install this extension is through [composer](http://getcomposer.org/download/). yii2-froala editor depends on Froala PHP SDK +To use and Install the editor, one must install PHP SDK also. Either run ``` php composer.phar require --prefer-dist froala/yii2-froala-editor +php composer.phar require --prefer-dist froala/wysiwyg-editor-php-sdk +php composer.phar require --prefer-dist bower-asset/froala-wysiwyg-editor +php composer.phar require --prefer-dist froala/wysiwyg-editor + ``` or add ``` -"froala/yii2-froala-editor": "^2.6.0" +"froala/yii2-froala-editor": "^2.6.0", +"froala/wysiwyg-editor-php-sdk" : "*", +"bower-asset/froala-wysiwyg-editor": "^2.6.0" +"froala/wysiwyg-editor": "^2.6.5" + ``` to the require section of your `composer.json` file. @@ -29,7 +38,7 @@ to the require section of your `composer.json` file. Once the extension is installed, simply use it in your code by : ```php - 'content', 'options' => [ // html attributes @@ -46,7 +55,7 @@ Once the extension is installed, simply use it in your code by : or use with a model: ```php - $model, 'attribute' => 'content', 'options' => [ @@ -63,68 +72,22 @@ or use with a model: ## Upload example -Using the basic Yii template make a new folder under /web/ called uploads. - -For controler: - -```php -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: +Using the Froala PHP SDK with Froala Editor widget, the first step would be to add the configuration in web.php config file, make an entry for Froala Module +in the Config Array. ```php -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'] - ]; - } -} +'modules' => [ + 'froala' => [ + 'class' => '\Froala\Editor\Module', + 'uploadFolder' => '/uploads/' + ] + ], ``` -For the view: +Make sure you have a folder called "uploads" in your web root directory,Now to use the Froala Widget on any view just use the following code in the view: ```php - 'body', 'clientOptions' => [ 'toolbarInline'=> false, @@ -132,8 +95,6 @@ For the view: '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'] ]); ?> diff --git a/composer.json b/composer.json index e13cb1a..d1bb7fe 100644 --- a/composer.json +++ b/composer.json @@ -29,8 +29,10 @@ ], "require": { "yiisoft/yii2": "^2.0", - "froala/wysiwyg-editor": "^2.6.0", - "rmrevin/yii2-fontawesome": "^2.0" + "rmrevin/yii2-fontawesome": "^2.0", + "froala/wysiwyg-editor-php-sdk": "*", + "bower-asset/froala-wysiwyg-editor": "^2.6.0", + "froala/wysiwyg-editor": "^2.6.5" }, "autoload": { "psr-4": { diff --git a/src/FroalaEditorAsset.php b/src/FroalaEditorAsset.php index 6a75f18..12a5540 100644 --- a/src/FroalaEditorAsset.php +++ b/src/FroalaEditorAsset.php @@ -1,6 +1,6 @@ clientOptions['theme']) ? $this->clientOptions['theme'] : 'default'; if ($themeType != 'default') { - $view->registerCssFile("{$asset->baseUrl}/css/themes/{$themeType}.css", ['depends' => '\froala\froalaeditor\FroalaEditorAsset']); + $view->registerCssFile("{$asset->baseUrl}/css/themes/{$themeType}.css", ['depends' => '\Froala\Editor\FroalaEditorAsset']); } //language $langType = isset($this->clientOptions['language']) ? $this->clientOptions['language'] : 'en_gb'; if ($langType != 'es_gb') { - $view->registerJsFile("{$asset->baseUrl}/js/languages/{$langType}.js", ['depends' => '\froala\froalaeditor\FroalaEditorAsset']); + $view->registerJsFile("{$asset->baseUrl}/js/languages/{$langType}.js", ['depends' => '\Froala\Editor\FroalaEditorAsset']); } $id = $this->options['id']; @@ -110,4 +110,15 @@ public function registerClientScript() $view->registerJs("\$('#$id').froalaEditor($jsOptions);"); } + + public static function widget($config = []) + { + if (!isset($config['clientOptions']['imageUploadURL'])) + { + $config['clientOptions']['imageUploadURL'] = \yii\helpers\Url::to(['froala/default/upload']); + $config['clientOptions']['imageUploadParam'] = 'file'; + } + + return parent::widget($config); + } } diff --git a/src/Module.php b/src/Module.php new file mode 100755 index 0000000..84ff1e4 --- /dev/null +++ b/src/Module.php @@ -0,0 +1,13 @@ +module->uploadFolder; + + $response = \FroalaEditor_Image::upload($uploadFolder); + echo stripslashes(json_encode($response)); + } + catch (Exception $e) { + http_response_code(404); + } + } +}