jQuery按需加载TinyMCE 4

Question

我试图使用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初始化的任何想法？

感谢您的时间。

Answer 1

在加载dinamically时，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
        });
    });
}

Answer 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

Answer 3

从原始问题引用：

关于如何让TinyMCE初始化的任何想法？

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

1. $ .getScript既添加又删除您正在加载的脚本，并在此过程中执行它的内容。因此，当您的成功函数运行tinymce.init时，脚本标记将不再存在于您的文档中。
2. 另一方面，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";

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