Dynamically loading TinyMCE - wrong plugin, theme paths

4
votes

When I add the script tag <script src="../Scripts/tinymce.min.js"></script> to my page, TinyMCE loads fine - with plugins and theme referencing the .min versions. However, when I remove the script tag and try loading it with jQuery, it's referencing the non-minified version, as noted in the console log. I'm using TinyMCE v4.1.7 (2014-11-27)

        $.getScript('http://localhost:52417/Scripts/tinymce.min.js', function () {
            window.tinymce.dom.Event.domLoaded = true;
            tinymce.baseURL = 'http://localhost:52417/Scripts';
            tinymce.init({
                selector: '#announcementText',
                plugins: ['link image'],
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link image',
                menubar: false,
                statusbar: false
            });
        });

GET http://localhost:52417/Scripts/themes/modern/theme.js 404 (Not Found) GET http://localhost:52417/Scripts/plugins/link/plugin.js 404 (Not Found) GET http://localhost:52417/Scripts/plugins/image/plugin.js 404 (Not Found)

The domLoaded and baseURL lines were found from other examples on SO, and didn't make a difference. How can I get it to reference the correct path to the theme and plugins?

3
javascriptjquerytinymcetinymce-4

3 Answers

23
votes

Add tinymce.suffix = '.min'; before invoking tinymce.init()

0
votes

The only solution I could come up with is to copy and rename the theme.min.js, and plugin.min.js files to theme.js and plugin.js and publish those along with the minified versions.

0
votes

Best solution is to include plugins in html in <script> tag.

Then use some lib to pack those files into one to reduce number of requests to serwer for example for Symfony2 (in twig template):

{% javascripts output='js/tinymce_plugins.js' filter='?uglifyjs2'
            '@BrokerStarCommonBundle/Resources/public/js/tinymce/themes/modern/theme.min.js'
            '@BrokerStarCommonBundle/Resources/public/js/tinymce/plugins/advlist/plugin.min.js'
            '@BrokerStarCommonBundle/Resources/public/js/tinymce/plugins/autolink/plugin.min.js'
            .............

'@BrokerStarCommonBundle/Resources/public/js/tinymce/plugins/textpattern/plugin.min.js'
            '@BrokerStarCommonBundle/Resources/public/js/tinymce/plugins/tabbutton/plugin.min.js'
            '@BrokerStarCommonBundle/Resources/public/js/tinymce/plugins/checkboxes/plugin.min.js'
            '@BrokerStarCommonBundle/Resources/public/js/tinymce/plugins/noneditable/plugin.min.js'
            %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
            {% endjavascripts %}
            <script>