Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

URL handling options

These settings affect the way URLs are handled by the editor.

Contribute to this page

Q: How do I convert my URLs to relative, absolute, or absolute with domain?

Relative URLs

This will convert all URLs within the same domain to relative URLs. The URLs will be relative from the document_base_url.

relative_urls : true,
document_base_url : 'http://www.example.com/path1/'

Example: http://www.example.com/path1/path2/file.htm » path2/file.htm

Absolute URLs

This will convert all relative URLs to absolute URLs. The URLs will be absolute based on the document_base_url.

relative_urls : false,
remove_script_host : true,
document_base_url : 'http://www.example.com/path1/'

Example: path2/file.htm » /path1/path2/file.htm

Domain absolute URLs

This will convert all relative URLs to absolute URLs. The URLs will be absolute based on the document_base_url with domain.

relative_urls : false,
remove_script_host : false,
document_base_url : 'http://www.example.com/path1/'

Example: path2/file.htm » http://www.example.com/path1/path2/file.htm

anchor_bottom

Lets you specify a custom name for the bottom anchor in the url type ahead drop down. To disable the bottom anchor from the drop down set it false.

Type: String

Default: #bottom

Example of custom value

tinymce.init({
  selector: 'textarea',
  anchor_bottom: '#mybottom'
});

Example of disabling

tinymce.init({
  selector: 'textarea',
  anchor_bottom: false
});

anchor_top

Lets you specify a custom name for the top anchor in the url type ahead drop down. To disable the to anchor from the drop down set it false.

Type: String

Default: #top

Example of custom value

tinymce.init({
  selector: 'textarea',
  anchor_top: '#mytop'
});

Example of disabling

tinymce.init({
  selector: 'textarea',
  anchor_top: false
});

allow_script_urls

Enabling this option will allow javascript: urls in links and images. This is disabled by default for security purposes so scripts can’t be injected by pasting contents from one site to another. If you still want to enable this option just set it to true.

Type: Boolean

Default Value: false

Possible Values: true, false

Example: Using allow_script_urls

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  allow_script_urls: true
});

convert_urls

This option enables you to control whether TinyMCE is to be smart and restore URLs to their original values. URLs are automatically converted (messed up) by default because the browser’s built-in logic works this way. There is no way to get the real URL unless you store it away. If you set this option to false it tries to keep these URLs intact. This option is set to true by default, which means URLs are forced to be either absolute or relative depending on the state of relative_urls.

Type: Boolean

Default Value: true

Possible Values: true, false

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  convert_urls: false
});

Interactive example: No URL conversion

document_base_url

This option specifies the base URL for all relative URLs in the document. The default value is the directory of the current document. If a value is provided, it must specify a directory (not a document) and must end with a /.

This option also interacts with the relative_urls, remove_script_host, and convert_urls options to determine whether TinyMCE returns relative or absolute URLs. The FAQ contains a thorough description and examples of working with relative and absolute URLs.

Type: String

Example: Using document_base_url

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  document_base_url: 'http://www.example.com/path1/'
});

relative_urls

For URLs with the same domain as the page containing the TinyMCE editor. If set to:

  • true — All URLs created in TinyMCE will be converted to a link relative to the document_base_url.
  • false — All URLs will be converted to absolute URLs.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using relative_urls

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  relative_urls: false
});

remove_script_host

This option is used if the relative_urls option is set to false and only applies to links with the same domain as the document_base_url.

If this option is set to true, the protocol and host of the document_base_url is excluded for relative links.

If this option is set to false, the protocol and host of the document_base_url is added for relative links.

Type: Boolean

Default Value: true

Possible Values: true, false

Examples: Using remove_script_host

When remove_script_host is set to true, such as:

tinymce.init({
  selector: 'textarea',
  document_base_url: 'http://www.example.com/path1/',
  relative_urls: false,
  remove_script_host: true
});

Adding a relative URL such as test.html, the editor will convert the URL to: /path1/test.html.

When remove_script_host is set to false, such as:

tinymce.init({
  selector: 'textarea',
  document_base_url: 'http://www.example.com/path1/',
  relative_urls: false,
  remove_script_host: false
});

Adding a relative URL such as test.html, the editor will convert the URL to: http://www.example.com/path1/test.html.

urlconverter_callback

This option enables you to add your own URL converter logic. This option should contain a JavaScript function name.

The format of the converter function is: URLConverter(url, node, on_save), where:

  • url = the URL string to convert,
  • node = the element that contains the URL that is to be converted (this parameter may be set to null if there is no element for the URL), and
  • on_save is always set to true.
  • name = the attribute name that is being set.

This function should return the converted URL as a string. This option is set to an internal TinyMCE function convertURL() by default. You may call this function from your extension in order to use the built-in convert options.

Type: Javascript Function

Example: Using urlconverter_callback

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  urlconverter_callback: function(url, node, on_save, name) {
    // Do some custom URL conversion
    url = url.substring(3);

    // Return new URL
    return url;
  }
});

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.