TinyMCE

To integrate the Highcharts Editor with TinyMCE, either download the latest highcharts-editor.tinymce.min.js from releases, or clone the repo and run npm install && gulp and copy it from the dist/ folder.

Once you've included highcharts-editor.tinymce.min.js and the editor CSS in your application, add the highcharts plugin to your tinyMCE initialization:

tinymce.init({
    selector: "textarea",
    plugins: [
        "highcharts highchartssvg noneditable"
    ]
});

Notice that there are two plugins - highcarts and highchartssvg. The former will embed an interactive chart, whereas the later will embed a static SVG chart.

If you use the interactive version, please keep in mind that the plugin will alter the editor's allowed_fields to allow the script tag in order to display the graph. The static version may therefore be more suitable to applications where the editor is available to un-vetted users to avoid security concerns.

Both plug-ins add entries into the Insert menu in TinyMCE. Note that the interactive version will insert an SVG chart which will be overridden when viewing the page you're editing. This is to provide a fallback in cases where JavaScript isn't available (e.g. NoScript etc.).

You should also use the noneditable plug-in to avoid accidentally deleting parts of the chart, and to make it easy to delete charts when required.