天給大家推薦一款超棒的H5可視化網(wǎng)頁制作編輯工具H5DS。

h5ds 基于HTML5構(gòu)建的web網(wǎng)頁可視化制作器。通過輕松拖拽元素即可快速生成精美的H5頁面。

技術(shù)棧

• 前端：React+Mobx+Less+jQuery
• 后端：NodeJs+Ngnix+Mysql
• 工具：Babel+Webpack+Gulp

項(xiàng)目模塊架構(gòu)

項(xiàng)目結(jié)構(gòu)

安裝

$ npm i h5ds -S

快速使用

import React, { Component } from 'react'
import H5dsEditor from 'h5ds/editor'
import 'h5ds/editor/style.css'

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }
  
  /* 保存app */
  saveApp = async data => {
    console.log('saveApp ->', data);
  };
  
  /* 發(fā)布app*/
  publishApp = async data => {
    console.log('publishApp ->', data);
  };
  
  componentDidMount() {
    // 模擬異步加載，設(shè)置 defaultData 會默認(rèn)加載一個(gè)初始化數(shù)據(jù)
    setTimeout(() => {
      this.setState({ data: 'defaultData' });
    }, 100);
  }
  
  /**
   * 使用編輯器
   */
  render() {
    const { data } = this.state;
    return (
      <H5dsEditor
        plugins={[]} // 第三方插件包
        data={data}
        options={{
          publishApp: this.publishApp,
          saveApp: this.saveApp, // 保存應(yīng)用
          appId: 'test_app_id' // 當(dāng)前appId
        }}
      />
    );
  }
}
export default Editor;

h5ds編輯器通過時(shí)間軸控制動畫進(jìn)度。

動畫效果使用的是如下CSS3動畫庫。

https://animate.style/

通過簡單拖拽操作，就可實(shí)現(xiàn)h5代碼編輯功能。

確實(shí)是非常棒的一款類似易企秀、MAKA的H5制作編輯工具，大家不要錯(cuò)過喲~~

# 官網(wǎng)地址
https://www.h5ds.com/

# 倉庫地址
https://github.com/h5ds/h5ds

ok，今天就分享到這里。如果大家有其它優(yōu)秀的H5可視化編輯工具，歡迎交流討論！

TML5 – 支持WORD上傳的富文本編輯器，ASP.NET支持word上傳的富文本編輯器，PHP支持Word上傳的富文本編輯器，百度ueditor編輯器如何導(dǎo)入word文檔，如何實(shí)現(xiàn)導(dǎo)入WORD文檔到UEDITOR編輯器中，導(dǎo)入word文檔到百度編輯器中，將word文檔導(dǎo)入到ueditor編輯器中

前端不固定某一種語言和框架，要求全部都能夠支持，比如HTML5，HTML，VUE，React等。

后端的話最好能夠支持任意語言，實(shí)際上哪一種開發(fā)語言開發(fā)的后端都無所謂，因?yàn)樘峁┙o前端的只是一個(gè)接口，前端并不關(guān)心后端的具體實(shí)現(xiàn)。

導(dǎo)入后圖片自動上傳到服務(wù)器中，圖片和文字HTML自動添加到編輯器中，保留word文檔的格式，字體大小，字體顏色等信息

能夠支持多個(gè)系統(tǒng)平臺，比如Windows，macOS，Linux，信創(chuàng)國產(chǎn)化系統(tǒng)，中標(biāo)麒麟，銀河麒麟，統(tǒng)信UOS，中科方德，龍芯，華為鯤鵬等。

客戶端不用安裝控件。

主要的方案就是提供一個(gè)轉(zhuǎn)換接口，轉(zhuǎn)換接口使用RESTful協(xié)議，這樣的話兼容性更好一點(diǎn)，其它的平臺用起來的話更方便簡單一點(diǎn)，而且測試起來也方便。

現(xiàn)有項(xiàng)目需要為TinyMCE增加導(dǎo)入word文件的功能，導(dǎo)入后word文件里面的圖片自動上傳到服務(wù)器中，word里面的文本樣式保留

用戶一般在發(fā)新聞和發(fā)文章時(shí)用到，算是一個(gè)高頻使用功能，用戶體驗(yàn)上來講確實(shí)是很好，和以前的發(fā)新聞或者發(fā)文章的體驗(yàn)比起來要方便許多，也確實(shí)能夠給用戶帶來許多的便利 。

大領(lǐng)導(dǎo)要求提供產(chǎn)品完整源代碼，領(lǐng)導(dǎo)要求能夠自主可控，公司有自己的產(chǎn)品，領(lǐng)導(dǎo)要求能夠集成在自己的產(chǎn)品中給客戶使用。

示例下載

https://gitee.com/xproer/zyoffice-ueditor1.5x

主要步驟如下：

1.上傳zyoffice文件夾

2.在工具欄中增加插件按鈕

3.在頁面中引入組件文件，初始化組件

效果

開發(fā)文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ

產(chǎn)品比較：https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf

產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412

報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf

近開發(fā)了一個(gè)圖片編輯器，類似于photoshop的網(wǎng)頁版，源碼參考自GitHub上，順便也總結(jié)下使用html+js開發(fā)一個(gè)編輯器需要用到哪些知識點(diǎn)。

• 預(yù)覽地址： 在線PS網(wǎng)頁版 - Photoshop網(wǎng)頁版
• github地址：https://github.com/photopea/photopea

架構(gòu)設(shè)計(jì)

選型： jquery.js 和 blueimp-canvas.js都是強(qiáng)大的頁面庫，功能上類似，jquery.js比較新中文文檔也多一些。Exif.js提供了 JavaScript讀取圖像的原始數(shù)據(jù)的功能擴(kuò)展，例如：拍照方向、相機(jī)設(shè)備型號、拍攝時(shí)間、ISO感光度、GPS 地理位置等數(shù)據(jù)。
要點(diǎn)： 本項(xiàng)目使用的是分功能模塊開發(fā)的方式，將菜單、左區(qū)域、語言、配置，都放在了不同的文件中，比如菜單是config-menu.js，語言是languages文件夾，類庫是libs文件夾，各種模塊放到modules文件夾，核心庫放到了core里面，各種小工具放到了tools里面。如果同學(xué)們想深入了解各區(qū)域代碼，可以定位到相應(yīng)的文件夾下面查看。

代碼結(jié)構(gòu)

整個(gè)項(xiàng)目的代碼分為三個(gè)部分，分別是css、js、html。入口文件是js文件夾中的main.js，入口頁面文件是index.html。如圖所示：

首頁介紹

首頁將各種css、js文件引入，其中bundle.js是主渲染文件（使用npm打包命令打包后會生成bundle.js文件）。

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <title>在線PS</title>
    <meta name="description" content="." />
    <meta name="keywords"
        content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
    <link rel="icon" sizes="192x192" href="images/favicon.png">

    <!-- Google -->
    <meta itemprop="name" content="在線PS網(wǎng)頁版" />
    <meta itemprop="description" content="在線PS網(wǎng)頁版是使用HTML5的免費(fèi)在線圖片編輯器..." />
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="在線PS網(wǎng)頁版" />
    <meta name="twitter:description" content="在線PS網(wǎng)頁版是使用HTML5的免費(fèi)在線圖片編輯器..." />
    <!-- Facebook, Pinterest -->
    <meta property="og:title" content="在線PS網(wǎng)頁版" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://ps.gitapp.cn" />
    <meta property="og:description" content="在線PS網(wǎng)頁版是使用HTML5的免費(fèi)在線圖片編輯器..." />
    <meta property="og:site_name" content="在線PS網(wǎng)頁版" />

    <script src="dist/bundle.js"></script>

參考知識

• 如何調(diào)整圖片大小
• 開源常見issues問題
• 如何學(xué)習(xí)photoshop
• 用 Photoshop 做的 15 件創(chuàng)意事
• ps官網(wǎng)學(xué)習(xí)簡介