---
title: "MoxieManager integration"
description: "Integrate MoxieManager with TinyMCE and other systems."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/moxiemanager-integration/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/moxiemanager-integration/index.md"
version: "latest"
last_updated: "2026-11-12T00:18:41Z"
tokens: 2675
---
# MoxieManager integration

Ok, so you have tested it on your server and have made sure it works, time to integrate it with whatever system you might be using.

This is really the part that can be somewhat tricky, certain system require specific Authenticators or custom Authenticators in order to work properly. It can be especially tricky if you system has some custom managment of Sessions.

## TinyMCE integration

MoxieManager picks up certain [config options](#tinymce-integration) when integrated into TinyMCE.

These are setting you should **set in your TinyMCE configuration** in order to get the setup you want. See below for examples!

If you are using [moxman.browse, check these API docs](../moxiemanager-api/).

**Name:** `moxiemanager_<type>_settings`

**Description:**

Configure seperate options for image, media or link dialog, change <type> to either **image**, **file** or **media**. Example Config.

```js
moxiemanager_image_settings : {
 view : 'thumbs',
 extensions : 'jpg,png,gif'
}
```
This will override any "global" settings.

**Name:** `moxiemanager_path` · **Description:** Public file system path to display by default. For example: `/files/images`

**Name:** `moxiemanager_rootpath` · **Description:** Public file system path to use as the root. This option needs to be within the configured backend `filesystem.rootpath` for security reasons. For example: `/files/images` if the server side rootpath is `/root/site/files`.

**Name:** `moxiemanager_view` · **Description:** Default depends on what dialog in TinyMCE it is opened from, image insert dialog = thumbs, link insert dialog = files. Can be either `files` or `thumbs`.

**Name:** `moxiemanager_insert` · **Description:** Boolean option that allows you to disable the insert toolbar, but clicking image still works. Note: Option might change behaviour in the future.

**Name:** `moxiemanager_filter` · **Description:** Initial filter to apply to file selection. This option will fill the filter input field with the value specified.

**Name:** `moxiemanager_extensions` · **Description:** Comma separated list of file extensions to display for.

**Name:** `moxiemanager_include_file_pattern` · **Description:** Regexp pattern that the files need to match inorder to be displayed.

**Name:** `moxiemanager_exclude_file_pattern` · **Description:** Regexp pattern that will be excluded from file list if it matches.

**Name:** `moxiemanager_include_directory_pattern` · **Description:** Regexp pattern that the directories need to mathc inorder to be displayed.

**Name:** `moxiemanager_exclude_directory_pattern` · **Description:** Regexp pattern that will be exluded from file list if it matches.

**Name:** `moxiemanager_disabled_tools` · **Description:** Comma separated list of tools to disable. Check out [moxiemanager_filelist_main_toolbar](../moxiemanager-options/#filelist-main-toolbar) for configuring this instead in newer versions.

**Name:** `moxiemanager_hidden_tools` · **Description:** Comma separated list of tools to hide. Check out [moxiemanager_filelist_main_toolbar](../moxiemanager-options/#filelist-main-toolbar) for configuring this instead in newer versions.

**Name:** [moxiemanager_image_template](../moxiemanager-options/#moxiemanager-image-template) · **Description:** HTML template used when inserting images directly into TinyMCE using the browse button.

**Name:** [moxiemanager_file_template](../moxiemanager-options/#moxiemanager-file-template) · **Description:** HTML template used when inserting non image files directly into TinyMCE using the browse button.

**Name:** `moxiemanager_width` · **Description:** Set the width of the window, a low value may break the UI.

**Name:** `moxiemanager_height` · **Description:** Set the height of the window, a low value may break the UI.

**Name:** `moxiemanager_fullscreen` · **Description:** Boolean value, true if you wish the window to max width/height.

**Name:** `moxiemanager_title` · **Description:** Sets the title of the main window, replaces "MoxieManager".

**Name:** `moxiemanager_leftpanel` · **Description:** Boolean value, true by default. Show or hide the left filesystems panel.

**Name:** [moxiemanager_date_format](../moxiemanager-options/#date-format) · **Description:** Enables you to specify a date format to be used when inserting files.

**Name:** [moxiemanager_insert_filter](../moxiemanager-options/#insert-filter) · **Description:** Callback that enables you to filter the data before it gets inserted.

**Name:** `moxiemanager_skin` · **Description:** Enables you to set a custom skin to be used.

**Name:** `relative_urls` · **Description:** **TinyMCE Option**, if this option is set to true, TinyMCE will take the path returned from MoxieManager and make it relative.

**Name:** `document_base_url` · **Description:** **TinyMCE Option**, defaults to the current page. This is the point relative URLs will be relative to.

**Name:** `remove_script_host` · **Description:** **TinyMCE Option**, Enables you to remove scheme/protocol and host name from urls produced. So `relative_urls : false` and `remove_script_host : true` will get site absolute paths like `/my/files/here.jpg`

**Name:** [moxiemanager_unique_urls](../moxiemanager-options/#unique-urls) · **Description:** Appends an unique id to bust client side caches.

**Name:** [moxiemanager_filelist_main_toolbar](../moxiemanager-options/#filelist-main-toolbar) · **Description:** Enables you to control what to display in the main toolbar of the filelist browse dialog.

**Name:** [moxiemanager_filelist_utils_toolbar](../moxiemanager-options/#filelist-utils-toolbar) · **Description:** Enables you to control what to display in the utils toolbar of the filelist browse dialog.

**Name:** [moxiemanager_filelist_manage_menu](../moxiemanager-options/#filelist-manage-menu) · **Description:** Enables you to configure what to display in the manage button menu.

**Name:** [moxiemanager_filelist_context_menu](../moxiemanager-options/#filelist-context-menu) · **Description:** Enables you to configure what to display in the context menu.

**Name:** [moxiemanager_filelist_insert_toolbar](../moxiemanager-options/#filelist-insert-toolbar) · **Description:** Enables you to configure what to display in the insert/cancel toolbar.

**Name:** [moxiemanager_editimage_main_toolbar](../moxiemanager-options/#editimage-main-toolbar) · **Description:** Enables you to control what to display in the main toolbar of the edit image dialog.

**Name:** [moxiemanager_editimage_zoom_toolbar](../moxiemanager-options/#editimage-zoom-toolbar) · **Description:** Enables you to control what to display in the zoom toobar of the edit image dialog.

**Name:** [moxiemanager_editimage_actions_toolbar](../moxiemanager-options/#editimage-actions-toolbar) · **Description:** Enables you to control what to display in the actions toolbar/pabel of the edit image dialog.

**Name:** [moxiemanager_remember_last_path](../moxiemanager-options/#remember-last-path) · **Description:** When enabled the MoxieManager will remember the last path the user was in when a file was selected.

**Name:** [moxiemanager_sort_by](../moxiemanager-options/#sort-by) · **Description:** Changes the default sort by column for file listings.

**Name:** [moxiemanager_sort_order](../moxiemanager-options/#sort-by) · **Description:** Changes the default sort order asc/desc.

**Name:** `moxiemanager_unique_urls` · **Description:** Appends an unique id to bust client side caches.

**Name:** `moxiemanager_upload_auto_close` · **Description:** Automatically closes the upload dialog if all files where successfully uploaded. Disabled by default.

### Examples

```js
tinymce.init({
  ...
  moxiemanager_rootpath : '/files/subfolder'
});
```
The rootpath must be within the rootpath set in config.php for security reasons.

```php
$moxieManagerConfig["filesystem.rootpath"] = "/www/site/files";
```
`moxiemanager_rootpath : '/files/subfolder'` is a valid config option if subfolder exists.

`moxiemanager_rootpath : '/othersite/files'` is NOT a valid config option.

```js
tinymce.init({
  ...
  relative_urls : false,
});
```
MoxieManager always returns an absolute URL to TinyMCE, then the TinyMCE options convert the urls. In this case, relative_urls is set to false, when you save in TinyMCE, the resulting path will be:

`/my/absolute/url.jpg`

Since remove_script_host is false by default.

```js
tinymce.init({
  ...
  relative_urls : false,
  remove_script_host : false
});
```
With this example, urls will be absolute WITH the site domain.

`http://www.mysite.com/my/absolute/url.jpg`

> **Note:** Note, lets say you have `admin.mysite.com`, you can configure `document_base_url : 'http://www.mysite.com'`
Then URLs should become just as above, and not `admin.mysite.com` absolute.

#### Basic integration

This is how you integrate the MoxieManager into TinyMCE.

```js
tinymce.init({
  selector: "textarea",
  plugins: "moxiemanager link image",
  toolbar: "insertfile link image",
  menubar: false
});
```
This is the most basic integration example.

#### Custom settings

These are some examples of custom settings that can be passed from TinyMCE to MoxieManager.

For more detailed info about configuration options, check out the [TinyMCE integration](#tinymce-integration) page.

```js
tinymce.init({
  selector: "textarea",
  plugins: "moxiemanager link image",
  toolbar: "insertfile link image",
  menubar: false,
  moxiemanager_file_settings: {
    /* Only list txt files, and remove side navigation. */
    moxiemanager_extensions : 'txt',
    moxiemanager_leftpanel : false
  },
  moxiemanager_image_settings: {
    /* Scope to different folder, show thumbnails of selected extensions */
    moxiemanager_title : 'Images',
    moxiemanager_extensions : 'jpg,png,gif',
    moxiemanager_rootpath : '/testfiles/testfolder',
    moxiemanager_view : 'thumbs'
  }
});
```

#### Using with CDN version of TinyMCE

In order to load MoxieManager, you need to run it with as an external plugin.

```js
tinymce.init({
  ...
  plugins: "moxiemanager link image",
  external_plugins: {
    "moxiemanager": "/moxiemanager/plugin.min.js"
  }
});
```

## Authentication integration

Setup Authentication to integrate with whatever system you might be using, read more in the [Security](../moxiemanager-security/) section.

## Wordpress integration

These instructions should work for any Wordpress version above 2.5.

1. Download the MoxieManager package from this website.
2. Unzip the package so the Wordpress structure looks like this: `/wp-includes/js/tinymce/plugins/moxiemanager`
3. Download [this Wordpress plugin package](../_attachments/moxiemanager/mce.zip) and unzip so the structure looks like this: `/wp-content/plugins/mce`
4. Login to Wordpress as administrator, activate the MoxieManager plugin.
5. Create a new post or page, the editor should now have an extra button, click it and follow the installation instructions, choose the SessionAuthenticator and leave the session name intact as isLoggedIn.
6. Continue and save the config and you are done, you might have to logout/login to Wordpress again for it to work.

If you have any issues, please use the support ticket system and we will try to assist you.