README

A Chart.js plugin for Imperavi Redactor WYSIWYG editor. This plugin enables creating and inserting Bar, Line and Radar type charts to the content edited with Redactor.

Prerequisites

This plugin works only on Imperavi Redactor WYSIWYG editor. You may use Redactor by directly loading redactor.js and redactor.css or useing some Yii2 extension. There are few yii2 extensions developed for integrating Redactor with your Yii2 project. This plugin does not depend on any specific extension. Theoretically it should work with all of those extensions. Here is a list of yii2-redactor extension I could find. Its up to your choice to use one suits for you.

Please find the usage instructions for each of the above extensions below under Usage section.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist nterms/yii2-redactor-charts "*"

or add

"nterms/yii2-redactor-charts": "*"

to the require section of your composer.json file.

Usage

\nterms\redactor\charts\ChartsRedactorPluginAsset::register($this);

Now enable the charts plugin when you initialize Redactor. In JavaScript:

$('#textarea').redactor({
    plugins: ['charts'],
});

Use with asofter/yii2-imperavi-redactor - Tested

yii\imperavi\Widget::widget([
    'options' => [
        'lang' => 'ru',
    ],
    'plugins' => [
        'charts',
    ]
]);

In case the plugin is not loaded. Check the order of the JavaScript files loded on your page. You can simply set the charts plugin related asset files load after the widget assets by adding following to your application configuration. On your web.php add:

'assetManager' => [
    'bundles' => [
        'nterms\redactor\charts\ChartsRedactorPluginAsset' => [
            'depends' => [
                'yii\imperavi\ImperaviRedactorAsset',
                'nterms\redactor\charts\ChartjsAsset',
            ],
        ],
    ],
],

This indicates that ChartsRedactorPluginAsset asset bundle depends on asset bundle of the widget, making it load assets in proper order. Make sure you add nterms\redactor\charts\ChartjsAsset to the list as this overwrites the original list.

Use with yiidoc/yii2-redactor - Not tested

<?= \yii\redactor\widgets\Redactor::widget([
    'model' => $model,
    'attribute' => 'body',
    'plugins' => ['charts'],
]) ?>

'assetManager' => [
    'bundles' => [
        'nterms\redactor\charts\ChartsRedactorPluginAsset' => [
            'depends' => [
                'yii\redactor\widgets\RedactorAsset',
                'nterms\redactor\charts\ChartjsAsset',
            ],
        ],
    ],
],

Use with vova07/yii2-imperavi-widget - Not tested

echo \vova07\imperavi\Widget::widget([
    'selector' => '#my-textarea-id',
    'settings' => [
        'lang' => 'ru',
        'minHeight' => 200,
        'plugins' => [
            'charts',
        ]
    ]
]);

'assetManager' => [
    'bundles' => [
        'nterms\redactor\charts\ChartsRedactorPluginAsset' => [
            'depends' => [
                'vova07\imperavi\Asset',
                'nterms\redactor\charts\ChartjsAsset',
            ],
        ],
    ],
],

Known Issues

This plugin is still at basic level and deliver only a limited set of features comes with Chart.js. And there are some missing UX features which I'm planing to develop soon. Here is list of known issues:

Does not support Pie and Doughnut graphs.
Generated charts are inserted into the Redactor in image format, hence once inserted charts cannot be edited.
Closing the modal box will clear the data entered so far.

License

MIT

nterms / yii2-redactor-charts

Maintainers

Details