URL handling options

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

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

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="url-conversion-relative-1">
  <p>Some relative urls: <a href="../index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>Some absolute urls: <a href="https://www.tiny.cloud/index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>
tinymce.init({
  selector: '#url-conversion-relative-1',
  height: 300,
  plugins: 'link image code',
  relative_urls: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Example: relative URLs on links and images to a specific page

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="url-conversion-relative-2">
  <p>Some relative urls: <a href="../index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>Some absolute urls: <a href="https://www.tiny.cloud/index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>
tinymce.init({
  selector: '#url-conversion-relative-2',
  height: 300,
  plugins: 'link image code',
  relative_urls: true,
  document_base_url: '//www.tiny.cloud/docs/demo',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Absolute URLs

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

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

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="url-conversion-absolute-1" name="absurls">
  <p>Some relative urls: <a href="../index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>Some absolute urls: <a href="https://www.tiny.cloud/index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>
tinymce.init({
  selector: '#url-conversion-absolute-1',
  height: 300,
  plugins: 'link image code',
  relative_urls: false,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="url-conversion-absolute-2" name="absurls">
  <p>Some relative urls: <a href="../index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>Some absolute urls: <a href="https://www.tiny.cloud/index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>
tinymce.init({
  selector: '#url-conversion-absolute-2',
  height: 300,
  plugins: 'link image code',
  relative_urls: false,
  remove_script_host: false,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

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.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  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 options

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 value: '#bottom'

Example of custom value

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

Example of disabling

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  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 value: '#top'

Example of custom value

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

Example of disabling

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

URL conversion and correction

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="url-conversion-none">
  <p>Some relative urls: <a href="../index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>Some absolute urls: <a href="https://www.tiny.cloud/index.html">content</a>. <img src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>
tinymce.init({
  selector: '#url-conversion-none',
  height: 300,
  plugins: 'link image code',
  convert_urls: false,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

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 URL handling options page 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',  // change this value according to your HTML
  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',  // change this value according to your HTML
  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 is the URL string to convert.

  • node is 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).

  • on_save is always set to true.

  • name is 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: Function

Example: using urlconverter_callback

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

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

Set whether TinyMCE should prepend a http:// prefix if the supplied URL does not contain a protocol prefix.

  • false: Users are prompted to prepend http:// when the URL entered starts with www and does not have a protocol. Other URLs are added without prompt.

  • true: URLs are assumed to be external. Users are prompted to prepend a http:// prefix when the protocol is not specified.

  • 'http': URLs are assumed to be external. URLs without a protocol prefix are prepended a http:// prefix.

  • 'https': URLs are assumed to be external. URLs without a protocol prefix are prepended a https:// prefix.

Type: Boolean or String

Default value: false

Possible values: true, false, 'http', 'https'

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

This option allows you to set a default protocol for links when inserting/editing a link via the link dialog. The protocol will apply to any links where the protocol has not been specified and the prefix prompt has been accepted.

Type: String

Default value: 'https'

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'link',
  toolbar: 'link',
  link_default_protocol: 'http'
});