README

Imperavi Redactor WYSIWYG 编辑器的 Chart.js 插件。此插件允许在 Redactor 编辑的内容中创建和插入条形图、折线图和雷达图。

先决条件

此插件仅在 Imperavi Redactor WYSIWYG 编辑器上工作。您可以直接加载 redactor.js 和 redactor.css 使用 Redactor，或使用某些 Yii2 扩展。有一些 Yii2 扩展是为了将 Redactor 集成到您的 Yii2 项目中而开发的。此插件不依赖于任何特定扩展。理论上，它应该与所有这些扩展一起工作。以下是您可以找到的 yii2-redactor 扩展列表。您可以根据自己的选择使用适合您的扩展。

• asofter/yii2-imperavi-redactor - 已测试
• yiidoc/yii2-redactor
• vova07/yii2-imperavi-widget

请参阅以下 使用 部分的说明以了解每个上述扩展的用法。

安装

安装此扩展的最佳方式是通过 composer。

运行

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

或

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

将以下内容添加到您的 composer.json 文件的 require 部分中。

使用

在视图中注册资产包。如果您的视图文件中注册了资产包

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

现在在初始化 Redactor 时启用 charts 插件。在 JavaScript 中

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

与 asofter/yii2-imperavi-redactor - 已测试

如上所示注册 ChartsRedactorPluginAsset 资产包并启用插件

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

如果插件未加载。检查您页面上加载的 JavaScript 文件的顺序。您可以通过在应用程序配置中添加以下内容来确保相关资产文件在 widget 资产之后加载。

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

这表示 ChartsRedactorPluginAsset 资产包依赖于 widget 的资产包，使其按正确顺序加载资产。请确保将 nterms\redactor\charts\ChartjsAsset 添加到列表中，因为这会覆盖原始列表。

与 yiidoc/yii2-redactor - 未测试

如上所示注册 ChartsRedactorPluginAsset 资产包并启用插件

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

如果插件未加载。检查您页面上加载的 JavaScript 文件的顺序。您可以通过在应用程序配置中添加以下内容来确保相关资产文件在 widget 资产之后加载。

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

这表示 ChartsRedactorPluginAsset 资产包依赖于 widget 的资产包，使其按正确顺序加载资产。请确保将 nterms\redactor\charts\ChartjsAsset 添加到列表中，因为这会覆盖原始列表。

与 vova07/yii2-imperavi-widget - 未测试

如上所示注册 ChartsRedactorPluginAsset 资产包并启用插件

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

如果插件未加载。检查您页面上加载的 JavaScript 文件的顺序。您可以通过在应用程序配置中添加以下内容来确保相关资产文件在 widget 资产之后加载。

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

这表示 ChartsRedactorPluginAsset 资产包依赖于 widget 的资产包，使其按正确顺序加载资产。请确保将 nterms\redactor\charts\ChartjsAsset 添加到列表中，因为这会覆盖原始列表。

已知问题

此插件仍处于基本水平，仅提供 Chart.js 提供的有限功能集。还有一些缺少的 UX 功能，我计划很快开发。以下是已知问题的列表

• 不支持饼图和甜甜圈图。
• 生成的图表以图片格式插入到 Redactor 中，因此一旦插入图表就无法编辑。
• 关闭模态框将清除已输入的数据。

许可证

MIT