60

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

2
  • in my case, I didn't use anything like "Google Closure". Just wanted to load TinyMCEs dynamically. I'm using jquery.tinymce.js. When I load the TinyMCE, Firebug gives errors, where it is obvious that JQuery is trying to load smth like /_cms/products//langs/en.js instead of /tinymce/langs/en.js Jun 2, 2011 at 15:07
  • I encountered the same problem when bundeling my javascript files. WHen looking at the TinyMce source it seens it has a few different ways to find the base adress to load its modules. One of them is to look in hte dom for the adress that is used to include tiny_mce.js. This obviosly fails when including the file in a bundle. I fixed the problem by adding tinyMCE.baseURL before my tinyMCE.init.
    – Andreas R
    Jun 26, 2014 at 7:19

6 Answers 6

103

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.

8
  • 23
    Tested in latest 4.0b1 version - working! Also, I had to add tinyMCE.suffix = '.min';
    – dikirill
    Apr 16, 2013 at 19:19
  • 8
    In version 4.0.16 don't add a trailing slash.
    – Daniel W.
    Feb 19, 2014 at 15:44
  • 2
    Still working as of 4.6.6. Just set tinymce.baseURL = '/path/to/tinymce'; before tinymce.init({...}); archive.tinymce.com/wiki.php/…
    – Daerik
    Sep 15, 2017 at 17:08
  • 2
    Still working in 4.9.1 - I had to use both tinymce.baseURL = "/path/to/tinymce"; and tinyMCE.suffix = '.min'; to make it work
    – Riz
    Sep 26, 2019 at 10:17
  • 1
    With 6.0.0 the key has changed to base_url: '/dist/tinymce'.
    – Tobi G.
    Apr 15, 2022 at 16:18
9

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.

1
  • 3
    var tinyMCEPreInit may have to be window.tinyMCEPreInit
    – huyz
    Dec 21, 2012 at 4:48
9

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...".

1
  • The only thing that worked for me. document_base_url and relative_urls seemed to do nothing. Jan 13, 2016 at 16:47
5

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/

4
  • 1
    doesn't help :( Can't figure out what's the reason, but JQuery doesn't call to valid URL. Instead of giving 404 I print the requested URL ($_SERVER['REQUEST_URI']) and Firebug shows the following error: invalid regular expression flag p /_cms/products//themes/simple/editor_template.js (because of the / JQuery thinks it's a regexp :) ) Jun 2, 2011 at 16:22
  • It's not JS, it's the reply from server :) The server just prints the URL that JQuery is trying to reach! JQuery "waits for" JS code, but the JS does not exist in the URL it's requesting Jun 2, 2011 at 16:34
  • @Hrant Khachatrian: You php should look something like this: $('textarea').tinymce({ script_url: '<?php echo $whatever_variable_with_your_script_path; ?>subdirectory/whatever.js' }); If you do that, the generated HTML that's sent to your browser will contain the correct path to the script. Note the string wrapping quotes before and after the php tag.
    – DarthJDG
    Jun 2, 2011 at 16:41
  • the path is correct for sure. I've also tried your suggestion (script_url points to tinymce.moxiecode.com), but the error remains. In fact it seems I've found the reason of this problem... After double-checking I'll post it here. Jun 2, 2011 at 16:59
2

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

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.