URL 处理选项

将URL转换为相对路径、绝对路径或包含域名的绝对路径

相对URL

这将把同一域名内的所有URL转换为相对URL。URL将相对于document_base_url。

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的HTML
  relative_urls: true,
  document_base_url: 'http://www.example.com/path1/'
});

示例：http://www.example.com/path1/path2/file.htm >> path2/file.htm

示例：链接和图像上的相对URL

HTML

<textarea id="url-conversion-relative-1">
  <p>一些相对URL：<a href="../index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>一些绝对URL：<a href="https://www.tiny.cloud/index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>

JS

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

示例：链接和图像指向特定页面的相对URL

HTML

<textarea id="url-conversion-relative-2">
  <p>一些相对URL：<a href="../index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>一些绝对URL：<a href="https://www.tiny.cloud/index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>

JS

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

绝对URL

这将把所有相对URL转换为绝对URL。URL将基于document_base_url的绝对路径。

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的HTML
  relative_urls: false,
  remove_script_host: true,
  document_base_url: 'http://www.example.com/path1/'
});

示例：path2/file.htm >> /path1/path2/file.htm

示例：链接和图像上的绝对URL

HTML

<textarea id="url-conversion-absolute-1" name="absurls">
  <p>一些相对URL：<a href="../index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>一些绝对URL：<a href="https://www.tiny.cloud/index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>

JS

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

示例：绝对URL并在链接和图像上包含域名

HTML

<textarea id="url-conversion-absolute-2" name="absurls">
  <p>一些相对URL：<a href="../index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>一些绝对URL：<a href="https://www.tiny.cloud/index.html">内容</a>。<img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>

JS

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

包含域名的绝对URL

这将把所有相对URL转换为绝对URL。URL将基于document_base_url并包含域名。

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的HTML
  relative_urls: false,
  remove_script_host: false,
  document_base_url: 'http://www.example.com/path1/'
});

示例：path2/file.htm >> http://www.example.com/path1/path2/file.htm

锚点选项

anchor_bottom

允许您为URL自动补全下拉菜单中的底部锚点指定自定义名称。若要禁用下拉菜单中的底部锚点，请将其设置为false。

类型：String

默认值：'#bottom'

自定义值示例

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的HTML
  anchor_bottom: '#mybottom'
});

禁用示例

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的HTML
  anchor_bottom: false
});

anchor_top

允许您为url自动补全下拉菜单中的顶部锚点指定一个自定义名称。要禁用下拉菜单中的顶部锚点，请将其设置为 false。

类型： String

默认值： '#top'

自定义值示例

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

禁用示例

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

URL转换与修正

allow_script_urls

启用此选项将允许在链接和图片中使用 javascript: urls。出于安全考虑，此选项默认为禁用，以防止通过从一个网站粘贴内容到另一个网站来注入脚本。如果您仍然想要启用此选项，只需将其设置为 true。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 allow_script_urls

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

convert_urls

此选项允许您控制TinyMCE是否智能地恢复URL为其原始值。默认情况下，URL会自动转换（可能被篡改），因为浏览器的内置逻辑就是这样工作的。除非您将其存储起来，否则无法获取真实的URL。如果您将此选项设置为 false，它将尝试保持这些URL不变。此选项默认设置为 true，这意味着URL将被强制为 绝对 或 相对 形式，具体取决于 relative_urls 的状态。

类型： Boolean

默认值： true

可能的值： true, false

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

交互式示例：不进行URL转换

HTML

<textarea id="url-conversion-none">
  <p>一些相对URL: <a href="../index.html">内容</a>。 <img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
  <p>一些绝对URL: <a href="https://www.tiny.cloud/index.html">内容</a>。 <img src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="Tiny Logo" width="128" height="128"></p>
</textarea>

JS

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

此选项指定文档中所有相对URL的基本URL。默认值是当前文档的目录。如果提供了值，它必须指定一个目录（而非文档），并且必须以 / 结尾。

此选项还与 relative_urls、remove_script_host 和 convert_urls 选项相互作用，以确定TinyMCE返回的是相对URL还是绝对URL。URL处理选项页面提供了有关如何使用相对URL和绝对URL的详细描述和示例。

类型： String

示例：使用 document_base_url

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

relative_urls

对于与包含TinyMCE编辑器的页面具有相同域的URL。如果设置为：

• true — TinyMCE中创建的所有URL都将转换为相对于 document_base_url 的链接。

• false — 所有URL都将转换为绝对URL。

类型： Boolean

默认值： true

可能的值： true, false

示例：使用 relative_urls

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

remove_script_host

当 relative_urls 选项设置为 false 时使用此选项，且仅适用于与 document_base_url 相同域的链接。

如果此选项设置为 true，则相对链接将 排除 document_base_url 的协议和主机部分。

如果此选项设置为 false，则相对链接将 添加 document_base_url 的协议和主机部分。

类型： Boolean

默认值： true

可能的值： true, false

示例：使用 remove_script_host

当 remove_script_host 设置为 true 时，例如：

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

添加一个相对URL如 test.html，编辑器会将该URL转换为：/path1/test.html。

当 remove_script_host 设置为 false 时，例如：

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

添加一个相对 URL 如 test.html，编辑器会将其转换为：http://www.example.com/path1/test.html。

urlconverter_callback

此选项允许您添加自定义的 URL 转换逻辑。该选项应包含一个 JavaScript 函数名称。

转换函数的格式为：URLConverter(url, node, on_save)，其中：

• url 是要转换的 URL 字符串。

• node 是包含要转换的 URL 的元素（如果 URL 没有对应元素，此参数可设为 null）。

• on_save 始终设置为 true。

• name 是被设置的属性名称。

此函数应返回转换后的 URL 字符串。此选项默认设置为 TinyMCE 的内部函数 convertURL()。您可以从扩展中调用此函数以使用内置的转换选项。

类型： Function

示例：使用 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;
  }
});

超链接（link）相关的 URL 处理选项

link_assume_external_targets

设置当提供的 URL 不包含协议前缀时，TinyMCE 是否应添加 http:// 前缀。

• false：当输入的 URL 以 www 开头且没有协议时，提示用户添加 http://。其他 URL 直接添加。

• true：URL 被视为外部链接。当未指定协议时，提示用户添加 http:// 前缀。

• 'http'：URL 被视为外部链接。没有协议前缀的 URL 将添加 http:// 前缀。

• 'https'：URL 被视为外部链接。没有协议前缀的 URL 将添加 https:// 前缀。

类型： Boolean 或 String

默认值： false

可能的值： true，false，'http'，'https'

示例：使用 link_assume_external_targets

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

link_default_protocol

此选项允许您设置链接的默认协议，当通过链接对话框插入/编辑链接时生效。该协议将应用于所有未指定协议且用户接受了前缀提示的链接。

类型： String

默认值： 'https'

示例：使用 link_default_protocol

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