编写html网页可以通过html代码，但是对于不太熟悉html语言的朋友如何设计网页呢，今天我推荐几款直接在浏览器中拖拽设计生成html网页的js插件。
一、VvvebJs
VvvebJs是一个免费开源的拖拽网页设计生成插件，使用 jQuery 和 Bootstrap 4 构建。体验地址：http://repo.bfw.wiki/bfwtool/webdesign/index.html
二、GrapesJS
GrapesJS 是一个开源、多用途的 Web 构建器框架，它结合了不同的工具和功能，旨在帮助您（或您的应用程序的用户）在没有任何编码知识的情况下构建 HTML 模板。它是替换常见的 WYSIWYG 编辑器的完美解决方案，这些编辑器适用于内容编辑但不适用于创建 HTML 结构。您可以在官方演示中看到它的运行情况 ，但使用它的 API， 您可以构建自己的编辑器。
官网地址：https://grapesjs.com/
体验地址：https://grapesjs.com/demo-newsletter-editor.html
代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS</title>
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.16.27">
<script src="https://grapesjs.com/js/grapes.min.js?v0.16.27"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"/>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto calculate-form">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">贷款计算器
</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
</div>
</div>
<div class="form-group">
<input type="number" id="years" placeholder="还款周期" class="form-control"/>
<input type="number" placeholder="还款周期" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="计算" class="btn btn-dark btn-block"/>
</div>
</form>
<div id="loading">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var editor = grapesjs.init( {
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: {autoload: 0}
});
editor.BlockManager.add('testBlock', {
label: 'Block',
attributes: {class: 'gjs-fonts gjs-f-b1',title:'hello'},
content: `<div style="text-align:center"><span>Hello World</span></div>`
})
</script>
</body>
</html>
三、ContentBuilder.js
ContentBuilder.js用于您的 Web 应用程序或在线站点构建器的拖放 HTML 编辑器 + 布局构建器收费 JavaScript 库。ContentBuilder.js 是第一个 允许您在几乎所有 css 网格框架（例如 Bootstrap、Foundation、Materialize 等）中构建内容布局的编辑器。
体验地址：https://innovastudio.com/builderdemo2/demo.html
四、craftjs
Craft.js 是一款基于react模块化构建的html页面编辑器的，它附带一个拖放系统，并处理用户组件应呈现、更新和移动的方式 - 除其他外。有了这个，您将能够完全按照您希望的外观和行为构建自己的页面编辑器。craft可以自定义整个ui界面布局，这个非常强大。
import React from "react";
import {Editor, Frame, Canvas, Selector} from "@craftjs/core";
const App = () => {
return (
<div>
<header>Some fancy header or whatever</header>
<Editor>
// Editable area starts here
<Frame resolver={TextComponent, Container}>
<Canvas>
<TextComponent text="I'm already rendered here" />
</Canvas>
</Frame>
</Editor>
</div>
)
}github地址：https://github.com/prevwong/craft.js
总结
VvvebJs和GrapesJS、Craftjs三个是开源免费的，但ContentBuilder是收费的。
对于熟悉react的朋友，建议craft，对于熟悉传统dom操作的朋友可以选择grapesjs。
{{collectdata}}
网友评论0