Javascript: TinyMCE + Highcharts

1
votes

Please, give me some technical advice on how to implement the following in javascript.

I need to integate highcharts into tinyMCE in the following scenario:

  • User chooses "Add chart" from tinyMCE menu,
  • chooses chart (it's chartId is stored in variable),
  • and the chart is rendered to tinyMCE's iframe (using backbone view, that is able to get chart info using chartId and render a chart, using its id, which is already implemented).

Also note that all this is happening inside extJS application.

This chart should be:

  • sizeable and editable, e.g. like an image,
  • but user is not able to put caret inside highchart and update text inside it, e.g. it's entirely selected like an image.
  • when right-clicked, the tinyMCE's popup menu is shown, like for image, where i can set width-height-style etc.

I also need that when actual markup is received from tinyMCE, instead of the whole chart I would get a placeholder, e.g. tag "chart dataId="chartId"" or other format.

What is already done:

  • I have attached tinyMCE to extJS and render it as a form.field
  • I have added custom button to tinyMCE's toolbar
  • I implemented rendering of chart into virtual , and then adding this div to tinyMCE's iframe dom, but the chart is rendered only partially and text inside chart is selectable, which is not accepted.

Eventually, the main questions are:

  • How to make chart render correctly into tinyMCE's iframe?
  • How to make chart in tinyMCE selectable and editable in an image like mode?
  • How to replace chart, when retrieving markup from tinyMCE, with some placeholder?

Thanks for the advice!

1
javascriptextjsbackbone.jstinymcehighcharts
backbone + extjs + highcharts + tinymce? sounds complicated! why don't you use extjs charts and htmleditor for this? - Neil McGuigan
@NeilMcGuigan extjs charts are to "heavy" -- 3+ charts on one page start to lag. HtmlEditor does not have tables, but we need them. - Rustem Mustafin

1 Answers

0
votes

I have developed some solutions for requirements like that. Here is the plugin that allows you to create/edit your own charts, it's free and has MIT license (charts as well), I using Chartist there, it has a MIT license also.

How it works? Just puts SVG to your content or you can add some custom uploader - push file to your server and add IMG tag into your text.

Link: https://github.com/Axel186/charts-tinymce-plugin

Hope it will be useful, if someone have any questions, feel free to ask me.