Giter Site home page Giter Site logo

yii2-tinymce's Introduction

TinyMCE integration for Yii2

Yii2 extension to simplify TinyMCE WYSIWYG editor usage in your application.

Provides:

  • widget;
  • compressor action;
  • integration with file managers like elFinder;
  • integration with spelling services like Yandex.

Fork of another extension with some additional features:

  • TinyMCE gone to npm package to always have the latest version;
  • Added integration with great elFinder extension;
  • (TODO) Icon to insert many images at once;
  • Few bugs resolved. It's all working now.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist as-milano/yii2-tinymce "*"

or add

"as-milano/yii2-tinymce": "*"

to the require section of your composer.json file.

Usage

Widget basic usage

$form->field($model, 'content')->widget(\milano\tinymce\TinyMce::className())

Scripts compressor

This can be used to optimize widget loading time.

At fist setup controller map:

'controllerMap' => [
    'tinyMce' => [
        'class' => 'milano\tinymce\TinyMceController',
    ]
],

Next add route to configured action to widget options:

$form->field($model, 'content')->widget(\milano\tinymce\TinyMce::className(), [
    'compressorRoute' => 'tinyMce/tinyMceCompressor'
])

ElFinder file manager

Install mihaildev/yii2-elfinder extension. You can just include

"mihaildev/yii2-elfinder": "*"

to the require section of your composer.json file.

Configure elFinder (more info here).:

'controllerMap' => [
    'elfinder' => [
        'class' => 'mihaildev\elfinder\Controller',
        'access' => ['@'],
        'disabledCommands' => ['netmount'],
        'roots' => [
            [
                'baseUrl'=>'@web',
                'basePath'=>'@webroot',
                'path' => 'files/global',
                'name' => 'Global'
            ],
        ],
        'watermark' => [
                'source'         => __DIR__.'/logo.png',
                 'marginRight'    => 5,
                 'marginBottom'   => 5,
                 'quality'        => 95,
                 'transparency'   => 70,
                 'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP,
                 'targetMinPixel' => 200
        ]
    ]
],

Then select file manager provider in the widget:

$form->field($model, 'content')->widget(\milano\tinymce\TinyMce::className(), [
    'fileManager' => [
        'class' => \milano\tinymce\fm\MihaildevElFinder::className()
    ],
])

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',
                 'marginRight'    => 5,
                 'marginBottom'   => 5,
                 'quality'        => 95,
                 'transparency'   => 70,
                 'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP,
                 'targetMinPixel' => 200
        ]
    ],
    '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']
            ]
        ]
    ]
],

and then point to required controller in the widget:

$form->field($model, 'content2')->widget(\milano\tinymce\TinyMce::className(), [
    'fileManager' => [
        'class' => \milano\tinymce\fm\MihaildevElFinder::className(),
        'controller' => 'elf2'
    ]
])

Any file manager

You can write your own file manager provider. Just inherit it from \milano\tinymce\fm\FileManager class and realize getFileBrowserCallback and registerAsset functions.

Spellchecker

TinyMce has bundled plugin for spellchecking but it requires backed to work.

You can use Yandex spellchecker service.

$form->field($model, 'content')->widget(\milano\tinymce\TinyMce::className(), [
    'spellcheckerUrl' => 'http://speller.yandex.net/services/tinyspell'
])

More info about it here: http://api.yandex.ru/speller/doc/dg/tasks/how-to-spellcheck-tinymce.xml

Or you can build own spellcheking service using code provided by moxicode: http://www.tinymce.com/download/download.php

Combined features

<?= $form->field($model, 'content')->widget(\milano\tinymce\TinyMce::className(), [
    'compressorRoute' => 'site/tinyMceCompressor',
    'fileManager' => [
        'class' => \milano\tinymce\fm\MihaildevElFinder::className()
    ],
    'spellcheckerUrl'=>'http://speller.yandex.net/services/tinyspell',
    'options' => ['rows' => 6]
]) ?>

yii2-tinymce's People

Contributors

necroman avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

wolfguarder

yii2-tinymce's Issues

Cannot install through composer

Composer is asking me a username to access the gitlab repository:

Could not fetch https://gitlab.com/api/v3/projects/NecroMan%2Fyii2-tinymce/repository/archive.zip?sha=d16e0360a4b0dc9b5e9e9a7264fad634b7c20213, enter your gitlab.com credentials to access private repos
A token will be created and stored in "/home/user/.config/composer/auth.json", your password will never be stored
To revoke access to this token you can visit gitlab.com/profile/applications
Username:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.