VvvebJs – 一个用于可拖拽构建网站的JavaScript库

VvvebJs 是一个可拖放网站构建器，基于 jQuery 和 Bootstrap 4 。你可以将它部署在本地或服务器中，然后通过拖拽操作快速构建网站并保存页面。

特色

• 组件和块/片段拖放。
• 撤消/重做操作。
• 单面板或双面板接口。
• 文件管理器和组件层次结构导航。
• 添加新页面。
• 实时代码编辑器。
• 包含示例 php 脚本的图像上传。
• 页面下载或导出 html 或在服务器上保存页面，包括示例 php 脚本。
• 组件/块列表搜索。
• Bootstrap 4 组件。
• Youtube、谷歌地图、Charts.js 等小部件。

默认情况下，编辑器带有 Bootstrap 4 和 Widgets 组件，并且可以使用任何类型的组件和输入进行扩展。

用法

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>

<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	


<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

编辑器的 html 和组件/输入 javascript 模板，请查看 editor.html 。可编辑 scss/editor.scss 和 scss/_builder.scss 修改 CSS 。

结构

Component Group 是 Components 的集合，例如 Bootstrap 4 group 就是由 Button 和 Grid 等 Components 组成的，这个对象只用于编辑器左侧面板中的组件。

Widgets 组件组只有 video 和 maps 两个组件：

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

组件是一个对象，它提供可以拖放到画布上的 html 以及可以在选择组件时编辑的属性，例如视频组件。

具有 Url 和 Target 属性的 html 链接组件：

Vvveb.Components.extend("_base", "html/link", {
    nodes: ["a"],
    name: "Link",
    properties: [{
        name: "Url",
        key: "href",
        htmlAttr: "href",
        inputtype: LinkInput
    }, {
        name: "Target",
        key: "target",
        htmlAttr: "target",
        inputtype: TextInput
    }]
});

在组件属性集合中使用 Input 对象来编辑属性，例如文本输入、选择、颜色、网格行等：

var TextInput = $.extend({}, Input, {

    events: {
        "keyup": ['onChange', 'input'],
	 },

	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
  }
);

输入还需要一个模板，该模板在编辑器 html（在 editor.html 内）中使用 <script> 标签，id 为 vvveb-input-inputname ，例如：

<script id="vvveb-input-textinput" type="text/html">
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
</script>

更多相关文档，请查看 wiki 。