https://github.com/Simply007/ckeditor5-plotly-widget-showcase
This project demonstrates a successful integration of Plotly.js chart library with CKEditor 5, allowing users to insert interactive charts directly into their content.
https://github.com/Simply007/ckeditor5-plotly-widget-showcase
Last synced: 4 months ago
JSON representation
This project demonstrates a successful integration of Plotly.js chart library with CKEditor 5, allowing users to insert interactive charts directly into their content.
- Host: GitHub
- URL: https://github.com/Simply007/ckeditor5-plotly-widget-showcase
- Owner: Simply007
- Created: 2025-07-03T17:24:21.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-02-10T11:12:20.000Z (4 months ago)
- Last Synced: 2026-02-12T02:09:08.245Z (4 months ago)
- Language: HTML
- Homepage: https://ckeditor5-plotly-integration.netlify.app
- Size: 470 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ckeditor - Plotly.js - Chart library demo persisting data in the editor content and rendering charts as a CKEditor widgets. (Showcases)
README
# CKEditor & Plotly.js Widget showcase
This project demonstrates a successful integration of Plotly.js chart library with CKEditor 5, allowing users to insert interactive charts directly into their content.
## Features
### 🎯 **Chart Types Supported**
- **Scatter Plot**: Data points with optional trend lines
- **Bar Chart**: Vertical bar representations
- **Line Chart**: Connected data points
- **Pie Chart**: Circular statistical graphics
- **Histogram**: Distribution visualization
### 🎨 **Interactive Capabilities**
- **Hover Effects**: Detailed data tooltips
- **Zoom & Pan**: Navigate through large datasets
- **Responsive Design**: Auto-resize with container
- **Data Persistence**: Chart configuration saved with content
### 🔧 **Editor Integration**
- **Toolbar Button**: Easy chart insertion via dropdown
- **Widget System**: Charts as first-class editor objects
- **Sample Data**: Pre-configured examples for each chart type
- **Visual Feedback**: Clear chart boundaries and selection
## Project Structure
```
├── src/
│ ├── index.js # Main editor configuration
│ └── plugins/
│ └── plotly-chart/
│ ├── plotlychart.js # Master plugin
│ ├── plotlychartediting.js # Model/view conversion
│ ├── plotlychartui.js # Toolbar & UI components
│ ├── plotlyrenderer.js # Chart rendering logic
│ └── plotlychart.css # Widget styling
├── dist/
│ └── bundle.js # Compiled editor bundle
├── index.html # Demo page
├── main.js # Editor initialization
└── package.json # Dependencies & scripts
```
## Usage
1. **Start the development server**:
```bash
npm start
```
2. **Insert charts**:
- Click the chart button (📊) in the toolbar
- Select from 5 different chart types
- Chart appears with sample data
3. **Customize charts**:
- Edit chart data attributes in the HTML output
- Modify chart configuration via the data attributes
## Technical Implementation
### Plugin Architecture
- **Master Plugin**: Coordinates editing and UI components
- **Editing Plugin**: Handles model-to-view conversion using CKEditor 5's widget system
- **UI Plugin**: Provides toolbar dropdown with chart type selection
- **Renderer**: Manages Plotly.js chart creation and cleanup
### Data Storage
Charts are stored as HTML elements with data attributes:
```html
```
### Dependencies
- **CKEditor 5**: Modern rich text editor framework
- **Plotly.js**: Interactive charting library
- **Webpack**: Module bundler for custom builds
## Next Steps
The integration provides a solid foundation for chart editing capabilities. Future enhancements could include:
- **Chart Editor Dialog**: Visual interface for data input
- **Data Import**: CSV/JSON file support
- **Advanced Chart Types**: 3D plots, financial charts, geographic maps
- **Theme Integration**: Match editor styling
- **Export Options**: Save charts as images
## Development
- **Build**: `npm run build`
- **Watch**: `npm run build:dev`
- **Serve**: `npm start`