Using angular-ui-tinymce with JSPM - unable to load templates and plugins

211 Views Asked by At

I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.

    GET http://localhost:8080/jspm_packages/github/tinymce/[email protected]/themes/modern/theme.min.js @ angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/[email protected]/themes/modern/theme.min.js

I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.

What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?

1

There are 1 best solutions below

0
On BEST ANSWER

I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.

I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.

In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.

tinymce theme and plugins within my source

This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:

import 'sysadmin/app/tinymce/themes/modern/theme';