TinyMCE Paths, How to specify where to load things like editor_plugin.js

JqueryTinymceGoogle Closure

Jquery 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'})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnApprenticeView Question on Stackoverflow
Solution 1 - JqueryRakeshView Answer on Stackoverflow
Solution 2 - JqueryStefaan ColmanView Answer on Stackoverflow
Solution 3 - JqueryChaki_BlackView Answer on Stackoverflow
Solution 4 - JqueryDarthJDGView Answer on Stackoverflow
Solution 5 - JqueryAdnanView Answer on Stackoverflow
Solution 6 - JquerycleisonView Answer on Stackoverflow