抓取网页生成电子书(一个开源网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成)

　　抓取网页生成电子书(一个开源网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成)

　　VvvebJs 是一个通过拖放网页自动生成的开源 JavaScript 库。您可以通过简单的拖放来生成您需要的网页样式。内置jquery和Bootstrap，可以拖拽相关组件构建网页，非常方便。并且可以实时修改代码，功能丰富，使用方便，界面友好，特别适合一些注重展示的网页设计，需要的朋友不要错过！

　　在线演示：

　　相关功能

　　1、组件和块/片段拖放；

　　2、撤消/重做操作；

　　3、一个或两个面板接口；

　　4、为文件管理器和组件层次导航添加新页面；

　　5、实时代码编辑器；

　　6、 使用示例 php 脚本上传图片；

　　7、页面下载或导出html或在服务器上保存页面收录示例PHP脚本；

　　8、组件/块列表搜索；

　　9、Bootstrap 4 组件和其他组件。

　　该编辑器默认附带 Bootstrap 4 和 Widgets 组件，可以使用任何类型的组件和输入进行扩展。

　　如何使用

　　要初始化编辑器，请调用 Vvveb.Builder.init。第一个参数是要加载进行编辑的 URL，它必须在同一个子域上进行编辑。第二个参数是页面加载时调用的函数，默认调用编辑器 Gui.init()；

　　结构体

　　Component Group是组件的集合，例如Bootstrap 4 group由Button和Grid等组件组成，该对象仅用于对编辑器左侧面板中的组件进行分组。比如Widgets组件组只有video和map两个组件，定义如下

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

　　Component是一个对象，它提供了可以放置在画布上的html以及选择组件时可以编辑的属性，比如Video Component，一个带有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

}]

});

　　使用Component属性集合中的Input对象来编辑文本输入、选择、颜色、网格行等属性。例如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 中）。以上是使用浏览器翻译工具简单翻译官网文档。可能有一些不准确的地方。有兴趣的小伙伴可以直接查看相关文档！

　　设计界面预览

　　总结

　　VvvebJs是一款非常强大的网页可视化生成构建工具，让不懂网页设计的朋友也可以通过拖拽的方式生成美观大方的网页，让设计网页就像设计图片一样。VvvebJs 特别适合显示网页。您甚至可以在没有代码的情况下完成复杂的网页设计。总的来说，VvvebJs 是一个值得尝试的工具！