{"id":32243628,"url":"https://github.com/axel186/charts-tinymce-plugin-bower","last_synced_at":"2025-10-22T16:10:07.191Z","repository":{"id":58240155,"uuid":"99901288","full_name":"Axel186/charts-tinymce-plugin-bower","owner":"Axel186","description":"Add charts into your content (Tinymce plugin)","archived":false,"fork":false,"pushed_at":"2017-08-10T08:42:39.000Z","size":296,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-08T21:34:43.897Z","etag":null,"topics":["chartistjs","charts","data-visualisation","tinymce-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Axel186.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-10T08:42:27.000Z","updated_at":"2018-05-02T05:24:13.000Z","dependencies_parsed_at":"2022-08-31T03:31:24.568Z","dependency_job_id":null,"html_url":"https://github.com/Axel186/charts-tinymce-plugin-bower","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Axel186/charts-tinymce-plugin-bower","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Axel186%2Fcharts-tinymce-plugin-bower","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Axel186%2Fcharts-tinymce-plugin-bower/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Axel186%2Fcharts-tinymce-plugin-bower/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Axel186%2Fcharts-tinymce-plugin-bower/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Axel186","download_url":"https://codeload.github.com/Axel186/charts-tinymce-plugin-bower/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Axel186%2Fcharts-tinymce-plugin-bower/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280467901,"owners_count":26335598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["chartistjs","charts","data-visualisation","tinymce-plugin"],"created_at":"2025-10-22T16:10:04.059Z","updated_at":"2025-10-22T16:10:07.174Z","avatar_url":"https://github.com/Axel186.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Charts TinyMCE Plugin\n\nWith this plugin you able to add charts into your content.\nThis plugin using [Chartist.js](https://gionkunz.github.io/chartist-js/) libary for rendering graphs.\n\nThis plugin compatible with TinyMce 4.\n\n![Charts TinyMCE Plugin - Visual demo](https://raw.githubusercontent.com/Axel186/charts-tinymce-plugin/master/demo.gif)\n\n## Install\n\n### NPM:\n```\nnpm install charts-tinymce-plugin --save\n```\n\n### Bower:\n```\nbower install charts-tinymce-plugin --save\n```\n\n### Download\n\n* [Latest build](https://github.com/Axel186/charts-tinymce-plugin-bower/archive/master.zip)\n\n## Usage\n\nConfigure your TinyMce init settings by adding `external_plugins` and usage of `chartsTinymcePlugin`: \n\n```Javascript\ntinymce.init({\n  selector: 'textarea',\n  external_plugins: {'chartsTinymcePlugin': 'http://your-website/.../charts-tinymce-plugin/plugin.js'}, // Add plugin to Tinymce\n  toolbar: 'chartsTinymcePlugin',\n  content_css: 'http://your-website/.../charts-tinymce-plugin/app/scripts/chartist/chartist.css', // Add chartist styles or use your own.\n  chart_uploader: function (file, cb) {\n    // Here is your uploader logic, start to upload you image here like that:\n\n    // yourUploader.sendIMG(file.blob)\n    //   .then(function(url){\n    //      // Take a look at \"class='tinymce-chart'\" and \"charts-data='\" + file.chartsData + \"'\", it is really important to keep it in the tag - that's way you able to edit your graph.\n    //      cb(\"\u003cimg class='tinymce-chart' width='\" + file.width + \"' height='\" + file.height + \"' src='\" + url + \"' charts-data='\" + file.chartsData + \"' /\u003e\");\n    //   });\n\n    // or just put SVG-html into your content. Example:\n    cb(file.html);\n  }\n});\n```\n\nThere are 2 options how to use this plugin:\n\n1. Add SVG tag width graph into your content, I found that is very hard to work with SVG into Tinymce. It's hard to align or edit because it contains a lot of tags inside.\n2. Is to upload \"Blob file\" that plugin returns to your own server and after that add the IMG tag with path to the file. If you are using this method, you able to edit the graph and update the changes. (Take a look at the screenshot above).\n\n## Development\n\nThis repository contains only `dist` files, if you want to get the source, check: [charts-tinymce-plugin](https://github.com/Axel186/charts-tinymce-plugin).\n\n## License - MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxel186%2Fcharts-tinymce-plugin-bower","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxel186%2Fcharts-tinymce-plugin-bower","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxel186%2Fcharts-tinymce-plugin-bower/lists"}