js编辑器下载 js文本编辑器 收藏 0

超给力 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 基于分布式存储数据库

编辑器生成页面JSON数据，服务端负责存取JSON数据，渲染时从服务端取数据JSON交给前端模板处理。

将psd每个设计图中的每个图层导出成图片保存到静态资源服务器中。

*注意

• psd源文件大小最好不要超过30M，过大会导致浏览器卡顿甚至卡死
• 尽可能合并图层，并栅格化所有图层
• 较复杂的图层样式，如滤镜、图层样式等无法读取

市面上有很多优秀的可视化h5编辑器，如MAKA、易企秀等，不过都不是免费的。这款夸克H5免费开源使用，想技术提升的同学不可错过哟！

ok，就分享到这里。感兴趣的同学可以自己去尝试下哈！

开源的富文本编辑器

开源的富文本编辑器有多种，它们在功能、易用性、可扩展性等方面各有特点。

以下是一些主流的开源富文本编辑器：

1. TinyMCE： TinyMCE是一个开源的所见即所得的HTML编辑器，界面清新，模拟本地软件风格，顶部有菜单栏。 支持图片在线处理，插件多，功能强大，易于集成，并拥有可定制的主题。 支持目前流行的各种浏览器，可以达到微软Word类似的编辑体验。 更多介绍及下载：TinyMCE官网。
2. CKEditor： CKEditor是一款非常经典的富文本编辑器，官方下载量过千万。 它是在著名的FCkEditor基础上开发的新版本，具有高性能的实时预览和行内编辑功能，使得编辑内容更加直观。 有很强的可扩展性，被各大网站广泛运用。 更多介绍及下载：CKEditor官网。
3. UEditor： UEditor是由百度出品的富文本web编辑器，具有轻量、可定制、注重用户体验等特点。 功能全面，插件很多，还可以很方便地插入百度地图。 分为UE版（全功能版）和UM版（精简版），可以根据使用环境选择不同版本。 更多介绍及下载：UEditor官网。
4. wangEditor： wangEditor是一款轻量级、小巧实用的富文本编辑器，配置方便，使用简单。 可以自定义皮肤功能，免费开源，用户数量也很多，尤其是用在一些轻型环境，如论坛社区回帖。 更多介绍及下载：wangEditor官网。
5. KindEditor： KindEditor历史较长，用户数也不少，界面类似于Office Word，界面和功能中规中矩，文档齐全，使用还算方便。 免费开源，更多介绍及下载：KindEditor官网。
6. simditor： simditor是Tower平台使用的富文本编辑器，轻量化，界面简约，功能实用，插件不是很多。 虽然是国内出品，但文档是英文的，开源免费。 更多介绍及下载：simditor官网。
7. bootstrap-wysiwyg： bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器，界面简洁大方。 使用前需要先引入bootstrap。 更多介绍及下载：bootstrap-wysiwyg GitHub页面。
8. summernote： summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。 开源免费，项目活跃，一直有人维护。 依赖于jquery和bootstrap，使用前需先引入这两项。 更多介绍及下载：summernote官网。
9. Quill： Quill是一款基于JavaScript的现代化富文本编辑器，界面、易用性、扩展性和性能表现出色。 支持可视化编辑、自动保存等特性，方便实现文本样式、布局等。 可定制性强，支持自定义扩展，添加自定义块类型、工具栏等。 提供多语言UI支持，用户可自定义语言和快捷键。 开源免费，项目活跃，一直有人维护。 更多介绍及下载：Quill官网。

这些开源的富文本编辑器各有千秋，可以根据项目需求和个人喜好选择适合的工具。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com