URL conversion example

This example shows you how to setup TinyMCE to produce different results for its URLs in images and links. You can read more about these config options in the TinyMCE FAQ.

Absolute URLs on links and images

  • 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/docs/demo/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:14px }'
});

Absolute URLs and including domain on links and images

  • 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/docs/demo/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:14px }'
});

Relative URLs on links and images

  • 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/docs/demo/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:14px }'
});

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/docs/demo/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:14px }'
});

No URL conversion

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="url-conversion-none">
  <p>Some relative urls: <a href="https://www.tiny.cloud/docs/demo">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/docs/demo">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:14px }'
});