This is a proof-of-concept plugin that adds support for injecting charts into CKEditor. To render charts, the Chart.js library is used. The plugin serves as an example of using external JavaScript libraries in CKEditor, using the widgets feature. It has lots of comments inside to help you understand how it was built.

View live demo.

1. Put the plugin into the CKEditor "plugins" folder.
2. Enable the plugin with config.extraPlugins.
3. Add the Chart button to the toolbar if it will not appear automatically.

CKEDITOR.replace( 'editor1', {
    extraPlugins: 'chart'
} );

In case of any problems with installation, there is an online sample available that should help you get started.

Chart created in CKEditor is represented as a simple <div> element with data attributes. This is by design, because such a simplified form allows you to re-edit the chart in the future. It ensures that your content will be future-proof, allowing you to to use different styling for charts embed on your website when you redesign it or to use the future major versions of Chart.js library with different API/features.

To convert <div> elements into charts, include chart.min.js and widget2chart.js on your website. See the online sample.

The default chart height (in pixels) in the Edit Chart dialog window.

config.chart_height = 400;

The number of rows (items to enter) in the Edit Chart dialog window.

config.chart_maxItems = 12;

Colors used to draw charts. See Bar chart data structure and Pie chart data structure.

config.chart_colors =
{
	// Colors for Bar/Line chart.
	fillColor: 'rgba(151,187,205,0.5)',
	strokeColor: 'rgba(151,187,205,0.8)',
	highlightFill: 'rgba(151,187,205,0.75)',
	highlightStroke: 'rgba(151,187,205,1)',
	// Colors for Doughnut/Pie/PolarArea charts.
	data: [ '#B33131', '#B66F2D', '#B6B330', '#71B232', '#33B22D', '#31B272', '#2DB5B5', '#3172B6', '#3232B6', '#6E31B2', '#B434AF', '#B53071' ]
};

Chart.js configuration to use for Bar charts.

config.chart_configBar = { animation: false };

Chart.js configuration to use for Doughnut charts.

config.chart_configDoughnut = { animateRotate: false };

Chart.js configuration to use for Line charts.

config.chart_configLine = { animation: false };

Chart.js configuration to use for Pie charts.

config.chart_configPie = { animateRotate: false };

Chart.js configuration to use for PolarArea charts.

config.chart_configPolarArea = { animateRotate: false };

For now, this is a proof-of-concept plugin. However if you would like to leave any feedback, fill a future request, report a bug etc., feel free to do so.

Any modern browser should be supported. IE8 is not supported.

Licensed under the GPL, LGPL and MPL licenses, at your choice.

For full details about the license, please check the LICENSE.md file.