react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html

$ npx create-react-app my-app --template typescript

$ npm i grapesjs

<link rel="stylesheet" href="path/to/grapes.min.css" rel="external nofollow" >
<script src="path/to/grapes.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

import './App.css';
import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';
import { useState } from 'react';
import PresetPage from './views/PresetPage'
import EmailPage from './views/EmailPage'
import GrapesPage from './views/GrapesPage'
import  {sendEmail} from './service/sendEmailApi'
function App() {
  const [editType,setEditType]=useState('mjml');
  const changeEditype=(val:string)=>{
    setEditType(val)
  };
  return (
      <div className="App">
        <header className="App-header">
          <div style={{width:'50%',textAlign:'left',paddingLeft:'10px'}}>
              grapes web插件 对比
              <button style={{marginLeft:'20px'}} onClick={()=>changeEditype('grapejs')}>grapejs</button>
              <button style={{marginLeft:'20px'}} onClick={()=>changeEditype('mjml')}>mjml</button>
              <button style={{margin:'0 20px'}} onClick={()=>changeEditype('preset')}>preset newsletter</button>
              当前的插件类型：{editType}
        </header>
        {editType==='grapejs'&&<GrapesPage editInstance={grapesjs}></GrapesPage>}
        {editType==='mjml'&&<EmailPage editInstance={grapesjs}></EmailPage>}
        {editType==='preset'&&<PresetPage editInstance={grapesjs}></PresetPage>}
      </div>
  );
}
export default App;

import { useEffect, useState } from 'react'
const GrapesPage=(props:any)=>{
    const [editor,setEditor]=useState();
    const [domRef,setDomRef]=useState();
    const renderGrape = () => {
        if(domRef&&!editor){
            // @ts-ignore
            const editorInstance:any = props.editInstance
                .init({
                    container: '#gjs-grapes',
                });
            setEditor(editorInstance)
        }
    }
    useEffect(()=>{
        renderGrape()
    },[renderGrape])
    return (
        <div id={'gjs-grapes'} style={{
    width: '800px',
    height: '800px'
}}
    ref={(ref: any) => {
        setDomRef(ref)
    }}
    />
    )
};
export default GrapesPage