react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html

更新時間：2023年08月08日 10:29:18 作者：yma16

Grapes插件是一種用于Web開發(fā)的開源工具,可以幫助用戶快速創(chuàng)建動態(tài)和交互式的網(wǎng)頁元素,它還支持多語言和多瀏覽器,適合開發(fā)響應式網(wǎng)頁和移動應用程序,這篇文章主要介紹了react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html,需要的朋友可以參考下

?前言

本文分享關于react搭建在線編輯html的站點。

react 發(fā)展歷史

React是由Facebook開發(fā)的一種JavaScript庫，用于構建用戶界面。React最初發(fā)布于2013年，并在2015年開源。以下是React框架的歷史：
2010年，F(xiàn)acebook開始使用XHP框架，使PHP代碼生成HTML和JSX代碼。Facebook的前端工程師Jordan Walke開始研究在JavaScript中實現(xiàn)類似的功能。
2011年，Jordan Walke創(chuàng)建了內(nèi)部項目JSX，并在Facebook的廣告實驗室中使用。
2012年，F(xiàn)acebook開始使用React構建他們自己的產(chǎn)品，并將React項目開源。
2013年，React首次發(fā)布，React被認為是一個“視圖”庫，而不是一個完整的MVC框架。
2015年，React Native發(fā)布，用于構建iOS和Android應用程序。
2016年，React的版本15發(fā)布，支持Fiber架構，F(xiàn)iber是一種將React組件渲染成底層平臺原生UI元素的新實現(xiàn)方式，可提高性能和可維護性。
2017年，React發(fā)布了版本16，其中包括對React Fiber架構的完整支持。
2018年，React 16.6發(fā)布，其中包括React Hooks功能，允許開發(fā)人員在不使用類的情況下使用React狀態(tài)和其他React功能。
2019年，React 16.9發(fā)布，其中包括鉤子API的更新和性能優(yōu)化。
React框架已經(jīng)成為web開發(fā)中最受歡迎的框架之一，其在社區(qū)和工業(yè)中有著廣泛的應用。

搭建效果：

?搭建react ts項目

create-react-app 工具

create-react-app 是一個用于自動化 React 項目搭建的命令行工具。它可以幫助開發(fā)者快速創(chuàng)建一個基于 React 的項目結構，并且集成了常用的開發(fā)工具和配置，例如 webpack、Babel、ESLint 等。
create-react-app 可以幫助開發(fā)者避免手動配置項目結構和工具鏈的繁瑣過程，讓開發(fā)者能夠更專注于項目的核心邏輯開發(fā)。同時，create-react-app 中的配置也經(jīng)過了官方和社區(qū)的廣泛驗證和優(yōu)化，具有很好的性能和可用性。
使用 create-react-app 只需要簡單幾步操作，就能創(chuàng)建一個完整的、可用的 React 項目。同時，create-react-app 也提供了豐富的命令行工具，可以幫助開發(fā)者快速啟動、構建和測試項目。

使用 create-react-app 腳手架，創(chuàng)建ts的模板類型

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

?引入grapes 插件

grapes插件簡介

Grapes插件是一種用于Web開發(fā)的開源工具，可以幫助用戶快速創(chuàng)建動態(tài)和交互式的網(wǎng)頁元素。它基于Javascript和CSS，提供了豐富的可定制的組件和模板，使用戶可以快速創(chuàng)建和定制網(wǎng)頁元素，如按鈕、表格、圖表、彈框等等。Grapes插件還提供了一個易于使用的UI編輯器，使得用戶可以通過拖放和調(diào)整組件屬性來創(chuàng)建和編輯網(wǎng)頁元素。此外，它還支持多語言和多瀏覽器，適合開發(fā)響應式網(wǎng)頁和移動應用程序。

安裝grapes依賴

$ npm i grapesjs

官網(wǎng)案例：

<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>

主頁配置app.tsx

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;

grapePage.tsx

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

效果：