Super easy to use H5 editor out of the box!

Others 2022-04-20 07:22:16 views: 0

Introduction

H5DS (HTML5 Design software) This is the core of a web-based HTML5 authoring tool. Let people who can't write code can easily and quickly get started writing HTML5 pages. H5DS is also an online HTML production tool based on react+mobx. The flexible kernel can be quickly transformed into various visual production tools (based on this kernel, it can be used as a series of BI tools, website building tools, graphic design tools, online PPT tools, etc. tools), H5DS provides a wealth of plug-in extension interfaces, allowing plug-ins to be freely and quickly expanded and dynamically loaded, and also supports API access

Features of this product:

  1. [High maintainability] Using react+mobx modular development, the source code structure is clear, the annotations are standardized, and it is highly maintainable, which is convenient for secondary development and iterative upgrades.
  2. [High scalability] The editor kernel exists independently. The official plugin development tutorial and CLI tools are provided, which can independently develop plugins and dynamically load plugins.
  3. [High performance] Using mobx to manage data in a unified manner, monitoring the underlying proxy data, doing a lot of throttling and anti-shake optimization, plug-ins are loaded on demand and do not occupy memory.
  4. [Multi-terminal support] It supports independent production of mobile pages and PC pages, and the design interface can be switched freely. The zoom mode is compatible with various screen resolutions, and PC/Mobile can be used in one go.

Official website: www.h5ds.com

github address: https://github.com/h5ds/h5ds

Software screenshot:

join us

QQ group: 549856478

image

how to use

1. Import the necessary resource packs.

<link rel="stylesheet" href="https://at.alicdn.com/t/font_157397_ze6q8vjbeme.css">
<link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.css" rel="stylesheet">
<!-- 编辑器所需第三方资源库 -->
<script src="https://cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
<script src="https://cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
<script src="https://cdn.h5ds.com/lib/plugins/h5ds-vendor.min.js"></script>
<!-- 外部引入antd --->
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.js"></script>

2. Install and use H5DS

npm install h5ds --save


import 'h5ds/editor/style.css';

import React, { Component } from 'react';
import H5dsEditor from 'h5ds/editor';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  /**
   * 保存APP
   */
  saveApp = async data => {
    console.log('saveApp ->', data);
  };

  /**
   * 发布 app
   */
  publishApp = async data => {
    console.log('publishApp ->', data);
  };

  componentDidMount() {
    // 模拟异步加载数，设置 defaultData 会默认加载一个初始化数据
    setTimeout(() => {
      this.setState({ data: 'defaultData' });
    }, 100);
  }

  /**
   * 使用编辑器部分
   */
  render() {
    const { data } = this.state;
    return (
      <H5dsEditor
        plugins={[]} // 第三方插件包
        data={data}
        options={{
          publishApp: this.publishApp,
          saveApp: this.saveApp, // 保存应用
          appId: 'test_app_id' // 当前appId
        }}
      />
    );
  }
}
export default Editor;

Use JS-SDK directly

editor.html editor file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>H5DS</title>
    <link rel="stylesheet" href="https://cdn.h5ds.com/umd/editor/style.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_157397_ze6q8vjbeme.css"/>
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.css" rel="stylesheet"/>
    <!-- 编辑器所需第三方资源库 -->
    <script src="https://cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
    <script src="https://cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
    <script src="https://cdn.h5ds.com/lib/plugins/h5ds-vendor.min.js"></script>
    <!-- 外部引入antd --->
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.js"></script>
    <!-- es6语法支持 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- H5DS资源 -->
    <script src="https://cdn.h5ds.com/umd/editor/index.js"></script>
  </head>
  <body></body>
  <script type="text/babel">
    $(async function() {
      // 使用编辑器
      class Editor extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            data: null
          };
        }

        /**
         * 保存APP
         */
        saveApp = async data => {
          console.log("saveApp ->", data);
        };

        /**
         * 发布 app
         */
        publishApp = async data => {
          console.log("publshApp ->", data);
        };

        componentDidMount() {
          // 模拟异步加载数，设置 defaultData 会默认加载一个初始化数据
          setTimeout(() => {
            this.setState({ data: "defaultData" });
          }, 100);
        }

        /**
         * 使用编辑器部分
         */
        render() {
          const { data } = this.state;
          const { H5dsEditor } = H5DS_GLOBAL.editor;
          return (
            <H5dsEditor
              plugins={[]} // 第三方插件包
              data={data}
              debugger={false} // debugger=true用于调试插件
              options={{
                noServer: true, // 开启无后台模式
                publishApp: this.publishApp,
                saveApp: this.saveApp, // 保存应用
                appId: "test_app_id" // 当前appId
              }}
            />
          );
        }
      }

      // 使用
      ReactDOM.render(<Editor />, document.querySelector("body"));
    });
  </script>
</html>

app-preview.html preview page


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>H5DS</title>
    <link rel="stylesheet" href="https://cdn.h5ds.com/umd/swiper/style.css" />
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.css" rel="stylesheet"/>
    <!-- 编辑器所需第三方资源库 -->
    <script src="https://cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
    <script src="https://cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
    <script src="https://cdn.h5ds.com/lib/plugins/h5ds-vendor-preview.min.js"></script>
    <!-- es6语法支持 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- H5DS资源 -->
    <script src="https://cdn.h5ds.com/umd/swiper/index.js"></script>
    <script src="data.js"></script>
    <script>
      window.Component = React.Component;
    </script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #H5DS-APP {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="H5DS-APP"></div>
  </body>
  <script type="text/babel">
    class App extends Component {
      state = {
        width: window.innerWidth,
        height: window.innerHeight
      };

      resize = () => {
        this.setState(
          {
            width: window.innerWidth,
            height: window.innerHeight
          },
          () => {
            this.H5SwiperRef.swiperInstance.update();
          }
        );
      };

      setSize = (width, height) => {
        this.setState({ width, height }, () => {
          this.H5SwiperRef.swiperInstance.update();
        });
      };

      componentDidMount() {
        const innerHeight = window.innerHeight;

        // 兼容安卓键盘弹起事件
        window.addEventListener("resize", () => {
          const newInnerHeight = window.innerHeight;
          if (innerHeight > newInnerHeight) {
            // 键盘弹出事件处理
            this.resize();
          } else {
            // 键盘收起事件处理
            this.resize();
          }
        });

        // 兼容 IOS 键盘弹起事件，兼容IOS表单的问题
        document.body.addEventListener("focusin", () => {
          window.scroll(0, 0);
        });
        document.body.addEventListener("focusout", () => {
          window.scroll(0, 0);
        });
      }

      componentWillUnmount() {
        if (this.settime) {
          clearTimeout(this.settime);
        }
      }

      render() {
        const { width, height } = this.state;
        return (
          <H5dsSwiper
            key={this.state.keys}
            ref={c => (this.H5SwiperRef = c)}
            scale={this.props.data.type === "pc" ? 1 : width / 320}
            style={{ width, height }}
            renderIn="render_in_publish"
            data={this.props.data}
            plugins={{
              pluginsKey: window.H5DS_GLOBAL.plugins,
              scripts: window.H5DS_GLOBAL.scripts
            }}
          />
        );
      }
    }

    function initData(appId, data) {
      document.title = data.name;
      const plus = data.plugins || [];

      const { installPlugins } = window.H5DS_GLOBAL.swiper;

      installPlugins(plus).then(plugins => {
        ReactDOM.render(
          <App appId={appId} data={data} plugins={plugins} />,
          document.getElementById("H5DS-APP")
        );
      });
    }

    initData("test_app_id", h5dsAppData);
  </script>
</html>
{{o.name}}
{{m.name}}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324145927&siteId=291194637
Super easy to use H5 editor out of the box!
vsCode automatically saved most standard formatting codes, simple, out of the box, super easy to use, just two steps
Super super easy-to-use Latex and MarkDown online formula editor
Easy to use VIM editor
Super easy to use FRP
Typora is super easy to use
[Unity Practical Combat] EnhancedScroller v2.21.4 is easy to use [available out of the box]
Easy to use editor plug & Shortcuts
Use native JS, CSS to generate H5 bullet box
5s! Use a browser to build a Linux system out of the box
5 super easy-to-use open source tool libraries to share~
What are the AI tools? These 5 AI toolsets are super easy to use!
Super easy to use tool for finishing
Super easy to use tool/website
Super easy to use writing software
typora markdown relatively easy to use document editor
Easy to use photo editor - "PhotoScape X"
An easy-to-use Markdown document editor: Typora
Python editor installation and configuration, which editor is easy to use for python
c ++ super easy to use callback signal slot
spring's regular tasks, super easy to use
Share an Excel tool class, super easy to use
Super easy to use API tool-Swagger
Super easy to use PDF conversion software
A super easy to use JQUERY pager-jpaginate
Eclipse super easy to use plug-in recommendation
Summary of Mac software that is recognized as super easy to use
Recommend a useful H5 web page editing tool with easy-to-use code and open source code
Easy-to-use edit box layout control TdxLayoutControl Easy-to-use edit box layout control TdxLayoutControl
【Knowledge Rabbit】Ctrl+H, super easy-to-use shortcut key in Word documents
Recommended
Ranking
Reason Codes enhanced accounting documents
The first test case appium
Force command and dispatch emergency communication plan
Interview - What is concurrent programming
21 classic Python interview questions [recommended collection]
[Dahua Data Structure-Introduction to Data Structure ①]
Spring @ConfigurationProperties
Why do we want to broadcast live on WeChat public account? What are the advantages?
How to bring up the toolbar under the desktop of Apple laptop
Dialog: Manually enter information
Daily
More
2024-05-21(35)
2024-05-20(5)
2024-05-19(0)
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)

Code World

© 2018 codetd.com

哆哆女性网季二小姐的民国日常文化传播公司起名创意龚姓起名周公解梦梦见自己要生孩子周公解梦狗咬人家纺店起名字好给女宝宝起名字莫小棋算范冰冰的命免费视频制作网站photoshopcs4序列号小组起名搞笑建设网站长沙市算命的怎么算出名字美国恐怖故事第三季在线2021天狼最新电视剧可以起英文名的软件两字网名男生周易时辰八字起名梦解诗给姓朱的女起名姓毛的男性孩子起名网站快速排名优化方式巴中网站设计公司大众养生网站对于一个网站的建设有什么建议温州建设信息网站诗句起名男孩子周公解梦,梦见自己结婚大型网站建设价格旺道网站排名优化淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人？单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化