云策 WordPress 开发者社区

块编辑器开发文档

Sandbox

查看官方原文 ↗
💡 云策文档标注

概述

Sandbox 组件通过 iframe 提供一个隔离环境，用于安全渲染任意 HTML 内容。它支持自定义 HTML、脚本、样式等属性，适用于 WordPress 开发中的沙盒场景。

关键要点

  • 组件通过 iframe 实现 HTML 内容的隔离渲染，确保安全性。
  • 支持传入 html、scripts、styles 等 props 来定制 iframe 文档内容。
  • 提供 title、type、tabIndex 等属性控制 iframe 的标题、CSS 类和可访问性。
  • 包含 onFocus 回调函数，用于处理 iframe 的焦点事件。

代码示例

import { SandBox } from '@wordpress/components';

const MySandBox = () => (
    <SandBox html="<p>Content</p>" title="SandBox" type="embed" />
);

注意事项

  • 所有 props 均为可选，未提供时使用默认值（如空字符串或空数组）。
  • scripts 和 styles props 分别用于注入脚本和 CSS，需确保 URL 或字符串格式正确。
📄 原文内容

This component provides an isolated environment for arbitrary HTML via iframes.

Usage

import { SandBox } from '@wordpress/components';

const MySandBox = () => (
    <SandBox html="<p>Content</p>" title="SandBox" type="embed" />
);

Props

html: string

The HTML to render in the body of the iframe document.

  • Required: No
  • Default: “”

onFocus: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ]

The onFocus callback for the iframe.

  • Required: No

scripts: string[]

An array of script URLs to inject as <script> tags into the bottom of the <body> of the iframe document.

  • Required: No
  • Default: []

styles: string[]

An array of CSS strings to inject into the <head> of the iframe document.

  • Required: No
  • Default: []

title: string

The <title> of the iframe document.

  • Required: No
  • Default: “”

type: string

The CSS class name to apply to the <html> and <body> elements of the iframe.

  • Required: No
  • Default: “”

tabIndex: HTMLElement[ 'tabIndex' ]

The tabindex the iframe should receive.

  • Required: No