# iframe-wangeditor **Repository Path**: wangxiao-xiao/iframe-wangeditor ## Basic Information - **Project Name**: iframe-wangeditor - **Description**: 使用iframe 引用 写好的富文本 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-05-09 - **Last Updated**: 2024-11-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, iframe, 富文本 ## README yarn build 打包 生成html 引用打包后的文件 html 使用 ``` import React, { useRef } from 'react'; // type value = HTMLDivElement.innerHTML = '<>1<>' // type index = string | Number // type onBlur = ( html , text)=>void const App = props => { const { value, onBlur, index } = props; const iframeRef = useRef(null); const iframeLoad = e => { var iframe = iframeRef.current; iframe.contentWindow.postMessage({ action: 'value' + index, data: value }, '*'); console.log('加载完毕', index, value); }; if (typeof window.addEventListener != 'undefined') { window.addEventListener('message', dealMessage, false); } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onmessage', dealMessage); } const flag = useRef(true); // 处理消息的回调函数 function dealMessage(e) { if (e.data?.action === 'get' && e.data?.text && e.data?.html !== value && index == e.data?.index) { if (flag.current) { flag.current = false; // 传达参数 onBlur(e.data?.html, e.data?.text); setTimeout(() => { flag.current = true; }, 100); } } } return ( <>
> ); }; export default App; ```