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

<textarea id="url-conversion-absolute-1" name="absurls" cols="85" rows="10"><p>Some relative urls: <a href="example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
  <p>Some absolute urls: <a href="https://archive.tinymce.com/examples/example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
</textarea>

tinymce.init({
  selector: '#url-conversion-absolute-1',
  height: 230,
  plugins: 'link image code',
  relative_urls: false,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});

Absolute URLs and including domain on links and images

<textarea id="url-conversion-absolute-2" name="absurls" cols="85" rows="10">
  <p>Some relative urls: <a href="example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
  <p>Some absolute urls: <a href="https://archive.tinymce.com/examples/example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
</textarea>

tinymce.init({
  selector: '#url-conversion-absolute-2',
  height: 230,
  plugins: 'link image code',
  relative_urls: false,
  remove_script_host: false,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});

Relative URLs on links and images

<textarea id="url-conversion-relative-1">
  <p>Some relative urls: <a href="example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
  <p>Some absolute urls: <a href="https://archive.tinymce.com/examples/example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
</textarea>

tinymce.init({
  selector: '#url-conversion-relative-1',
  height: 230,
  plugins: 'link image code',
  relative_urls: true,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});

Relative URLs on links and images to a specific page

<textarea id="url-conversion-relative-2">
  <p>Some relative urls: <a href="example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
  <p>Some absolute urls: <a href="https://archive.tinymce.com/examples/example_08.php">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
</textarea>

tinymce.init({
  selector: '#url-conversion-relative-2',
  height: 230,
  plugins: 'link image code',
  relative_urls: true,
  document_base_url: '//www.tiny.cloud/demo/',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});

No URL conversion

<textarea id="url-conversion-none">
  <p>Some relative urls: <a href="https://www.tiny.cloud/docs/demo">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
  <p>Some absolute urls: <a href="https://www.tiny.cloud/docs/demo">content</a>. <img src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="10%" /></p>
</textarea>

tinymce.init({
  selector: '#url-conversion-none',
  height: 230,
  plugins: 'link image code',
  convert_urls: false,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});