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

Tinymce在加载dinamically时无法解析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 存在问题，我认为这会给您带来麻烦。我花了一天时间弄明白，所以我想我应该在这里提一下。

$。getScript 都会添加和删除您正在加载的脚本，并在此过程中执行该内容。因此，当您的成功函数运行tinymce.init时，脚本标记将不再存在于您的文档中。
tinymce.init 会查看您的文档中的特定脚本标记，以便了解其所有文件的基本网址。如果它找不到它，它将从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";

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

jQuery按需加载TinyMCE 4

3 个答案: