超級好用的H5編輯器開箱即用！

時間  2019-11-12
標籤 超級 好用 h5 編輯器 即用 简体版
原文   原文鏈接

簡介

H5DS (HTML5 Design software) 這是一款基於 WEB 的 HTML5 製做工具的內核。讓不會寫代碼的人也能輕鬆快速上手編寫HTML5頁面。H5DS同時也是一款基於react+mobx的在線HTML製做工具，靈活的內核可快速改形成各類 可視化製做工具（基於該內核，能夠作BI工具，建站工具，圖形設計工具，在線PPT工具等一系列工具），H5DS提供了豐富的插件擴展接口，讓插件可自由快速擴展和動態加載，同時也支持API接入javascript

該產品的特色：

  1. 【高維護性】採用react+mobx模塊化開發，源碼結構清晰，註釋規範，高可維護，方便進行二次開發和迭代升級。
  2. 【高擴展性】編輯器內核獨立存在，官方提供了插件開發教程以及CLI工具，可獨立開發插件，動態加載插件。
  3. 【高性能】採用mobx統一管理數據，底層proxy數據監聽，作了大量節流和防抖優化，插件按需加載，不佔內存。
  4. 【多終端支持】支持手機頁面、PC頁面獨立製做，設計界面可自由切換，採用縮放模式兼容各類屏幕分辨率，PC/Mobile一網打盡。

官方網站：www.h5ds.comcss

github地址：https://github.com/h5ds/h5dshtml

軟件截圖：java

加入咱們

QQ羣：549856478react

image

如何使用

1. 引入必須的資源包。

<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. 安裝使用H5DS

npm install h5ds --savejquery

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;

直接使用JS-SDK

editor.html 編輯器文件

<!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 預覽頁面

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程