TinyMCE Paths, How to specify where to load things like editor_plugin.js
JqueryTinymceGoogle ClosureJquery Problem Overview
I installed TinyMCE, everything was working great. I then used Google Closure to package my site's JavaScript along with TinyMCE_src
The problem I'm having is that TinyMCE is now making calls to:
plugins/paste/editor_plugin.js
themes/advanced/editor_template.js
langs/en.js
And that paths that are being used are invalid, they are 404'ing
How can I tell TinyMCE where to go to get these files?
I tried:
relative_urls : false,
document_base_url : "http://www.site.com/path1/",
But they have no effect on the files above.
Advise? Thanks
Jquery Solutions
Solution 1 - Jquery
I had the same issue, and it could have been solved easily if we were able to specify the base url using the document_base_url.
Alternatively, I was able to specify the base url before initializing tinymce.
tinyMCE.baseURL = "URL_TO/tinymce/jscripts/tiny_mce/";// trailing slash important
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
TinyMCE is working fine now.
Solution 2 - Jquery
You can override the base url for tinyMCE by placing the following code before initializing tinyMCE.
var tinyMCEPreInit = {
suffix: '',
base: '/tinymce/',
query: ''
};
This is usefull if you already loaded tinyMCE from a merged source and the base path isn't correctly found.
Solution 3 - Jquery
According this: http://www.tinymce.com/wiki.php/Configuration:theme_url
tinymce.init({
...
theme_url: (document.location.pathname + '/js/tinymce/themes/modern/theme.js').replace("\/\/", "\/"),
skin_url: (document.location.pathname + '/js/tinymce/skins/lightgray/').replace("\/\/", "\/"),
...
But, need to be carefull with paths. With help document.location.pathname
I've got project root directory. Replace function need for replacing double slash with single slash, because different server can return "...//server/site" OR "...//server/site/" and it can be:
"...//server/site/js..." OR "...//server/site//js...".
Solution 4 - Jquery
If you're using the TinyMCE jQuery plugin, you can load everything from a remote location, just add the script_url
parameter into your init code. It will load everything from there, including any scripts/images/etc.
$('textarea').tinymce({
script_url: 'http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js'
});
Check out this fiddle, it's including the whole thing remotely from the TinyMCE website: http://jsfiddle.net/xgPzS/22/
Solution 5 - Jquery
As per TinyMCE 4.x documentation you can specify the document base url during init.
tinymce.init({
document_base_url: "http://www.example.com/path1/"
});
if you are using CodeIgniter, simply use base_url()
tinymce.init({
document_base_url: "<?php echo base_url() ?>"
});
Remember: relative_url
must be true in order to work it perfectly otherwise you will get absolute URLS.
For more details: http://www.tinymce.com/wiki.php/Configuration:document_base_url
Solution 6 - Jquery
Bundle everything using grunt (instructions on github) then you will just have to configure from where to load all the css using the option skin_url
tinymce.init({skin_url: window.location.origin + '/css/tinymce'})