疫情禁足在家,用原生的JS实现了一个HTML可视化编辑工具,页面布局基于Bootstrap。大约一个月时间,打通主要技术关卡,实现了第一版:

 

可以拖放编辑,实现了几乎所有的bootstrap预定义工具类。

设计时,尽量让其可以灵活扩展,支持多主题切换,为自定义控件预留了接口。

还可以作为bootstrap学的辅助工具,在界面上选好配置,可以把相应的class全部显示出来,所见即所得。

后期的主要实现方向:

1、增加尽量多的主题,形成一个主题库

2、结合国内微信使用状况,增加可以微信分享的H5模板

源码地址:https://github.com/vularsoft/rxeditor

演示地址:https://vular.cn/rxeditor/

一个基于Bootstrap实现的HMTL可视化编辑工具的更多相关文章

  1. 我做了一个 HTML 可视化编辑工具,有前途吗?

    疫情在家的这段时间,我做了一个 HTML 可视化编辑工具,做的时候信心满满,差不多完成了,现在反而不如以前信心足了,这玩意有用吗?代码地址: https://github.com/vularsoft/ ...

  2. 自荐RedisViewer一个有情怀的跨平台Redis可视化客户端工具

    自荐一个有情怀的跨平台Redis可视化客户端工具--RedisViewer 转载自 最美分享Coder 2019-09-17 06:31:00 介绍 在以往的文章中曾经介绍过几款Redis的可视化工具 ...

  3. 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil

    封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,代码比较简单,主要是把MongoTarget的配置.FileTarget的配置集成到类中,同时利用缓存依赖来判断是否需要重新创 ...

  4. 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,nloglogutil

    封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,代码比较简单,主要是把MongoTarget的配置.FileTarget的配置集成到类中,同时利用缓存依赖来判断是否需要重新创 ...

  5. Go/Python/Erlang编程语言对比分析及示例 基于RabbitMQ.Client组件实现RabbitMQ可复用的 ConnectionPool(连接池) 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil 分享基于MemoryCache(内存缓存)的缓存工具类,C# B/S 、C/S项目均可以使用!

    Go/Python/Erlang编程语言对比分析及示例   本文主要是介绍Go,从语言对比分析的角度切入.之所以选择与Python.Erlang对比,是因为做为高级语言,它们语言特性上有较大的相似性, ...

  6. 分享一个基于Bootstrap的 ACE框架 入门(MVC+EF)

    基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求, 而且能根据不同设备适配显示,而且还有四个主题可以切换. 简单入门,源代码下载:https://github.c ...

  7. LineCalc,一个基于Lex&Yacc的简单行计算工具

    LineCalc是基于Lex&Yacc的一个简单的行计算工具,支持常见的运算符和部分POSIX中定义于math.h中的数学函数:同时,LineCalc还提供了一个简单的错误处理模块,能检测公式 ...

  8. 一个基于POI的通用excel导入导出工具类的简单实现及使用方法

    前言: 最近PM来了一个需求,简单来说就是在录入数据时一条一条插入到系统显得非常麻烦,让我实现一个直接通过excel导入的方法一次性录入所有数据.网上关于excel导入导出的例子很多,但大多相互借鉴. ...

  9. WPF快速实现XML可视化编辑工具

    虽然最近业余时间主要都放在研究AngularJS上了,不过由于正好要帮朋友做一个生成XML的小工具,顺便又温顾了一下WPF.虽然这个时代相对于Web应用和移动App,Windows应用程序是越来越少了 ...

随机推荐

  1. [NOIP 2002普及组]产生数(floyd+高精度)

    https://www.luogu.org/problem/P1037 题目描述 给出一个整数 n(n<1030) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: ...

  2. 31)PHP,对象的遍历

    对象的遍历: 对象也可以可以使用foreach语句进行便利,有两点注意: 1,只能便利属性.(所以,这个就解决了,为啥之前的数据库类,我只是看到了一些属性名字,而没有得到我的属性值) 2,只能便利“看 ...

  3. PAT甲级——1041 Be Unique

    1041 Be Unique Being unique is so important to people on Mars that even their lottery is designed in ...

  4. demo4j解析xml

    1//先加入dom4j.jar包 2import java.util.HashMap; 3import java.util.Iterator; 4import java.util.Map; 5 6im ...

  5. Template设计模式

    template英文名叫模板,在这个模式中,主要的角色有AbstractClass(抽象类)和ConcreteClass(具体类),这里举例如下; 将一段字符或者字符串循环显示5次: 首先定义抽象类, ...

  6. @EnableGlobalMethodSecurity(prePostEnabled = true)

    http://www.bubuko.com/infodetail-2243816.html

  7. ZOJ-4089-Little Sub and Isomorphism Sequences

    给定你个数组,以及一些单点修改,以及询问,每次询问需要求得,最长的字串长度,它在其他位置存在同构. 当存在两个不相交的区间同构时,如: 1.2.…….n -1.n.n + 1.…….m.m + 1.m ...

  8. openpyxl操作excel表格

    1.openpyxl 只支持打开.xlsx格式,其他excel类库基本也是 2.不能这里的工作面板直接右键新建表格,必须到文件夹下面去新建,可以把在别的目录新建的表格直接复制到当前目录下 3.从表格中 ...

  9. Replace into 与Insert into on duplicate key update的区别

    前提条件:除非表有一个PRIMARY KEY或UNIQUE索引,否则,使用这2条语句没有意义.该语句会与INSERT相同 1. Replace into (1)   添加相同的主键 操作前       ...

  10. H5本地离线存储

    前言上一篇文件结尾,有同学问我本地存储图片方法,其实本地存储方式有很多,我们打开谷歌浏览器,查看源代码,在resources页签中,有web SQl ,indexedDB等等,我前面文章讲过Local ...