疫情禁足在家,用原生的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. Linux centos 下安装redis

    一.安装编译工具及库文件      yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 二.选择安装文件 ...

  2. moco jar包下载

    http://repo1.maven.org/maven2/com/github/dreamhead/moco-runner/0.11.0/ 选择moco-runner-0.11.0-standalo ...

  3. J - Association of Cats and Magical Lights Kattis - magicallights (树状数组+dfs序)

    Rar the Cat((™)) is the founder of ACM (Association of Cats and Magical Lights). This is the story o ...

  4. G - Green-Red Tree Gym - 102190G

    题目链接:http://codeforces.com/gym/102190/attachments 题解:我们先将前5个点分别涂上红色或者绿色,使得这两棵树在5个点中都是连通,并不存在自环(建边方式不 ...

  5. day07-生成器

    一. 含有yield关键字的函数就是生成器函数. yield不能和return公用,且要写在函数内部. 调用生成器函数之后,函数不执行,返回一个生成器. 生成器的本质是迭代器.生成器generator ...

  6. PyCharm4.5 中文破解版破解步骤

    1.在下载之家下载PyCharm4.5中文版软件包,然后右击软件安装包选择解压到“pycharm4.5.3”. 2.在解压文件夹中找到pycharm-professional-4.5.3,右击打开. ...

  7. Ribosome profiling|N-terminomics|蛋白质基因组学

    生物医学大数据-蛋白质基因组学:质谱注释 蛋白质组与其他组学的关系便是互为印证:蛋白质基因组学原本用于基因组注释,后面扩展到蛋白质与转录组或可变剪接之间关系,同时,蛋白质组依赖于基因组注释作为验证.许 ...

  8. text-align和vertical-align

    1.text-align(水平对齐)text-align样式使元素在其定界区域内水平对齐,其取值可以是left.right.center或justify.justify使元素两端对齐.2.vertic ...

  9. leetcode第38题:报数

    这是一道简单题,但是我做了很久,主要难度在读题和理解题上. 思路:给定一个数字,返回这个数字报数数列.我们可以通过从1开始,不断扩展到n的数列.数列的值为前一个数列的count+num,所以我们不断叠 ...

  10. cs231n spring 2017 lecture10 Recurrent Neural Networks

    (没太听明白,下次重新听一遍) 1. Recurrent Neural Networks