import { forwardRef, useRef } from 'react'; import Frame from 'react-frame-component'; export interface EditorRenderProps { onMount: (iframe: HTMLIFrameElement | null) => void; children?: React.ReactNode; } /** * 使用 HTML 来渲染编辑器。并在 HTML 有所变化时，调用更新函数。 * 为了保证纯净性，此函数将只考虑渲染 HTML 以及更新，与外部的所有交互无关。 */ export const EditorRender = forwardRef(({ onMount, children }, ref) => { const frameRef = useRef(null); // 初始化的 HTML 内容，如果有 HTML 所需的一些外部资源，可以在这里添加。但需要注意的是，导出时，需要将这些资源也导出。 const initialContent = `
`; return (
{ onMount(frameRef.current); }} sandbox="allow-scripts allow-same-origin allow-downloads allow-popups allow-top-navigation-by-user-activation allow-top-navigation-to-custom-protocols" head={ <> } >
{children}
); });