天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。

h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。

技术栈

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

项目模块架构

项目结构

安装

$ 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);
  };
  
  /* 发布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;

h5ds编辑器通过时间轴控制动画进度。

动画效果使用的是如下CSS3动画库。

https://animate.style/

通过简单拖拽操作，就可实现h5代码编辑功能。

确实是非常棒的一款类似易企秀、MAKA的H5制作编辑工具，大家不要错过哟~~

# 官网地址
https://www.h5ds.com/

# 仓库地址
https://github.com/h5ds/h5ds

ok，今天就分享到这里。如果大家有其它优秀的H5可视化编辑工具，欢迎交流讨论！

TML5 – 支持WORD上传的富文本编辑器，ASP.NET支持word上传的富文本编辑器，PHP支持Word上传的富文本编辑器，百度ueditor编辑器如何导入word文档，如何实现导入WORD文档到UEDITOR编辑器中，导入word文档到百度编辑器中，将word文档导入到ueditor编辑器中

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

后端的话最好能够支持任意语言，实际上哪一种开发语言开发的后端都无所谓，因为提供给前端的只是一个接口，前端并不关心后端的具体实现。

导入后图片自动上传到服务器中，图片和文字HTML自动添加到编辑器中，保留word文档的格式，字体大小，字体颜色等信息

能够支持多个系统平台，比如Windows，macOS，Linux，信创国产化系统，中标麒麟，银河麒麟，统信UOS，中科方德，龙芯，华为鲲鹏等。

客户端不用安装控件。

主要的方案就是提供一个转换接口，转换接口使用RESTful协议，这样的话兼容性更好一点，其它的平台用起来的话更方便简单一点，而且测试起来也方便。

现有项目需要为TinyMCE增加导入word文件的功能，导入后word文件里面的图片自动上传到服务器中，word里面的文本样式保留

用户一般在发新闻和发文章时用到，算是一个高频使用功能，用户体验上来讲确实是很好，和以前的发新闻或者发文章的体验比起来要方便许多，也确实能够给用户带来许多的便利 。

大领导要求提供产品完整源代码，领导要求能够自主可控，公司有自己的产品，领导要求能够集成在自己的产品中给客户使用。

示例下载

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

主要步骤如下：

1.上传zyoffice文件夹

2.在工具栏中增加插件按钮

3.在页面中引入组件文件，初始化组件

效果

开发文档：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ

产品比较：https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf

产品源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412

报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf

近开发了一个图片编辑器，类似于photoshop的网页版，源码参考自GitHub上，顺便也总结下使用html+js开发一个编辑器需要用到哪些知识点。

• 预览地址： 在线PS网页版 - Photoshop网页版
• github地址：https://github.com/photopea/photopea

架构设计

选型： jquery.js 和 blueimp-canvas.js都是强大的页面库，功能上类似，jquery.js比较新中文文档也多一些。Exif.js提供了 JavaScript读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO感光度、GPS 地理位置等数据。
要点： 本项目使用的是分功能模块开发的方式，将菜单、左区域、语言、配置，都放在了不同的文件中，比如菜单是config-menu.js，语言是languages文件夹，类库是libs文件夹，各种模块放到modules文件夹，核心库放到了core里面，各种小工具放到了tools里面。如果同学们想深入了解各区域代码，可以定位到相应的文件夹下面查看。

代码结构

整个项目的代码分为三个部分，分别是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网页版" />
    <meta itemprop="description" content="在线PS网页版是使用HTML5的免费在线图片编辑器..." />
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="在线PS网页版" />
    <meta name="twitter:description" content="在线PS网页版是使用HTML5的免费在线图片编辑器..." />
    <!-- Facebook, Pinterest -->
    <meta property="og:title" content="在线PS网页版" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://ps.gitapp.cn" />
    <meta property="og:description" content="在线PS网页版是使用HTML5的免费在线图片编辑器..." />
    <meta property="og:site_name" content="在线PS网页版" />

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

参考知识

• 如何调整图片大小
• 开源常见issues问题
• 如何学习photoshop
• 用 Photoshop 做的 15 件创意事
• ps官网学习简介