# 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 (
    <>
    <div ></div>
      <iframe
      
        ref={iframeRef}
        src={`${window.location.origin}?index=${index}`}
        style={{
          height: '400px',
          width: '50vw',
          display: 'inline-block',
          border: 'none'
        }}
        onLoad={iframeLoad}
      />
    </>
  );
};
export default App;

```