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";

我已經確定了原因。 但我對我的解決方案並不滿意。 也許其他人會想出一個更好的。