URL conversion example

发布于 2019-05-06 字数21031 浏览 802 评论 0

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" 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 external-link="true" external-link="true" external-link="true" external-link="true" 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'
  ]
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { 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’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “url-conversion-absolute-1”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22url-conversion-absolute-1%22%20name=%22absurls%22%20cols=%2285%22%20rows=%2210%22%3E%3Cp%3ESome%20relative%20urls:%20%3Ca%20href=%22example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%20%20%3Cp%3ESome%20absolute%20urls:%20%3Ca%20href=%22https://archive.tinymce.com/examples/example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’#url-conversion-absolute-1′,%0A%20%20height:%20230,%0A%20%20plugins:%20’link%20image%20code’,%0A%20%20relative_urls:%20false,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20]%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_url-conversion-absolute-1”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

Absolute URLs and including domain on links and images

TinyMCE HTML JS Edit on CodePen


<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 external-link="true" external-link="true" external-link="true" external-link="true" 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'
  ]
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { 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’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “url-conversion-absolute-2”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22url-conversion-absolute-2%22%20name=%22absurls%22%20cols=%2285%22%20rows=%2210%22%3E%0A%20%20%3Cp%3ESome%20relative%20urls:%20%3Ca%20href=%22example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%20%20%3Cp%3ESome%20absolute%20urls:%20%3Ca%20href=%22https://archive.tinymce.com/examples/example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’#url-conversion-absolute-2′,%0A%20%20height:%20230,%0A%20%20plugins:%20’link%20image%20code’,%0A%20%20relative_urls:%20false,%0A%20%20remove_script_host:%20false,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20]%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_url-conversion-absolute-2”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

Relative URLs on links and images

TinyMCE HTML JS Edit on CodePen


<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 external-link="true" external-link="true" external-link="true" external-link="true" 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'
  ]
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { 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’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “url-conversion-relative-1”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22url-conversion-relative-1%22%3E%0A%20%20%3Cp%3ESome%20relative%20urls:%20%3Ca%20href=%22example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%20%20%3Cp%3ESome%20absolute%20urls:%20%3Ca%20href=%22https://archive.tinymce.com/examples/example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’#url-conversion-relative-1′,%0A%20%20height:%20230,%0A%20%20plugins:%20’link%20image%20code’,%0A%20%20relative_urls:%20true,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20]%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_url-conversion-relative-1”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

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="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 external-link="true" external-link="true" external-link="true" external-link="true" 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'
  ]
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { 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’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “url-conversion-relative-2”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22url-conversion-relative-2%22%3E%0A%20%20%3Cp%3ESome%20relative%20urls:%20%3Ca%20href=%22example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%20%20%3Cp%3ESome%20absolute%20urls:%20%3Ca%20href=%22https://archive.tinymce.com/examples/example_08.php%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’#url-conversion-relative-2′,%0A%20%20height:%20230,%0A%20%20plugins:%20’link%20image%20code’,%0A%20%20relative_urls:%20true,%0A%20%20document_base_url:%20’//www.tiny.cloud/demo/’,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20]%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_url-conversion-relative-2”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

No URL conversion

TinyMCE HTML JS Edit on CodePen


<textarea id="url-conversion-none">
  <p>Some relative urls: <a external-link="true" external-link="true" 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 external-link="true" external-link="true" 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'
  ]
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { 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’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “url-conversion-none”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22url-conversion-none%22%3E%0A%20%20%3Cp%3ESome%20relative%20urls:%20%3Ca%20href=%22https://www.tiny.cloud/docs/demo%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%20%20%3Cp%3ESome%20absolute%20urls:%20%3Ca%20href=%22https://www.tiny.cloud/docs/demo%22%3Econtent%3C/a%3E.%20%3Cimg%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%2210%25%22%20/%3E%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’#url-conversion-none’,%0A%20%20height:%20230,%0A%20%20plugins:%20’link%20image%20code’,%0A%20%20convert_urls:%20false,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20]%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_url-conversion-none”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!