Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@wwalc
wwalc committed May 29, 2015
1 parent b339fce commit a9c19ad
Showing 1 changed file with 68 additions and 5 deletions.
73 changes: 68 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ View [live demo](http://wwalc.github.io/chart/).
## Installation

1. Put the plugin into the CKEditor "plugins" folder.
2. Enable the plugin with `config.extraPlugins`
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'
}
<pre>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'chart'
}
</pre>

In case of any problems with installation, there is [an online sample](http://wwalc.github.io/chart/sample.html) available that should help you get started.

Expand All @@ -28,6 +29,68 @@ Chart created in CKEditor is represented as a simple `<div>` element with data a

To convert `<div>` elements into charts, include `chart.min.js` and `widget2chart.js` on your website. See the [online sample](http://wwalc.github.io/chart/sample.html).

## Configuration Options

### config.chart_height

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

config.chart_height = 400;

### config.chart_maxItems

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

config.chart_maxItems = 12;

### config.chart_colors

Colors used to draw charts. See <a href="http://www.chartjs.org/docs/#bar-chart-data-structure">Bar chart data structure</a> and
<a href="http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure">Pie chart data structure</a>.

<pre>
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' ]
}
</pre>

### config.chart_configBar

Chart.js configuration to use for Bar charts.

config.chart_configBar = { animation: false };

### config.chart_configDoughnut

Chart.js configuration to use for Doughnut charts.

config.chart_configDoughnut = { animateRotate: false };

### config.chart_configLine

Chart.js configuration to use for Line charts.

config.chart_configLine = { animation: false };

### config.chart_configPie

Chart.js configuration to use for Pie charts.

config.chart_configPie = { animateRotate: false };

### config.chart_configPolarArea

Chart.js configuration to use for PolarArea charts.

config.chart_configPolarArea = { animateRotate: false };

## Screenshot

![Charts in CKEditor](http://s10.postimg.org/efvmb3fmh/chartjs.png)
Expand Down

4 comments on commit a9c19ad

@jefmaus
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, make a video of how install, step to step. I can't install. Thanks

@wwalc
Copy link
Owner Author

@wwalc wwalc commented on a9c19ad Feb 16, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use http://ckeditor.com/builder and add Chart plugin from the list of available plugins on the right side. This way you will create a custom build that already includes the chart plugin.

Open the attached samples with CKEditor and the chart plugin should be fully working there already. If not, report an issue with some screenshots etc. and check the error console for any JavaScript errors.

@wwalc
Copy link
Owner Author

@wwalc wwalc commented on a9c19ad Feb 16, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I think I know why you cannot run it, it requires the widget plugin as a dependency which is not included by default in any preset. If you use the online builder, all required dependencies will be added automatically.

@jefmaus
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have met.

folder on my site, called 'cpanel'
I do not understand because it generates some conflict, but rename the folder and now it works.

only include the ckeditor.js and add the class ckeditor.

<textarea class="ckeditor" id="contenido" name="contenido" required></textarea>

it's ok only use class="ckeditor" ?

Please sign in to comment.