All Projects → bojue → Web Editor

bojue / Web Editor

Web可视化组态编辑器(Angular8)

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Web Editor

Wyg
A new WYSIWYG editing experience for the modern web
Stars: ✭ 73 (+8.96%)
Mutual labels:  editor, drag-and-drop
Piper
A drag-and-drop mobile website builder base on Vue
Stars: ✭ 228 (+240.3%)
Mutual labels:  editor, drag-and-drop
Angular Editor Fabric Js
Drag-and-drop editor based on Fabricjs for Angular.io
Stars: ✭ 295 (+340.3%)
Mutual labels:  editor, drag-and-drop
O
🌀 Text editor suitable for writing git commit messages and editing Markdown files. Can build executables and jump to errors at the press of `ctrl-space`, for several programming languages. Can format code with `ctrl-w`. Provides general syntax highlighting, rainbow parenthesis and cut/paste portals. o is intentionally limited to VT100.
Stars: ✭ 54 (-19.4%)
Mutual labels:  editor
Dragtodismiss Pangesture
仿微信,微博的大图查看和视频播放 拖拽消失的手势动画。手势单独已抽离出来,可用于任何视图。Simulate Wechat's disappeared gesture animation by dragging when the big picture viewing or video playback . Gestures are separated and can be used in any view
Stars: ✭ 55 (-17.91%)
Mutual labels:  drag-and-drop
Laravel Editor Md
editor.md for Laravel , markdown editor for Laravel
Stars: ✭ 61 (-8.96%)
Mutual labels:  editor
Turbo Editor
Simple and powerful File Editor for Android. All is licensed under the GPLv3 license.
Stars: ✭ 1,139 (+1600%)
Mutual labels:  editor
Shadoweditor
Cross-platform 3D scene editor based on three.js, golang and mongodb for desktop and web. https://tengge1.github.io/ShadowEditor-examples/
Stars: ✭ 1,060 (+1482.09%)
Mutual labels:  editor
Ziya
✏️ Your local in-browser editor
Stars: ✭ 63 (-5.97%)
Mutual labels:  editor
React Native Markdown Editor
A markdown editor like github comment editor (contains preview, helper buttons)
Stars: ✭ 59 (-11.94%)
Mutual labels:  editor
Angular Filepond
🔌 A handy FilePond adapter component for Angular
Stars: ✭ 59 (-11.94%)
Mutual labels:  drag-and-drop
Pesdk React Native Demo
React Native example for PhotoEditor SDK
Stars: ✭ 57 (-14.93%)
Mutual labels:  editor
Deckdeckgo
The web open source editor for presentations
Stars: ✭ 1,117 (+1567.16%)
Mutual labels:  editor
Yii2 Sortable Widgets
🍨 Rubaxa/Sortable for Yii2
Stars: ✭ 54 (-19.4%)
Mutual labels:  drag-and-drop
Scxcodeeditorinset
Xcode plugin that adds an empty (configurable) space to the end of the editor text view
Stars: ✭ 64 (-4.48%)
Mutual labels:  editor
Canner Slate Editor
📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Stars: ✭ 1,071 (+1498.51%)
Mutual labels:  editor
Vue Smooth Dnd
Vue wrapper components for smooth-dnd
Stars: ✭ 1,121 (+1573.13%)
Mutual labels:  drag-and-drop
Structuredxmleditor
An editor for structured xml, providing a graphical interface.
Stars: ✭ 58 (-13.43%)
Mutual labels:  editor
React Dropzone
Simple HTML5 drag-drop zone with React.js.
Stars: ✭ 8,639 (+12794.03%)
Mutual labels:  drag-and-drop
Basicpawn
BasicPawn - SourcePawn Editor
Stars: ✭ 60 (-10.45%)
Mutual labels:  editor

Tempo

基于angular版本开发,在线预览

项目截图

截图

! DEMO数据存储在IndexedDB,不要清除本地缓存:cookie及其他网站数据 
! 商业开发请开发对应后台服务

下载

  • 前端
git clone https://github.com/bojue/Web-Editor.git
cd Web-Editor
npm install

运行

  1. 默认运行命令,需要服务端支持,也就是所以tag v0.1.0之后的版本,请先下载 服务端node版本 并完成服务端启动。
npm run dev 

//or

npm run start

使用说明

功能列表

  • 拖拽创建组件
  • 页面管理
  • 元素列表
  • 样式绑定
  • 快捷键
  • 预览
  • 项目管理
  • 服务器支持 (仅v0.1.0支持)
  • IndexDB

快捷键

名称 快捷键
拷贝 control+ c
复制 control+ v
删除 delete
位置 上,下,左,右键

开发文档

编辑器代码组织

.
+-- editor                      //编辑器模块
|   +-- comps  
|       +-- comp-basic              //组件库基类
|           +-- data-basic             //数据基类组件
|           +-- event-basic            //事件基类组件
|           +-- style-basic            //样式基类组件
|           +-- custom-basic           //自定义基类组件(业务组件)
|       +-- comp-lib                //核心组件库
|           +-- basic                   //基础组件库,不需要绑定数据的组件 
|           +-- business                //业务组件库,可绑定数据等复杂操作
|           +-- tool                    //工具组件库,仅方便编辑组态
|       +-- comp-settings          //设置组件库
|           +-- data                    //数据绑定
|           +-- event                   //事件绑定
|           +-- style                   //样式绑定
|   +-- develop                     //开发编辑模块
|       +-- configuration               //页面配置
|       +-- help                        //帮助
|       +-- pre-view                    //预览
|       +-- setting                     //组件设置
|       +-- develop.component           //编辑器核心容器组态
|   +-- directive                   //编辑器指令
|   +-- model  
|   +-- provider                    //编辑器核心服务
|       +-- comp-list.service           //组态列表
|       +-- comp-config.service         //组态配置信息
|       +-- comp-dynamic-create.service //组态type和组态映射

v0.1.1

  • 服务端(仅v0.1.1支持服务端)
npm run proxy 

下载编辑器对应的Node服务端v0.1.0以后版本都需要服务器支持,请按照 文档 配置依次服务器

其他

History List

  • 项目基于angular2 (版本号 7.0.2)开发
  • 已经升级到V8.0
  • 服务端支持
  • 本地部署

TODO List

  • IDC行业组态扩展示例内容
  • 在线试用
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].