https://discord.umbraco.com
Join Discord
Adding custom plugins to Umbraco RichTextEditor/TinyMCE
# help-with-umbraco
p
I'm trying add Highcharts TinyMCE to Umbraco, but having no luck. I've added the config for the Highcharts toolbar button in appSettings.config.json > "RichTextEditor": { > "Plugins": [ > "highcharts" > ], > "Commands": [ > { > "Alias": "highcharts", > "Name": "Highcharts", > "Mode": "Insert" > } > ] > } Also, I've added the .js files to "wwwroot\umbraco\lib\tinymce\plugins\" and I can see the resources being loaded in the Network tab. In the DataType, I've also checked the Highcharts checkbox so it appears in the toolbar, but it's not appearing at all. Anyone had something similar with Highcharts or other TinyMCE plugins?
r
hello @paulo_webreality I have a feeling there is something else small that needs to done for it to display.. I feel i have had similar before .. can you let us know what versions of Umbraco you are trying to add this in .. it could be the verison of Tiny MCE for example is not compatible .. though the newer ones it is easier than it used to be i can't recall exactly but i think ours was permissions and versions related so that may be something to look at
p
Hi @Ravi - We're using Umbraco 12, which is TinyMCE v6 I know the Highcharts TinyMCE plugin is for TinyMCE v5, but I'd have guessed it was backwards compatible. The main thing is that the Button doesnt even appear on the toolbar in the RichTextEditor, which is why I guess something is being blocked - I've loaded the Highcharts scripts and am not getting any errors, and I can see they're being loaded successfully via the Network tab. Any help would be appreciated - thank you!
r
yeah.. this feels familiar.. I Cant remeber what we did.. i'll have a think and ask
p
Thanks
m
Looks like your config aught to work, we use similar for visualblocks.. https://discord.com/channels/869656431308189746/1148255209919877170/1148612542613168128
also this paragraph.. "After including the scripts in your application, you need to initialize TinyMCE with the Highcharts plugin. Simply add highcharts and/or highchartssvg (if you only want static charts) to the plugins array in your tinymce.init object. Be sure to also add the insertfile option to the toolbar option. You should also include the noneditable plugin to make the charts more manageable within TinyMCE. You will now find the Highcharts editor when going to the Insert-menu." does that suggest the toolbar/command alias should be 
insertfile
? the tinymce.init suggests it's 
insertfile
too.. (at least for tinymce5) https://www.highcharts.com/blog/tutorials/how-to-integrate-highcharts-editor-into-tinymce-editor/
p
I've followed that as close as I can, but no luck - even when the Highcharts item appears on the RTE dataType and I check it, nothing changes on my RTE Toolbar.
r
I thinkour solution was getting the referemces right
p
@Ravi in terms of the references to the plugin JS scripts? Did you have a button in the toolbar for your custom plugin? If so, could you share your config for that, from appSettings?
r
I think so .. I'll have to have a dig around and see if i can find it and send it here..
I also feel quite a few rebuilds may have occurred..
It looks like we took it out in the end as we wanted a "basic" ie easy to upgrade web site without any or as few as posible customisations
p
Ok thank you @Ravi - I think we'll have to do the same
m
Copy code
"RichTextEditor": {
  "Plugins": ["highcharts" ],
  "Commands": [
    {
      "Alias": "highcharts",
      "Name": "High Charts",
      "Mode": "Insert"
    }
  ]
}
and renming/adding the 
highcharts-editor.tinymce.js
into 
\wwwroot\umbraco\lib\tinymce\plugins\highcharts\plugin.min.js
package.manifest in 
app_plugins/highcharts
gets past the error.. but then no button/menuitem appears.
Copy code
{
  "javascript": [
    "~/App_Plugins/HighCharts/backoffice/highcharts-editor.js"
  ],
  "css": [
    "~/App_Plugins/HighCharts/backoffice/highcharts-editor.min.css"
  ]
}
looks like 
addMenuItem
isn't supported but 
addButton
is so update
Copy code
if (tinymce.majorVersion > 4) {
        editor.ui.registry.addButton('highcharts', {
            text: 'Highcharts (Interactive)',
            icon: 'sharpen',
            onAction: function (e) {...
            }
        });

    }
I do see a prompt for HighCharts.js must be included.. but hopefully you can debug the rest...
adding the js from here https://code.highcharts.com/highcharts.js locally into the 
package.manifest
removes that.. but then get 
there is a problem with your chart
think that might be duplicating the core highcharts though
Copy code
{
  "javascript": [
    "~/App_Plugins/HighCharts/backoffice/highcharts-editor.js",
    "~/App_Plugins/HighCharts/backoffice/highcharts.js"
  ],
  "css": [
    "~/App_Plugins/HighCharts/backoffice/highcharts-editor.min.css"
  ]
}
Over to someone more versed in highcharts there I think 😉
p
Great! Thanks @Mike Chambers - I'll give this a go
m
and renaming/adding the 
highcharts-editor.tinymce.js
into 
\wwwroot\umbraco\lib\tinymce\plugins\highcharts\plugin.min.js
p
I must have changed that file - Now getting the same result as you. Thanks!
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by