{"id":44338410,"url":"https://github.com/Simply007/ckeditor5-plotly-widget-showcase","last_synced_at":"2026-02-23T16:00:53.239Z","repository":{"id":302853575,"uuid":"1013309209","full_name":"Simply007/ckeditor5-plotly-widget-showcase","owner":"Simply007","description":"This project demonstrates a successful integration of Plotly.js chart library with CKEditor 5, allowing users to insert interactive charts directly into their content.","archived":false,"fork":false,"pushed_at":"2026-02-10T11:12:20.000Z","size":481,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-12T02:09:08.245Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ckeditor5-plotly-integration.netlify.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Simply007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-03T17:24:21.000Z","updated_at":"2026-02-10T11:12:24.000Z","dependencies_parsed_at":"2025-07-04T13:29:57.000Z","dependency_job_id":"778ccd80-e73d-42f1-8745-cb6d90de9277","html_url":"https://github.com/Simply007/ckeditor5-plotly-widget-showcase","commit_stats":null,"previous_names":["simply007/ckeditor5-plotly-integration","simply007/ckeditor5-plotly-widget-showcase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Simply007/ckeditor5-plotly-widget-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fckeditor5-plotly-widget-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fckeditor5-plotly-widget-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fckeditor5-plotly-widget-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fckeditor5-plotly-widget-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Simply007","download_url":"https://codeload.github.com/Simply007/ckeditor5-plotly-widget-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fckeditor5-plotly-widget-showcase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29747979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-11T12:00:29.693Z","updated_at":"2026-02-23T16:00:53.233Z","avatar_url":"https://github.com/Simply007.png","language":"HTML","funding_links":[],"categories":["Showcases"],"sub_categories":[],"readme":"# CKEditor \u0026 Plotly.js Widget showcase\n\nThis project demonstrates a successful integration of Plotly.js chart library with CKEditor 5, allowing users to insert interactive charts directly into their content.\n\n![Plotly Widgets Showcase](./assets/screenshot.png)\n\n## Features\n\n### 🎯 **Chart Types Supported**\n- **Scatter Plot**: Data points with optional trend lines\n- **Bar Chart**: Vertical bar representations\n- **Line Chart**: Connected data points\n- **Pie Chart**: Circular statistical graphics\n- **Histogram**: Distribution visualization\n\n### 🎨 **Interactive Capabilities**\n- **Hover Effects**: Detailed data tooltips\n- **Zoom \u0026 Pan**: Navigate through large datasets\n- **Responsive Design**: Auto-resize with container\n- **Data Persistence**: Chart configuration saved with content\n\n### 🔧 **Editor Integration**\n- **Toolbar Button**: Easy chart insertion via dropdown\n- **Widget System**: Charts as first-class editor objects\n- **Sample Data**: Pre-configured examples for each chart type\n- **Visual Feedback**: Clear chart boundaries and selection\n\n## Project Structure\n\n```\n├── src/\n│   ├── index.js                          # Main editor configuration\n│   └── plugins/\n│       └── plotly-chart/\n│           ├── plotlychart.js            # Master plugin\n│           ├── plotlychartediting.js     # Model/view conversion\n│           ├── plotlychartui.js          # Toolbar \u0026 UI components\n│           ├── plotlyrenderer.js         # Chart rendering logic\n│           └── plotlychart.css           # Widget styling\n├── dist/\n│   └── bundle.js                         # Compiled editor bundle\n├── index.html                            # Demo page\n├── main.js                               # Editor initialization\n└── package.json                          # Dependencies \u0026 scripts\n```\n\n## Usage\n\n1. **Start the development server**:\n   ```bash\n   npm start\n   ```\n\n2. **Insert charts**:\n   - Click the chart button (📊) in the toolbar\n   - Select from 5 different chart types\n   - Chart appears with sample data\n\n3. **Customize charts**:\n   - Edit chart data attributes in the HTML output\n   - Modify chart configuration via the data attributes\n\n## Technical Implementation\n\n### Plugin Architecture\n- **Master Plugin**: Coordinates editing and UI components\n- **Editing Plugin**: Handles model-to-view conversion using CKEditor 5's widget system\n- **UI Plugin**: Provides toolbar dropdown with chart type selection\n- **Renderer**: Manages Plotly.js chart creation and cleanup\n\n### Data Storage\nCharts are stored as HTML elements with data attributes:\n```html\n\u003cdiv class=\"plotly-chart\" \n     data-chart-data='{\"x\": [1,2,3], \"y\": [2,4,3], \"type\": \"scatter\"}'\n     data-chart-type=\"scatter\"\n     data-chart-title=\"Sample Chart\"\u003e\n\u003c/div\u003e\n```\n\n### Dependencies\n- **CKEditor 5**: Modern rich text editor framework\n- **Plotly.js**: Interactive charting library\n- **Webpack**: Module bundler for custom builds\n\n## Next Steps\n\nThe integration provides a solid foundation for chart editing capabilities. Future enhancements could include:\n\n- **Chart Editor Dialog**: Visual interface for data input\n- **Data Import**: CSV/JSON file support\n- **Advanced Chart Types**: 3D plots, financial charts, geographic maps\n- **Theme Integration**: Match editor styling\n- **Export Options**: Save charts as images\n\n## Development\n\n- **Build**: `npm run build`\n- **Watch**: `npm run build:dev`\n- **Serve**: `npm start`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimply007%2Fckeditor5-plotly-widget-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimply007%2Fckeditor5-plotly-widget-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimply007%2Fckeditor5-plotly-widget-showcase/lists"}