跨域资源共享相关选项

crossorigin

crossorigin 选项控制 TinyMCE 如何处理跨域资源加载。此选项接受一个函数，该函数根据正在加载的资源确定适当的 crossorigin 属性值。

类型： (url: string, resourceType: 'script' | 'stylesheet') => string

  • 对于 Tiny Cloud：一个函数，对于云资源返回 'anonymous'，对于其他资源则省略该属性。

  • 对于自托管版本：一个函数，对于所有资源都省略 crossorigin 属性。

可能的值：一个返回以下值之一的函数：

  • 'anonymous' - 设置 crossorigin="anonymous"。

  • 'use-credentials' - 设置 crossorigin="use-credentials"。

  • undefined - 完全省略 crossorigin 属性。

示例：基本配置

const crossOriginFunction = (url, resourceType) => {
    // 在这里返回 'anonymous' 或 'use-credentials' 将显式设置该属性
    return 'anonymous';
    // return 'use-credentials';
    // return undefined; // 通过返回 undefined 为所有资源省略 'crossorigin' 属性
};

tinymce.init({
  selector: "textarea",
  crossorigin: crossOriginFunction
});

当从 Tiny Cloud 加载 TinyMCE 时：

  • 初始 script 标签必须包含 crossorigin="anonymous" 和 referrerpolicy="origin"。

  • 示例：

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

  • crossorigin 函数针对 TinyMCE 加载的脚本和样式表都会运行。

  • 使用 'anonymous' 将发送不带凭据的 Origin 标头。

  • 使用 'use-credentials' 将发送带凭据的 Origin 标头（大多数情况下不推荐）。

  • 返回 undefined 表示不会设置 crossorigin 属性，因为该属性会为资源完全省略。

  • 对于样式表资源，content_css_cors 选项的优先级高于 crossorigin 函数。有关跨域样式表加载的详细信息，请参阅：content_css_cors。

有关 crossorigin 属性的更多详细信息，请参阅：MDN Web 文档 - HTML 属性：crossorigin。

referrer_policy

用于设置加载插件和 CSS 时发送的 referrer 信息级别。Referrer 策略可用于：

  • 提高最终用户的隐私性。

  • 协助服务器端过滤针对 TinyMCE 资源的跨域请求。

类型： String

有关有效的 referrer 策略（指令）列表，请参阅：MDN Web 文档 - Referrer-Policy。

示例：使用 referrer_policy

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  referrer_policy: 'origin'
});

content_css_cors

此选项已被标记为已弃用。它将在即将发布的 TinyMCE 9.0 版本中被完全移除。作为替代方案，我们建议改用 crossorigin。

当 content_css_cors 设置为 true 时，编辑器会在 StyleSheetLoader 加载 content_css 时使用的 link 标签上添加 crossorigin="anonymous" 属性。这允许您将 content_css 托管在与编辑器本身不同的服务器上。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 content_css_cors

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  content_css: 'http://www.somewhere.example/mycontent.css',
  content_css_cors: true
});

editimage_cors_hosts

由于浏览器对所谓的跨域 HTTP 请求施加了安全措施，图像编辑插件无法处理来自其他域的图像。要克服这些限制，必须在指定的域上显式启用跨域资源共享 (CORS)（有关更多信息，请查看 HTTP 访问控制）。

可以通过 editimage_cors_hosts 选项向 TinyMCE 提供一个支持（已启用 CORS）的图像域数组。

数组中的每个字符串必须采用 example.com 的格式。请勿在域中包含协议（例如 http://, https://）或任何尾部斜杠。
当通过 Tiny Cloud 启用此插件时，editimage_cors_hosts 是非必需的。

类型： Array

默认值： []

示例：editimage_cors_hosts

tinymce.init({
  selector: 'textarea',  // 根据您的HTML修改此值
  toolbar: 'editimage',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ]
});

export_cors_hosts

由于浏览器对所谓跨源 HTTP 请求实施了安全措施，Export 插件无法处理来自其他域的图片。为解决此限制，必须在指定域中明确启用跨源资源共享（CORS）（欲了解更多信息，请参阅 HTTP 访问控制）。

可以通过 export_cors_hosts 选项向 TinyMCE 提供支持 CORS 的图片域数组。

数组中的每个字符串必须采用 example.com 格式。请勿在域中包含协议（例如 http://, https://）或任何结尾斜杠。
若通过 Tiny Cloud 启用此插件，则无需设置 export_cors_hosts。

类型：Array

默认值：[]

示例：export_cors_hosts

tinymce.init({
  selector: 'textarea',  // 根据您的HTML修改此值
  toolbar: 'export',
  plugins: 'image export',
  export_cors_hosts: [ 'example.com', 'example.net' ]
});