jQuery 按需加载 TinyMCE 4答案

【问题标题】：jQuery Load TinyMCE 4 On DemandjQuery 按需加载 TinyMCE 4
【发布时间】：2013-07-15 08:13:28
【问题描述】：

我正在尝试使用 jQuery 从 CDN 按需加载 TinyMCE 4，但无济于事。我想避免在页面加载时加载 TinyMCE，因为它是一组（相对）庞大的脚本，而是我计划在用户单击按钮时触发加载它。这是我所拥有的：

HTML：

...
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
...

jQuery：

...
if (typeof TinyMCE == 'undefined') {
  $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function() {
    alert('Loaded!');

    tinymce.init({
      selector: 'textarea',
      plugins: [
        'autolink contextmenu image link table'
      ],
      menubar: false,
      statusbar: false,
      toolbar: false
    });
  });
}
...

我可以看到 jQuery 确实获取了脚本，因为我可以在我的检查器中看到网络活动。回调方法被调用，我可以看到Loaded! 对话框出现，但 TinyMCE 没有初始化。 JavaScript 控制台没有显示任何错误。

知道如何让 TinyMCE 初始化吗？

感谢您的宝贵时间。

【问题讨论】：

我对 tinymce4 不是很熟悉，但是对于 3.x 版本，可以在这里找到一个示例：tinymce.com/tryit/3_x/load_on_demand.php 通常对于更新的版本它应该以相同的方式工作，
您检查过控制台中的错误吗？
@RajeshKumar “JavaScript 控制台没有显示任何错误。”

标签： javascript jquery html tinymce cross-domain

【解决方案1】：

动态加载时 Tinymce 无法解析 baseURL，因此我们必须对其进行硬编码。
添加以下内容：

if (typeof tinymce == 'undefined') {
    $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
        window.tinymce.dom.Event.domLoaded = true;
        tinymce.baseURL = "//tinymce.cachefly.net/4";
        tinymce.suffix = ".min";
        tinymce.init({
            selector: 'textarea',
            plugins: ['autolink contextmenu image link table'],
            menubar: false,
            statusbar: false,
            toolbar: false
        });
    });
}

【讨论】：

Tinymce 在动态加载时无法解析 baseURL，所以我们必须对其进行硬编码。

【解决方案2】：

如下修改你的代码：

if (typeof tinymce == 'undefined') {
        $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
            window.tinymce.dom.Event.domLoaded = true;
            tinymce.init({
                selector: 'textarea',
                plugins: ['autolink contextmenu image link table'],
                menubar: false,
                statusbar: false,
                toolbar: false
            });
        });
    }

它对我有用。更多信息https://stackoverflow.com/a/13361509/392526

【讨论】：

稍微解释一下会很有帮助。问题是什么？您的代码是如何解决的？

【解决方案3】：

引用原始问题：

知道如何让 TinyMCE 初始化吗？

JQuery.getScript 和 tinyMCE 存在问题，我认为这会给您带来麻烦。我花了一天的时间才弄明白，所以我想我应该在这里提一下。

$.getScript 添加和删除您正在加载的脚本，在此过程中执行它的内容。因此，当您的成功函数运行 tinymce.init 时，脚本标签已不再存在于您的文档中。
另一方面，tinymce.init 会在您的文档中查找该特定脚本标记，以了解其所有文件的基本 url。如果它没有找到它，它会从 document.location 获取它。

我不能说解决这个小问题的最佳方法是什么。我发现以下内容可以为我解决问题（tinymce 4.2.7）：

打开 tinymce.min.js 并搜索注释行...

            // Get base where the tinymce script is located

往下看几行你会找到语句的地方...

            src = scripts[i].src;

...应该改为...

            src = "http://yourdomain.com/path/to/tinymce/tinymce.min.js";

我已经确定了原因。但我对我的解决方案不太满意。也许其他人会想出更好的。

【讨论】：