动态加载 TinyMCE - 错误的插件、主题路径答案

【问题标题】：Dynamically loading TinyMCE - wrong plugin, theme paths动态加载 TinyMCE - 错误的插件、主题路径
【发布时间】：2014-12-03 13:59:09
【问题描述】：

当我将脚本标签 <script src="../Scripts/tinymce.min.js"></script> 添加到我的页面时，TinyMCE 加载正常 - 插件和主题引用了 .min 版本。但是，当我删除脚本标记并尝试使用 jQuery 加载它时，它引用的是非缩小版本，如控制台日志中所述。我正在使用 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)

domLoaded 和 baseURL 行是从 SO 上的其他示例中找到的，没有任何区别。如何让它引用主题和插件的正确路径？

【问题讨论】：

标签： javascript jquery tinymce tinymce-4

【解决方案1】：

在调用tinymce.init()之前添加tinymce.suffix = '.min';

【讨论】：

2021 年仍然适用！

【解决方案2】：

我能想出的唯一解决方案是将 theme.min.js 和 plugin.min.js 文件复制并重命名为 theme.js 和 plugin.js 并将它们与缩小版本一起发布。

【讨论】：

【解决方案3】：

最好的解决方案是在<script>标签中包含html中的插件。

然后使用一些库将这些文件打包成一个以减少对服务器的请求数量例如 Symfony2（在 twig 模板中）：

{% 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>

【讨论】：