2016-06-25 5 views
2

Я пытаюсь загрузить TinyMCE динамически, как так (по нажатию кнопки):TinyMCE Ошибка - Не удалось загрузить плагин JS файлов при загрузке динамически

$.getScript('path/to/mce4/tinymce.min.js', function(){ 
    var def = { 
     selector: 'textarea', 
     body_class: 'sp-mce-editor', 
     content_css : "path/to/styles/mce.css", 
     plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking table contextmenu directionality emoticons template paste textcolor fullscreen autoresize'], 
     toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fontsizeselect forecolor backcolor | preview fullscreen | template", 
     toolbar_items_size: 'small', 
     relative_urls : false, 
     convert_urls : true, 
     external_plugins: { "nanospell": "path/to/mce4/nanospell/plugin.js" }, 
     nanospell_server:"php", 
     file_browser_callback: RoxyFileBrowser, 
     init_instance_callback: (typeof processEditor != 'undefined' ? processEditor : null) 
    }; 


    tinymce.init(def); 
}); 

При такой конфигурации TinyMCE не инициализируется. В консоли я вижу несколько ошибок 404, каждый с сообщением вроде этого:

Failed to load: /path/to/mce4/plugins/textcolor/plugin.js 

Sure по проверке в консоли файл JS tinymce.min.js нагрузки правильно. Кроме того, /path/to/mce4/plugins/textcolor/plugin.js не существует. Но существует /path/to/mce4/plugins/textcolor/plugin.min.js, и это справедливо для всех задействованных файлов js (т. Е. Файлы .min.js есть, но tinyMCE по какой-либо причине ищет файлы .js).

Теперь, когда я загружаю tinyMCE на вкладке сценария в <head>, проблем нет, и все работает хорошо.

Что может быть причиной этой ошибки и как я могу ее исправить? Если это ожидаемое поведение tinyMCE, каков правильный способ динамически загружать его js-файл для сценария, например, я работаю?

ответ

0

Я не могу вам сказать, что не так с вашим кодом, но это работает для меня (TinyMCE 4.x)

Я положил путь к tinymce.min.js так:

<script src="/tinymce/tinymce.min.js"></script> 

Таким образом, он загружается с загрузкой страницы. Не загружать динамически.

Тогда я сделал функция, определенная:

function IactivateMCE() { 
    tinymce.init({ 
    selector: "div.c10", 
    code continue 
    }) 
} 

Тогда я сделал OnClick, которые работают: IactivateMCE() ПОСЛЕ динамическое содержимое было добавлено на сайт (У меня есть функция, которая первая добавить динамическое содержимое сайт, затем инициализируйте TinyMCE).

Надеется, что это может принести пользу вам :-)

+0

Спасибо за ваш ответ. Конечно, я знаю, что ваш шаблон работает, и на самом деле его используют в другом месте приложения. Но вы согласитесь со мной t есть сценарии, в которых динамическая динамическая загрузка приносит определенные преимущества. Вот где этот вопрос попадает в –

+0

Я не понимаю, почему вы хотите динамически загружать tinymce.min.js. Но если вы это делаете, это вопрос о том, как загружать любой javascript динамически после загрузки страницы. Правильно? После инициализации вы должны загружать динамически после добавления нового контента, и это можно легко сделать, как было упомянуто. – Preben

0

Если вы используете angular2 + с угловым-кли, после могут помочь вам. Допустим, вы хотите добавить плагин с именем autoresize. Проверьте, присутствует ли этот плагин в node_modules/tinymce/plugins. Если да, то следующее:

  1. В угловом-cli.json

    "стили": [ "../node_modules/tinymce/tinymce.js", »../node_modules /tinymce/themes/modern/theme.js ", " ../node_modules/tinymce/plugins/link/plugin.js ", " ../node_modules/tinymce/plugins/paste/plugin.js ", " ../node_modules/tinymce/plugins/table/plugin.js ", " ../node_modules/tinymce/plugins/autoresize/plugin.js",/add this/ "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css", "стили.CSS» ],

  2. В intializing компонента:.

    tinymce.init ({

    ... 
        plugins: ['link', 'paste', 'table','**autoresize**'], 
        autoresize_bottom_margin: 50,//this is plug in requirement 
        ... 
    }); 
    

По какой-то причине я не могу форматировать код правильно