The integration in the example below is done on your local machine, but the exact same steps apply for your production application.<\/p>\n
Remark<\/b>
\nYou need to have a web server to run and test the integration. In this tutorial, I use the Brackets editor since it offers a live preview using an internal web server.
\n<\/i><\/p>\n
Let\u2019s get started.<\/p>\n
Architecture<\/h4>\n
To give you an idea about the global architecture, let\u2019s take a look at the picture below:<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/06\/27112404\/How-to-integrate-Highcharts-editor-into-TinyMCE-editor-11.jpg\")
<\/p>\n
The global architecture is simple; there are three main components:<\/p>\n
- \n
- Highcharts editor<\/li>\n
- TinyMCE plugin<\/li>\n
- TinyMCE editor<\/li>\n<\/ul>\n
The TinyMCE plugin is the interface\/link between the Highcharts editor and the TinyMCE editor.
\nThe Highcharts editor plugin includes the Highcharts editor and the TinyMCE plugin.<\/p>\nNow, you have an idea about the main components; let\u2019s set up the project.<\/p>\n
First, let\u2019s create a folder where we\u2019ll gather and run the project; then download the Highcharts editor and the TinyMCE plugin from this link<\/a>.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/06\/27132819\/Screenshot-2019-06-27-at-13.26.58.jpg\")
<\/p>\nIn the
highcharts-editor.min.dist<\/code>, you will find the Highcharts editor and the CSS file as well.
\nTo set up the TinyMCE editor, you need the link to the editor and thetinymce.init<\/code> function. To do that, create anindex.html<\/code> file, then add the following script:<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tinymce\/5.0.6\/tinymce.min.js'><\/script><\/code>, and create a filemain.js<\/code>, then copy\/paste the following code for TinyMCE version 5:<\/p>\ntinymce.init({\r\n selector: \"#chart-result\",\r\n plugins: [\r\n \"advlist autolink lists link image charmap print preview anchor\",\r\n \"searchreplace visualblocks code fullscreen\",\r\n \"insertdatetime media table contextmenu paste\",\r\n \"highcharts highchartssvg noneditable\"\r\n ],\r\n toolbar: \"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image\",\r\n menubar: \"file edit insert view format table tools help highcharts\",\r\n menu: {\r\n highcharts: {\r\n title: \"Highcharts\",\r\n items: \"highcharts\"\r\n })\r\n});<\/pre>\nIn case you are using TinyMCE version 4, copy\/paste this code:<\/p>\n
tinymce.init({\r\n selector: '#chart-result',\r\n height: 550,\r\n plugins: [\r\n 'advlist autolink lists link image charmap print preview anchor',\r\n 'searchreplace visualblocks code fullscreen',\r\n 'insertdatetime media table contextmenu paste',\r\n 'highcharts highchartssvg noneditable'\r\n ],\r\n toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'\r\n});<\/pre>\nRemark<\/b>
\nIn case you previously used TinyMCE version 4, note that version 5 API introduces several changes, including adding new options to the toolbar. Instead of having the Highcharts plugin integrated into an existing menu, we need to create a separate menu option for it:<\/i><\/p>\n- \n
- How to access to the Highcharts editor TinyMCE version 4.
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/06\/27134527\/version-4.jpg\")
<\/li>\n - How to access to the Highcharts editor TinyMCE version 5.
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/06\/27134538\/version-5.jpg\")
<\/li>\n<\/ul>\nTo have access to different Highcharts charts\u2019 types and options add the following libraries and modules:<\/p>\n
- \n
- highstock.js<\/li>\n
- highcharts-more.js<\/li>\n
- highcharts-3d.js<\/li>\n
- modules\/data.js<\/li>\n
- module\/exporting.js<\/li>\n
- modules\/funnel.js<\/li>\n
- modules\/solid-gauge.js<\/li>\n<\/ul>\n
The final
index.html<\/code> will look like:<\/p>\n<html>\r\n\r\n <link href=\"highcharts-editor.min.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <script src=\"http:\/\/code.highcharts.com\/stock\/highstock.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n <script src=\"https:\/\/code.highcharts.com\/modules\/data.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n <script src=\"https:\/\/code.highcharts.com\/highcharts-more.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n <script src=\"https:\/\/code.highcharts.com\/highcharts-3d.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n <script src=\"https:\/\/code.highcharts.com\/modules\/exporting.js\"><\/script>\r\n <script src=\"https:\/\/code.highcharts.com\/modules\/funnel.js\"><\/script>\r\n <script src=\"https:\/\/code.highcharts.com\/modules\/solid-gauge.js\"><\/script>\r\n <script src=\"highcharts-editor.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tinymce\/5.0.6\/tinymce.min.js\"><\/script>\r\n <script src=\"highcharts-editor.tinymce.js\"><\/script>\r\n <script src=\"main.js\"><\/script>\r\n\r\n <body>\r\n <textarea id=\"chart-result\"> <\/textarea>\r\n <\/body>\r\n\r\n<\/html><\/pre>\n
That is it; all the components are set up. Now, all I have to do is to run the project using the live preview option in Brackets.<\/p>\n
<\/p>\n
You can also try the live versions on CodeSandBox<\/a>. Click on the Highcharts and add your own interactive chart into the TinyMCE ediot:<\/p>\n
- How to access to the Highcharts editor TinyMCE version 4.