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

Question

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

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` — Hrant Khachatrian, Jun 02 '11 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 '14 at 07:19

score 101 · Answer 1 · answered Mar 19 '13 at 13:55

101

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.

answered Mar 19 '13 at 13:55

Rakesh

1,336
2
11
13

22

Tested in latest 4.0b1 version - working! Also, I had to add tinyMCE.suffix = '.min'; – dikirill Apr 16 '13 at 19:19
7

In version 4.0.16 don't add a trailing slash. – Daniel W. Feb 19 '14 at 15:44
Could not find this documented anywhere. Am I missing something or did the only way to learn this involve digging through source code? – Isaac Betesh May 05 '17 at 18:02
2

Still working as of `4.6.6`. Just set `tinymce.baseURL = '/path/to/tinymce';` before `tinymce.init({...});` http://archive.tinymce.com/wiki.php/api4:property.tinymce.EditorManager.baseURL.static – Daerik Sep 15 '17 at 17:08
1

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 '19 at 10:17
This is still a valid answer for version 5.6 – Tidy Nov 25 '20 at 01:53
1

With `6.0.0` the key has changed to `base_url: '/dist/tinymce'`. – Tobi G. Apr 15 '22 at 16:18

score 9 · Answer 2 · edited Jun 20 '20 at 09:12

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

The only thing that worked for me. `document_base_url` and `relative_urls` seemed to do nothing. — Marcos Lima, Jan 13 '16 at 16:47

score 9 · Answer 3 · answered Jun 09 '11 at 09:02

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.

answered Jun 09 '11 at 09:02

Stefaan Colman

3,715
2
22
11

3

`var tinyMCEPreInit` may have to be `window.tinyMCEPreInit` – huyz Dec 21 '12 at 04:48

DarthJDG · Answer 4 · 2011-06-02T15:24:58.677

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/

edited Jun 02 '11 at 15:24

answered Jun 02 '11 at 15:17

DarthJDG

16,511
11
49
56

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 :) ) – Hrant Khachatrian Jun 02 '11 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 – Hrant Khachatrian Jun 02 '11 at 16:34
@Hrant Khachatrian: You php should look something like this: `$('textarea').tinymce({ script_url: '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 02 '11 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. – Hrant Khachatrian Jun 02 '11 at 16:59

score 2 · Answer 5 · answered Oct 22 '15 at 07:18

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

score 2 · Answer 6 · answered Aug 11 '16 at 15:35

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

answered Aug 11 '16 at 15:35

cleison

1,425
1
13
14

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

6 Answers6