roxymce file manager using in yii2

Question

I am a newbie in yii2. I want to use roxymce file manager in my yii2 project. I followed these docs for use in yii but when using this section, I get Undefined variable: form error and when use ActiveForm::begin() in I get Getting unknown property: navatech\roxymce\models\UploadForm::thumb error. I want to know when I must use that's controllers in my project. This code for my fileupload view:

<?php

use yii\widgets\ActiveForm;
use yii\web\View;
use yii\helpers\Url;


$this->title = Yii::t('app', 'Upload Course Files');
$this->params['breadcrumbs'][] = ['label' => Yii::t('app', 'Presented Courses'), 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="row">
    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data'], 'action' => '#']); ?>
    <?php $form->field($model, 'file')->fileInput(['id' => 'fieldID1'])->label(false) ?>
    <a href="<?=Url::to([
        '/roxymce/default',
        'type' => 'media',
        'input' => 'fieldID1',
        'dialog' => 'iframe',
    ]) ?>" id="fileup" class="fancybox" ><i class="fa fa-upload"></i></a>
    <?php ActiveForm::end();?>


<?php
$this->registerJsFile('@web/js/jquery.fancybox.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerCssFile('@web/css/jquery.fancybox.min.css', ['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJs(' 
$("#fileup").fancybox({  type: "iframe"});  
', View::POS_END);
?>

And this code is for the controller of this view(fileupload):

public function actionUploadfile()
{
    $model = new UploadForm();
    return $this->render('uploadfile',['model'=>$model]);
}

And this my main config file in backend directory:

'modules' => [

        'roxymce' => [
            'class' => 'navatech\roxymce\Module',
            'uploadFolder' => '@app/web/uploads/images',
            'uploadUrl' => '/uploads/images',
        ],

    ],

I used yii2 advancd template. If anyone used this module, please hint me.

Answer 1

Simply becouse the variable $form is not defined if you use the code like int the example. In your view when you use the extension you need to use ActiveForm::begin() like this:

Simple example

<?php 

$form = ActiveForm::begin(['id' => 'roxymce-form']); 

echo $form->field($model, 'thumb')->textInput(['id' => 'fieldID'])->label(false); 

?>

<a href="<?= \yii\helpers\Url::to([
    '/roxymce/default',
    'type'   => 'image',
    'input'  => 'fieldID',
    'dialog' => 'fancybox',
]) ?>"><i class="fa fa-upload"></i></a>

<script>
    $("a").fancybox();
</script>

<?php ActiveForm::end(); ?>

[Edit]

It was pretty hard to run it but in the end I succeeded. I use basic template of Yii2. Start with install package with composer like in the guide. After this create the classes of assets bundles to publish javascript packages. My assets bundles are these and they are locate in applicationroot/assets folder:

assets/AppAsset.php

<?php 
namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
    public $jsOptions = [
        'position' => \yii\web\View::POS_HEAD,
    ];
}

assets/FancyBoxAsset.php

<?php
namespace app\assets;

use yii\web\AssetBundle;

class FancyBoxAsset extends AssetBundle
{
    public $sourcePath = '@bower/fancybox/source';

    public $js = [
        'jquery.fancybox.pack.js',
    ];
}

assets/FontAwesomeAsset.php

<?php
namespace app\assets;

use yii\web\AssetBundle;

class FontAwesomeAsset extends AssetBundle
{
    public $sourcePath = '@bower/fontawesome';
    public $css = [
        'css/font-awesome.min.css',
    ];
}

assets/LazyLoadAsset.php

<?php
namespace app\assets;

use yii\web\AssetBundle;

class LazyLoadAsset extends AssetBundle
{
    public $sourcePath = '@bower/jquery.lazyload';
}

assets/PatternflyTreeviewAsset.php

<?php
namespace app\assets;

use yii\web\AssetBundle;

class PatternflyTreeviewAsset extends AssetBundle
{
    public $sourcePath = '@bower/patternfly-bootstrap-treeview/dist';
    public $css = [
        'bootstrap-treeview.css',
    ];
    public $js = [
        'bootstrap-treeview.js',
    ];
}

assets/TinymceAsset.php

<?php

namespace app\assets;

use yii\web\AssetBundle;

class TinymceAsset extends AssetBundle
{
    public $sourcePath = '@bower/tinymce';
    public $jsOptions = [
        'position' => \yii\web\View::POS_HEAD,
    ];
}

Now you must to add in your config file this lines of code:

config/web.php

return [
    'id' => 'basic',
    'basePath' => dirname(__DIR__),
    ...
    'modules' => [
        'roxymce' => [
            'class' => 'navatech\roxymce\Module',
            'uploadFolder' => '@app/web/uploads/images',
            'uploadUrl' => '../uploads/images',
        ],
    ],
    'urlManager' => [
        'enablePrettyUrl' => true,
        'showScriptName' => false,
        'rules' => [
            '' => 'site/index',
            '<controller:\w+>/<action:\w+>/' => '<controller>/<action>',
            '<module:\w+>/<controller:\w+>/<action:\w+>/' => '<module>/<controller>/<action>',
        ],
    ]
    ...
];

After you need to configure your application for work in a clean URL context. Follow this for more information about: Enable clean URL in Yii2

Now you can finally fully use the plugin in all its contexts. There are two methods for use it:

1. Integrated with TinyMce

views/site/tinymceIntegrated.php

<?php
use \app\assets;

assets\FontAwesomeAsset::register($this);
assets\LazyLoadAsset::register($this);
assets\FancyBoxAsset::register($this);
assets\PatternflyTreeviewAsset::register($this);
assets\TinymceAsset::register($this);

// Include ActiveRecord Model
echo \navatech\roxymce\widgets\RoxyMceWidget::widget([
    'model'     => app\models\YourModel::findOne(1),
    'attribute' => 'content',
]);

// Sample HTML without ActiveRecord Model
echo \navatech\roxymce\widgets\RoxyMceWidget::widget([
    'name' => 'Post[content]',
]);

2. Without TinyMce

views/site/tinymceWithout.php

<?php
use yii\helpers\Html;
use \app\assets;

assets\FontAwesomeAsset::register($this);
assets\LazyLoadAsset::register($this);
assets\FancyBoxAsset::register($this);
assets\PatternflyTreeviewAsset::register($this);
//assets\TinymceAsset::register($this);

$js = <<<JS
    $("a").fancybox();
JS;
$this->registerJs($js, \yii\web\View::POS_READY, 'upload-handler');
?>       
<a href="<?= \yii\helpers\Url::to([
    '/roxymce/default',
    'type' => 'image',
    'dialog' => 'fancybox',
]) ?>"><i class="fa fa-upload"></i></a>

With this configuration for me work.