jQuery Загрузка TinyMCE 4 по запросу

Question

Я пытаюсь использовать jQuery для загрузки TinyMCE 4 по требованию из CDN безрезультатно. Я бы хотел избежать загрузки 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

Я не очень хорошо знаком с tinymce4, но для версии 3.х есть пример можно найти здесь: http://www.tinymce.com/tryit/3_x/load_on_demand.php Обычно он должен работать так же, как для более поздних версий,

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

Добавьте следующее:

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 4

Цитата из оригинального вопроса:

Любая идея о том, как я могу получить 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"; 

Я определил причину. Но я не очень доволен своим решением. Может быть, кто-то еще придумает лучший.