README

Renders a TinyMCE WYSIWYG text editor widget with the support ElFinder Extension for Yii 2

Supplements

A plugin TinyMCE-FontAwesome-Plugin that lets you insert FontAwesome icons via TinyMCE.

A plugin Typografy that lets implement JavaScript typographer in TinyMCE.

Installation

The preferred way to install this extension is through composer.

Either run

composer require dominus77/yii2-tinymce-widget

or add

"dominus77/yii2-tinymce-widget": "^2.1"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

<?= $form->field($model, 'text')->widget(\dominus77\tinymce\src\TinyMce::class, [    
    'options' => [
        'rows' => 6,
        'placeholder' => true,
    ], 
    'language' => 'ru',
    'clientOptions' => [
        'menubar' => true,
        'statusbar' => true,        
        'theme' => 'modern',
        'skin' => 'lightgray-gradient', //charcoal, tundora, lightgray-gradient, lightgray
        'plugins' => [
            'typograf advlist autolink lists link image charmap print preview hr anchor pagebreak placeholder',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc noneditable',
        ],
        'contextmenu' => 'typograf | link image inserttable | cell row column deletetable',
        'noneditable_noneditable_class' => 'fa',
        'extended_valid_elements' => 'span[class|style]',
        'toolbar1' => 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        'toolbar2' => 'print preview media | forecolor backcolor emoticons | codesample | typograf',
        'image_advtab' => true,
        'templates' => [
            [
                'title' => 'Test template 1',
                'content' => 'Test 1',
            ],
            [
                'title' => 'Test template 2',
                'content' => 'Test 2',
            ]
        ],
        'content_css' => [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css',            
        ]
    ]
]) ?>

Plugin Typograf

Helps to automatically fill in inextricable spaces, correct minor typos, bring quotation marks to the correct form, replace hyphens with dashes in the right places, and much more.

<?= $form->field($model, 'text')->widget(\dominus77\tinymce\src\TinyMce::class, [
    //...
    'clientOptions' => [
        // on plugin
        'plugins' => [
            'typograf',
            //...
        ],
        // adding a button to a toolbar
        'toolbar1' => 'typograf',
        // adding a item to a context menu
        'contextmenu' => 'typograf | link image inserttable | cell row column deletetable',
        // advanced plugin settings        
        'typograf' => [
            'locale' => ['ru', 'en-US'],
            // HTML entities
            'htmlEntity' => [
                //'type' => 'name',
                //'onlyInvisible' => true
            ],
            // Enabling Rules
            'enableRule' => [
                //'ru/money/ruble',
                //'ru/money/*',
                //'ru/symbols/NN',
                //'ru/optalign/*'
            ],
            // Disabling Rules
            'disableRule' => [
                //'ru/money/ruble',
                //'ru/money/*',
                //'ru/symbols/NN'
            ],
            // Change settings for rules
            // Rule name, setting name, value
            'setSetting' => [
                // Continuous space before the last word in a sentence, not more than 5 characters
                ['common/nbsp/beforeShortLastWord', 'lengthLastWord', 5],
                // Nested quotes are also "Christmas trees" for Russian typography
                ['common/punctuation/quote', 'ru', ['left' => '«', 'right' => '»', 'removeDuplicateQuotes' => true]],
                // Non-breaking space after a short word, no more than 3 characters
                ['common/nbsp/afterShortWord', 'lengthShortWord', 5]
            ],
            // Add a simple rule
            // Typographic Smiley
            'addRule' => [
                [
                    'name' => 'common/other/typographicSmiley',
                    'handler' => new yii\web\JsExpression("
                        function (text) {                                            
                            return text.replace(/:-\)/g, ':—)');
                        }
                    ")
                ]
            ],
            // Turn off typography in sections of text
            'addSafeTag' => [
                // Disable typography inside the <no-typography> tag
                ['<no-typography>', '</no-typography>'],
                // Disable typing inside control structures of some template engine.
                ['\\{\\{', '\\}\\}'], // {{...}}
                ['\\[\\[', '\\]\\]'], // [[...]]
                // Disable typography inside PHP code
                ['<\\?php', '\\?>']
            ]
        ],
        //...
    ]
]) ?>

See more information on JavaScript typographer

Plugin fontawesome

The plugin is supported by FontAwesome version 4.7. In this version of the widget, due to possible conflicts with the new version, the dependency was removed. But the support of the plug-in itself remained. To turn it on, you need to install FontAwesome version 4.7

composer require fortawesome/font-awesome "^4.7"

or add

"fortawesome/font-awesome": "^4.7"

The connection might look like this:

use dominus77\tinymce\src\assets\FontAwesomeAsset;

$fontAwesome = FontAwesomeAsset::register($this);

//...
'clientOptions' => [
    //...
    'plugins' => [            
        "fontawesome", // add plugin
        // other plugins
    ],        
    'toolbar' => "fontawesome", // add button
    //...
    'content_css' => [
        // other css
        $fontAwesome->baseUrl . '/' . $fontAwesome->css[0], // Adding icons to the content area
    ]
]

ElFinder file manager

Install mihaildev/yii2-elfinder extension.

Either run

composer require --prefer-dist mihaildev/yii2-elfinder "^1.3"

or add

"mihaildev/yii2-elfinder": "^1.3"

Configure elFinder (more info here)

'controllerMap' => [
    'elfinder' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'], //Global file manager access @ - for authorized , ? - for guests , to open to all ['@', '?']
        'disabledCommands' => ['netmount'], //disabling unnecessary commands https://github.com/Studio-42/elFinder/wiki/Client-configuration-options#commands
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
            [
                'class' => 'mihaildev\elfinder\volume\UserPath',
                'path'  => 'files/user_{id}',
                'name'  => 'My Documents'
            ],
            [
                'path' => 'files/some',
                'name' => ['category' => 'my','message' => 'Some Name'] //перевод Yii::t($category, $message)
            ],
            [
                'path'   => 'files/some',
                'name'   => ['category' => 'my','message' => 'Some Name'], // Yii::t($category, $message)
                'access' => ['read' => '*', 'write' => 'UserFilesAccess']  // * - for all, otherwise the access check in this example can be seen by all users with rights only UserFilesAccess
            ]
        ],
        'watermark' => [
             'source'         => __DIR__.'/logo.png', // Path to Water mark image
             'marginRight'    => 5,          // Margin right pixel
             'marginBottom'   => 5,          // Margin bottom pixel
             'quality'        => 95,         // JPEG image save quality
             'transparency'   => 70,         // Water mark image transparency ( other than PNG )
             'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
             'targetMinPixel' => 200         // Target image minimum pixel size
        ]
    ]
]

Then select file manager provider in the widget:

$form->field($model, 'text')->widget(\dominus77\tinymce\src\TinyMce::class, [    
    'clientOptions' => [
        //...
        /** @see https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types */
        //'file_picker_types' => 'file image media',        
    ],
    'fileManager' => [
        'class' => \dominus77\tinymce\src\components\MihaildevElFinder::class,
    ],    
    //...
])

You can customize some window (width and height) and manager (language, filter, path and multiple) properties. If you want to use different access, watermark and roots setting just prepare controllers:

'controllerMap' => [
    'elf1' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'],
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
        ],
        'watermark' => [
            'source'         => __DIR__.'/logo.png', // Path to Water mark image
            'marginRight'    => 5,          // Margin right pixel
            'marginBottom'   => 5,          // Margin bottom pixel
            'quality'        => 95,         // JPEG image save quality
            'transparency'   => 70,         // Water mark image transparency ( other than PNG )
            'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
            'targetMinPixel' => 200         // Target image minimum pixel size            
        ],
    ],
    'elf2' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['*'],
        'roots' => [
            [                
                'path' => 'files/some1',
                'name' => ['category' => 'my','message' => 'Some Name']
            ],
            [                
                'path' => 'files/some2',
                'name' => ['category' => 'my','message' => 'Some Name'],
                'access' => ['read' => '*', 'write' => 'UserFilesAccess']
            ],
        ],
    ],
]

Connection in the module:

namespace modules\example;

class Module extends \yii\base\Module
{
    //...
    public function init()
    {
        parent::init();
        $this->controllerMap = [
            'elfinder' => [
                'class' => 'mihaildev\elfinder\Controller',
                'access' => ['@'],
                'disabledCommands' => ['netmount'],
                'roots' => [
                    [
                        'baseUrl'=>'@web',
                        'basePath'=>'@webroot',
                        'path' => 'files/global',
                        'name' => 'Global'
                    ],
                ],
                'watermark' => [
                    'source'         => __DIR__.'/logo.png', // Path to Water mark image
                    'marginRight'    => 5,          // Margin right pixel
                    'marginBottom'   => 5,          // Margin bottom pixel
                    'quality'        => 95,         // JPEG image save quality
                    'transparency'   => 70,         // Water mark image transparency ( other than PNG )
                    'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
                    'targetMinPixel' => 200         // Target image minimum pixel size            
                ],
            ]
        ];
    }
    //...
}

in module view:

$form->field($model, 'text')->widget(\dominus77\tinymce\src\TinyMce::class, [    
    'clientOptions' => [
        //...
        /** @see https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types */
        //'file_picker_types' => 'file image media',
    ],
    'fileManager' => [
        'class' => \dominus77\tinymce\src\components\MihaildevElFinder::class,
        'controller' => 'elfinder',        
        'title' => 'My File Manager',
        'width' => 900,
        'height' => 600,
        'resizable' => 'yes',
    ],    
    //...
]);

Further Information

Please, check the TinyMCE site and ElFinder Extension documentation for further information about its configuration options.

License

The MIT License (MIT). Please see License File for more information.