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.
<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 }'
});
<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 }'
});
<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 }'
});
<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 }'
});
<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 }'
});
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.