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

 更新时间:2023年08月08日 10:29:18   作者:yma16  
Grapes插件是一种用于Web开发的开源工具,可以帮助用户快速创建动态和交互式的网页元素,它还支持多语言和多浏览器,适合开发响应式网页和移动应用程序,这篇文章主要介绍了react搭建在线编辑html的站点通过引入grapes实现在线拖拉拽编辑html,需要的朋友可以参考下

⭐前言

本文分享关于react搭建在线编辑html的站点。

react 发展历史

React是由Facebook开发的一种JavaScript库,用于构建用户界面。React最初发布于2013年,并在2015年开源。以下是React框架的历史:
2010年,Facebook开始使用XHP框架,使PHP代码生成HTML和JSX代码。Facebook的前端工程师Jordan Walke开始研究在JavaScript中实现类似的功能。
2011年,Jordan Walke创建了内部项目JSX,并在Facebook的广告实验室中使用。
2012年,Facebook开始使用React构建他们自己的产品,并将React项目开源。
2013年,React首次发布,React被认为是一个“视图”库,而不是一个完整的MVC框架。
2015年,React Native发布,用于构建iOS和Android应用程序。
2016年,React的版本15发布,支持Fiber架构,Fiber是一种将React组件渲染成底层平台原生UI元素的新实现方式,可提高性能和可维护性。
2017年,React发布了版本16,其中包括对React Fiber架构的完整支持。
2018年,React 16.6发布,其中包括React Hooks功能,允许开发人员在不使用类的情况下使用React状态和其他React功能。
2019年,React 16.9发布,其中包括钩子API的更新和性能优化。
React框架已经成为web开发中最受欢迎的框架之一,其在社区和工业中有着广泛的应用。

搭建效果:

⭐搭建react ts项目

create-react-app 工具

create-react-app 是一个用于自动化 React 项目搭建的命令行工具。它可以帮助开发者快速创建一个基于 React 的项目结构,并且集成了常用的开发工具和配置,例如 webpack、Babel、ESLint 等。
create-react-app 可以帮助开发者避免手动配置项目结构和工具链的繁琐过程,让开发者能够更专注于项目的核心逻辑开发。同时,create-react-app 中的配置也经过了官方和社区的广泛验证和优化,具有很好的性能和可用性。
使用 create-react-app 只需要简单几步操作,就能创建一个完整的、可用的 React 项目。同时,create-react-app 也提供了丰富的命令行工具,可以帮助开发者快速启动、构建和测试项目。

使用 create-react-app 脚手架,创建ts的模板类型

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

⭐引入grapes 插件

grapes插件简介

Grapes插件是一种用于Web开发的开源工具,可以帮助用户快速创建动态和交互式的网页元素。它基于Javascript和CSS,提供了丰富的可定制的组件和模板,使用户可以快速创建和定制网页元素,如按钮、表格、图表、弹框等等。Grapes插件还提供了一个易于使用的UI编辑器,使得用户可以通过拖放和调整组件属性来创建和编辑网页元素。此外,它还支持多语言和多浏览器,适合开发响应式网页和移动应用程序。

安装grapes依赖

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

主页配置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

效果:

github仓库建设demo:https://github.com/yongma16/grapes-mjml-react

属于一个测试demo。

到此这篇关于react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html的文章就介绍到这了,更多相关react在线编辑html的站点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React Router V5:使用HOC组件实现路由拦截功能

    React Router V5:使用HOC组件实现路由拦截功能

    这篇文章主要介绍了React Router V5:使用HOC组件实现路由拦截功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • React setState是异步还是同步原理解析

    React setState是异步还是同步原理解析

    这篇文章主要为大家介绍了React setState是异步还是同步原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React深入浅出分析Hooks源码

    React深入浅出分析Hooks源码

    在react类组件(class)写法中,有setState和生命周期对状态进行管理,但是在函数组件中不存在这些,故引入hooks(版本:>=16.8),使开发者在非class的情况下使用更多react特性
    2022-11-11
  • React.js源码解析setState流程

    React.js源码解析setState流程

    这篇文章主要为大家介绍了React.js源码解析setState流程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • ReactNative踩坑之配置调试端口的解决方法

    ReactNative踩坑之配置调试端口的解决方法

    本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • React冒泡和阻止冒泡的应用详解

    React冒泡和阻止冒泡的应用详解

    这篇文章主要介绍了React冒泡和阻止冒泡的应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 深入理解React中何时使用箭头函数

    深入理解React中何时使用箭头函数

    对于刚学前端的大家来说,对于React中的事件监听写法有所疑问很正常,特别是React中箭头函数使用这块,下面这篇文章主要给大家深入的讲解了关于React中何时使用箭头函数的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-08-08
  • React Hooks--useEffect代替常用生命周期函数方式

    React Hooks--useEffect代替常用生命周期函数方式

    这篇文章主要介绍了React Hooks--useEffect代替常用生命周期函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • React中的页面跳转方式示例详解

    React中的页面跳转方式示例详解

    React Router提供了几种不同的跳转方式,包括使用组件进行页面跳转、使用组件进行重定向,以及使用编程式导航进行跳转,这篇文章主要介绍了React中的页面跳转方式详解,需要的朋友可以参考下
    2023-09-09
  • React Component存在的几种形式详解

    React Component存在的几种形式详解

    这篇文章主要给大家介绍了关于React Component存在的几种形式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11

最新评论