npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5
前两天有分享一个鲁班H5移动端页面生成器。今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5。
quark-h5 基于 vue.js 开源的H5可视化拖放编辑器,star高达1.7K+。支持拖拽组件并配置属性,支持动画及效果预览,轻松快速上手制作h5页面。
技术栈
Vue2.x + Vuex + Vue-Router
Element-UI饿了么pc组件库
Sass css预设编译器
Loadsh 工具类
Koa 基于Node.js的web开发框架
Mongodb 基于分布式存储数据库
工程目录结构
安装使用
# 下载项目
git clone https://github.com/huangwei9527/quark-h5.git
# 进入目录
cd quark-h5
# 安装依赖包
npm install
# 启动前端工程
npm run dev-client
# 启动服务器
npm run dev-server
# 编译engine.js模板引擎
npm run lib:h5-swiper
编辑器实现思路
编辑器生成页面JSON数据,服务端负责存取JSON数据,渲染时从服务端取数据JSON交给前端模板处理。
psd设计图导入生成h5页面
将psd每个设计图中的每个图层导出成图片保存到静态资源服务器中。
# 安装psd依赖
$ npm install psd --save
var PSD = require('psd');
router.post('/psdPpload',async ctx=>{const file = ctx.request.files.file; //获取上传文件
let psd = await PSD.open(file.path)var timeStr = + new Date();
let descendantsList= psd.tree().descendants();
descendantsList.reverse();
let psdSourceList=[]
let currentPathDir= `public/upload_static/psd_image/${timeStr}`for (var i = 0; i < descendantsList.length; i++){if (descendantsList[i].isGroup()) continue;if (!descendantsList[i].visible) continue;try{
await descendantsList[i].saveAsPng(path.join(ctx.state.SERVER_PATH, currentPathDir + `/${i}.png`))
psdSourceList.push({...descendantsList[i].export(),type: 'picture',imageSrc: ctx.state.BASE_URL + `/upload_static/psd_image/${timeStr}/${i}.png`,})
}catch(e) {//转换不出来的图层先忽略
continue;
}
}
ctx.body ={
elements: psdSourceList,document: psd.tree().export().document
};
})
*注意
psd源文件大小最好不要超过30M,过大会导致浏览器卡顿甚至卡死
尽可能合并图层,并栅格化所有图层
较复杂的图层样式,如滤镜、图层样式等无法读取
市面上有很多优秀的可视化h5编辑器,如MAKA、易企秀等,不过都不是免费的。这款夸克H5免费开源使用,想技术提升的同学不可错过哟!
#示例地址
http://47.104.247.183:4000/
# 仓库地址
https://github.com/huangwei9527/quark-h5
ok,就分享到这里。感兴趣的同学可以自己去尝试下哈!
npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5相关推荐
- vue 所见即所得_适用于Vue.js的轻量级所见即所得HTML编辑器
vue 所见即所得 Vue-Wysiwyg (vue-wysiwyg) A lightweight WYSIWYG HTML editor for Vue.js. 用于Vue.js的轻量级WYSIWY ...
- Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操 ...
- Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果 已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版 类似 Tinder 和 探探 的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
- vue+sortable实现表格拖拽
vue+sortable实现表格拖拽 前言: 支持 vue3.0 支持表格拖拽 支持自定义拖拽 sortable官网 一.下载 sortable npm install sortablejs --sa ...
- 【加强版】js原生实现拖拽效果,这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的(但是有个弊端:拖拽过程中鼠标会变成一个禁用符号,不太友好)
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
- 【墙裂推荐】【原生基础版】js原生实现拖拽效果,注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好,推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
- html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例 发布时间:2020-10-04 12:47:25 来源:脚本之家 阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
- Vue+el-tree,元素拖拽时出现禁用图标, 请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...
- html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
最新文章
- charles都踩过哪些坑_那些年我学Java踩过的坑
- mysql表收缩时从库也收缩么_收缩数据库 - SQL Server | Microsoft Docs
- python中的控制流
- 虚函数与纯虚函数的区别
- ElasticSearch搜索引擎: 内存分析与设置
- 计算机算法设计与分析考试题,《计算机算法设计与分析》习题及答案
- 汇编的一些坑以及部分上机题目的实现
- 每个做DBA的孩纸都是上辈子被drop的db
- MySQL建表时Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP
- 大数据时代的背景下 校园安防管理软件平台发展变化
- 35岁逃离北上广,40岁失业送外卖,中年人的“体面”在于投资自己
- [翻译]机器学习如何个性化推荐音乐
- QCY T3 蓝牙耳机连接电脑 声音断续卡顿
- async、await其实是generator和promise的语法糖
- 论文阅读:SCAFFOLD: Stochastic Controlled Averaging for Federated Learning
- Gmail 中出现紫字的怪现象
- 【艾琪出品】《计算机应用基础》【试题汇总1】
- 图数据库OrientDB-基础篇
- LINUX FTP用户的创建
- 激活Windows 7旗舰版