I'm trying to load TinyMCE dynamically like so (on clicking a button):
$.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);
});
With this configuration, tinyMCE fails to initialize. In the console I see several 404 errors, each with a message like this:
Failed to load: /path/to/mce4/plugins/textcolor/plugin.js
Sure on checking in the console the JS file tinymce.min.js loads correctly. Also, the /path/to/mce4/plugins/textcolor/plugin.js does not exist. But /path/to/mce4/plugins/textcolor/plugin.min.js exists, and this is true for all the js files involved (i.e. the .min.js files are there, but tinyMCE for whatever reason is looking for the .js files).
Now, when I load tinyMCE in a script tab in the <head>, there's no problem at all, and everything works well.
What could be causing this error, and how am I supposed to fix it? If this is the expected behaviour of tinyMCE, what is the correct way to dynamically load its js file for the scenario such as I am working on?
I'm trying to load TinyMCE dynamically like so (on clicking a button):
$.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);
});
With this configuration, tinyMCE fails to initialize. In the console I see several 404 errors, each with a message like this:
Failed to load: /path/to/mce4/plugins/textcolor/plugin.js
Sure on checking in the console the JS file tinymce.min.js loads correctly. Also, the /path/to/mce4/plugins/textcolor/plugin.js does not exist. But /path/to/mce4/plugins/textcolor/plugin.min.js exists, and this is true for all the js files involved (i.e. the .min.js files are there, but tinyMCE for whatever reason is looking for the .js files).
Now, when I load tinyMCE in a script tab in the <head>, there's no problem at all, and everything works well.
What could be causing this error, and how am I supposed to fix it? If this is the expected behaviour of tinyMCE, what is the correct way to dynamically load its js file for the scenario such as I am working on?
Share Improve this question edited Jan 14, 2017 at 10:31 Ifedi Okonkwo asked Jun 25, 2016 at 17:55 Ifedi OkonkwoIfedi Okonkwo 3,6665 gold badges35 silver badges45 bronze badges2 Answers
Reset to default 3If you are using angular2+ with angular-cli, following might help you.
Lets say you want to add a plugin named autoresize. Check if this plugin is present in node_modules/tinymce/plugins. If yes, do following:
1.In angular-cli.json:
"styles": [
"../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",
"styles.css"
],
2.In the intializing ponent:
tinymce.init({
...
plugins: ['link', 'paste', 'table','**autoresize**'],
autoresize_bottom_margin: 50,//this is plug in requirement
...
});
I can not tell you what is wrong with your code, but this works for me (TinyMCE 4.x)
I put the path to tinymce.min.js like this:
<script src="/tinymce/tinymce.min.js"></script>
So it loads with the page load. Not to be loaded dynamically.
Then I made a function defined:
function IactivateMCE() {
tinymce.init({
selector: "div.c10",
code continue
})
}
Then I made a onclick that run: IactivateMCE() AFTER the dynamic content had been added to the site ( I have a function that first add dynamic content to the site, then initialize TinyMCE).
Hope this can benefit you :-)