grapesjs实现网页可视化拖拽编辑器效果代码
代码语言：html
所属分类：其他
代码描述：grapesjs实现网页可视化拖拽编辑器效果代码，可直接拖拽设计网页，支持图片编辑、文字编辑、倒计时、tab选项卡、视频、代码块、表单，打字动画、文字提示等组件。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在线网页可视化设计工具</title>
<meta content="Best Free Open Source Responsive Websites Builder" name="description">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/toastr.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-preset-webpage.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tooltip.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.9.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toastr.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.9.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.1.0.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-blocks-basic.1.0.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-plugin-forms.2.0.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-component-countdown.1.0.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-plugin-export.1.0.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-tabs.1.0.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-custom-code.1.0.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-touch.0.1.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-parser-postcss.1.0.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-tooltip.0.1.7.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-tui-image-editor.0.1.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-typed.1.0.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-style-bg.2.0.1.js"></script>
<style type="text/css">
.icons-flex {
background-size: 70% 65% !important;
height: 15px;
width: 17px;
opacity: 0.9;
}
.icon-dir-row {
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-dir-row.png") no-repeat center;
}
.icon-dir-row-rev {
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-dir-row-rev.png") no-repeat center;
}
.icon-dir-col {
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-dir-col.png") no-repeat center;
}
.icon-dir-col-rev {
background: url("./img/flex-dir-col-rev.png") no-repeat center;
}
.icon-just-start{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-just-start.png") no-repeat center;
}
.icon-just-end{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-just-end.png") no-repeat center;
}
.icon-just-sp-bet{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-just-sp-bet.png") no-repeat center;
}
.icon-just-sp-ar{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-just-sp-ar.png") no-repeat center;
}
.icon-just-sp-cent{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-just-sp-cent.png") no-repeat center;
}
.icon-al-start{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-al-start.png") no-repeat center;
}
.icon-al-end{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-al-end.png") no-repeat center;
}
.icon-al-str{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-al-str.png") no-repeat center;
}
.icon-al-center{
background: url("//repo.bfw.wiki/bfwrepo/images/grapesjs/flex-al-center.png") no-repeat center;
}
[data-tooltip]::after {
background: rgba(51, 51, 51, 0.9);
}
.gjs-pn-commands {
min-height: 40px;
}
#gjs-sm-float {
display: none;
}
.gjs-logo-version {
background-color: #756467;
}
.gjs-pn-btn.gjs-pn-active {
box-shadow: none;
}
.CodeMirror {
min-height: 450px;
margin-bottom: 8px;
}
.grp-handler-close {
background-color: transparent;
color: #ddd;
}
.grp-handler-cp-wrap {
border-color: transparent;
}
body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
#toast-container {
font-size: 13px;
font-weight: lighter;
}
#toast-container > div {
opacity: 0.95;
}
#toast-container > div,
#toast-container > div:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
font-family: Helvetica, sans-serif;
}
/* LOGO VERSION */
.gjs-pn-commands .gjs-pn-buttons,
#gjs-pn-commands .gjs-pn-buttons {
display: none;
}
.gjs-logo {
height: 25px;
}
.gjs-logo-cont {
position: relative;
display: inline-block;
top: 3px;
}
.gjs-logo-version {
position: absolute;
font-size: 10px;
padding: 1px 7px;
border-radius: 15px;
bottom: 2px;
right: -43px;
}
/* INFO PANEL */
.gjs-mdl-dialog-sm {
width: 300px;
}
#info-panel {
line-height: 17px;
}
.info-panel-logo {
display: block;
height: 90px;
margin: 0 auto;
width: 90px;
}
.info-panel-logo path {
stroke: #eee !important;
stroke-width: 8 !important;
}
.info-panel-label {
margin-bottom: 10px;
font-size: 13px;
}
.info-panel-link {
text-decoration: none;
}
/* ADS */
.gjs-pn-panel#gjs-pn-views-container,
.gjs-pn-panel.gjs-pn-views-container {
height: calc(100% - 150px);
}
.ad-cont {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 15%;
height: 150px;
}
#carbonads {
font: caption;
padding: 20px 10px;
}
.carbon-link {
text-decoration: none;
font: caption;
}
.carbon-img {
float: right;
margin-left: 10px;
}
.carbon-img img {
border-radius: 3px;
max-width: 100px !important;
max-height: 77px;
}
.carbon-text {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-weight: lighter;
}
.carbon-poweredby {
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
float: right;
}
.carbon-cta-c {
text-align: right;
padding-top: 5px;
}
.carbon-cta {
display: inline-block;
padding: 4px 10px;
border-radius: 3px;
font-weight: bold;
font-size: 12px;
}
.gjs-block-label svg,
.gjs-block__media svg {
width: 54px;
}
/* Temporary fix #2490 */
.gjs-clm-tag-status,
.gjs-clm-tag-close {
width: 12px;
height: 12px;
}
.gjs-clm-tags-btn {
width: 24px;
}
</style>
</head>
<body>
<div style="display: none">
<div class="gjs-logo-cont">
<a href=""><img class="gjs-logo" src="//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png"></a>
<div class="gjs-logo-version"></div>
</div>
</div>
<div id="gjs" style="height:0px; overflow:hidden">
<header class="header-banner">
<div class="container-width">
<div class="logo-container">
<div class="logo">Logo</div>
</div>
<nav class="menu">
<div class="menu-item">BUILDER</div>
<div class="menu-item">TEMPLATE</div>
<div class="menu-item">WEB</div>
</nav>
<div class="clearfix"></div>
<div class="lead-title">Build your templates without coding</div>
<div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
<div class="lead-btn">Hover me</div>
</div>
</header>
<section class="flex-sect">
<div class="container-width">
<div class="flex-title">Flex is the new black</div>
<div class="flex-desc">With flexbox system you're able to build complex layouts easily and with free responsivity</div>
<div class="cards">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<div class="card-title">Title one</div>
<div class="card-sub-title">Subtitle one</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch2"></div>
<div class="card-body">
<div class="card-title">Title two</div>
<div class="card-sub-title">Subtitle two</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch3"></div>
<div class="card-body">
<div class="card-title">Title three</div>
<div class="card-sub-title">Subtitle three</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch4"></div>
<div class="card-body">
<div class="card-title">Title four</div>
<div class="card-sub-title">Subtitle four</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch5"></div>
<div class="card-body">
<div class="card-title">Title five</div>
<div class="card-sub-title">Subtitle five</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
<div class="card">
<div class="card-header ch6"></div>
<div class="card-body">
<div class="card-title">Title six</div>
<div class="card-sub-title">Subtitle six</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
</div>
</section>
<section class="am-sect">
<div class="container-width">
<div class="am-container">
<img class="img-phone" onmousedown="return false" src="//repo.bfw.wiki/bfwrepo/icon/5e7c6241d6756.png" />
<div class="am-content">
<div class="am-pre">ASSET MANAGER</div>
<div class="am-title">Manage your images with Asset Manager</div>
<div class="am-desc">You can create image blocks with the command from the left panel and edit them with double click</div>
<div class="am-post">Image uploading is not allowed in this demo</div>
</div>
</div>
</div>
</section>
<section class="blk-sect">
<div class="container-width">
<div class="blk-title">Blocks</div>
<div class="blk-desc">Each element in HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style</div>
<div class="price-cards">
<div class="price-card-cont">
<div class="price-card">
<div class="pc-title">Starter</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Starter feature 1</div>
<div class="pc-feature">+ Starter feature 2</div>
<div class="pc-feature odd-feat">+ Starter feature 3</div>
<div class="pc-feature">+ Starter feature 4</div>
<div class="pc-amount odd-feat">$ 9,90/mo</div>
</div>
</div>
<div class="price-card-cont">
<div class="price-card pc-regular">
<div class="pc-title">Regular</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Regular feature 1</div>
<div class="pc-feature">+ Regular feature 2</div>
<div class="pc-feature odd-feat">+ Regular feature 3</div>
<div class="pc-feature">+ Regular feature 4</div>
<div class="pc-amount odd-feat">$ 19,90/mo</div>
</div>
</div>
<div class="price-card-cont">
<div class="price-card pc-enterprise">
<div class="pc-title">Enterprise</div>
<div class="pc-desc">Some random list</div>
<div class="pc-feature odd-feat">+ Enterprise feature 1</div>
<div class="pc-feature">+ Enterprise feature 2</div>
<div class="pc-feature odd-feat">+ Enterprise feature 3</div>
<div class="pc-feature">+ Enterprise feature 4</div>
<div class="pc-amount odd-feat">$ 29,90/mo</div>
</div>
</div>
</div>
</div>
</section>
<section class="bdg-sect">
<div class="container-width">
<h1 class="bdg-title">The team</h1>
<div class="badges">
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
<div class="badge-body">
<div class="badge-name">Adam Smith</div>
<div class="badge-role">CEO</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
<div class="badge-body">
<div class="badge-name">John Black</div>
<div class="badge-role">Software Engineer</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="//repo.bfw.wiki/bfwrepo/image/64700adadc9a0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
<div class="badge-body">
<div class="badge-name">Jessica White</div>
<div class="badge-role">Web Designer</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-under">
<div class="container-width">
<div class="footer-container">
<div class="foot-lists">
<div class="foot-list">
<div class="foot-list-title">About us</div>
<div class="foot-list-item">Contact</div>
<div class="foot-list-item">Events</div>
<div class="foot-list-item">Company</div>
<div class="foot-list-item">Jobs</div>
<div class="foot-list-item">Blog</div>
</div>
<div class="foot-list">
<div class="foot-list-title">Services</div>
<div class="foot-list-item">Education</div>
<div class="foot-list-item">Partner</div>
<div class="foot-list-item">Community</div>
<div class="foot-list-item">Forum</div>
<div class="foot-list-item">Download</div>
<div class="foot-list-item">Upgrade</div>
</div>
<div class="clearfix"></div>
</div>
<div class="form-sub">
<div class="foot-form-cont">
<div class="foot-form-title">Subscribe</div>
<div class="foot-form-desc">Subscribe to our newsletter to receive exclusive offers and the latest news</div>
<input name="name" class="sub-input" placeholder="Name" />
<input name="email" class="sub-input" placeholder="Email" />
<button class="sub-btn" type="button">Submit</button>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container-width">
<div class="made-with">
made with GrapesJS
</div>
<div class="foot-social-btns">facebook twitter linkedin mail</div>
<div class="clearfix"></div>
</div>
</div>
</footer>
<style>
.clearfix{ clear:both}
.header-banner{
padding-top: 35px;
padding-bottom: 100px;
color: #ffffff;
font-family: Helvetica, serif;
font-weight: 100;
background-image:url("//repo.bfw.wiki/bfwrepo/image/6430c7d5ddf77.png") ;
background-attachment:scroll, scroll;
background-position:left top, center center;
background-repeat:no-repeat;
background-size: cover;
}
.container-width{
width: 90%;
max-width: 1150px;
margin: 0 auto;
}
.logo-container{
float: left;
width: 50%;
}
.logo{
background-color: #fff;
border-radius: 5px;
width: 130px;
padding: 10px;
min-height: 30px;
text-align: center;
line-height: 30px;
color: #4d114f;
font-size: 23px;
}
.menu {
float: right;
width: 50%;
}
.menu-item{
float:right;
font-size: 15px;
color:#eee;
width: 130px;
padding: 10px;
min-height: 50px;
text-align: center;
line-height: 30px;
font-weight: 400;
}
.lead-title{
margin: 150px 0 30px 0;
font-size: 40px;
}
.sub-lead-title{
max-width: 650px;
line-height:30px;
margin-bottom:30px;
color: #c6c6c6;
}
.lead-btn{
margin-top: 15px;
padding:10px;
width:190px;
min-height:30px;
font-size:20px;
text-align:center;
letter-spacing:3px;
line-height:30px;
background-color:#d983a6;
border-radius:5px;
transition: all 0.5s ease;
cursor: pointer;
}
.lead-btn:hover{
background-color:#ffffff;
color:#4c114e;
}
.lead-btn:active{
background-color:#4d114f;
color:#fff;
}
.flex-sect{
background-color: #fafafa;
padding: 100px 0;
font-family: Helvetica, serif;
}
.flex-title{
margin-bottom: 15px;
font-size: 2em;
text-align: center;
font-weight: 700;
color:#555;
padding: 5px;
}
.flex-desc{
margin-bottom: 55px;
font-size: 1em;
color: rgba(0, 0, 0, 0.5);
text-align: center;
padding: 5px;
}
.cards{
padding: 20px 0;
display: flex;
justify-content: space-around;
flex-flow: wrap;
}
.card{
background-color: white;
height: 300px;
width:300px;
margin-bottom:30px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 2px;
transition: all 0.5s ease;
font-weight: 100;
overflow: hidden;
}
.card:hover{
margin-top: -5px;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
}
.card-header{
height: 155px;
background-image:url("https://via.placeholder.com/350x250/78c5d6/fff");
background-size:cover;
background-position:center center;
}
.card-header.ch2{
background-image:url("https://via.placeholder.com/350x250/459ba8/fff");
}
.card-header.ch3{
background-image:url("https://via.placeholder.com/350x250/79c267/fff");
}
.card-header.ch4{
background-image:url("https://via.placeholder.com/350x250/c5d647/fff");
}
.card-header.ch5{
background-image:url("https://via.placeholder.com/350x250/f28c33/fff");
}
.card-header.ch6{
background-image:url("https://via.placeholder.com/350x250/e868a2/fff");
}
.card-body{
padding: 15px 15px 5px 15px;
color: #555;
}
.card-title{
font-size: 1.4em;
margin-bottom: 5px;
}
.card-sub-title{
color: #b3b3b3;
font-size: 1em;
margin-bottom: 15px;
}
.card-desc{
font-size: 0.85rem;
line-height: 17px;
}
.am-sect{
padding-top: 100px;
padding-bottom: 100px;
font-family: Helvetica, serif;
}
.img-phone{
float: left;
}
.am-container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/*
.am-container{
perspective: 1000px;
}*/
.am-content{
float:left;
padding:7px;
width: 490px;
color: #444;
font-weight: 100;
margin-top: 50px;
}
.am-pre{
padding:7px;
color:#b1b1b1;
font-size:15px;
}
.am-title{
padding:7px;
font-size:25px;
font-weight: 400;
}
.am-desc{
padding:7px;
font-size:17px;
line-height:25px;
}
.am-post{
padding:7px;
line-height:25px;
font-size:13px;
}
.blk-sect{
padding-top: 100px;
padding-bottom: 100px;
background-color: #222222;
font-family: Helvetica, serif;
}
.blk-title{
color:#fff;
font-size:25px;
text-align:center;
margin-bottom: 15px;
}
.blk-desc{
color:#b1b1b1;
font-size:15px;
text-align:center;
max-width:700px;
margin:0 auto;
font-weight:100;
}
.price-cards{
margin-top: 70px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.price-card-cont{
width: 300px;
padding: 7px;
float:left;
}
.price-card{
margin:0 auto;
min-height:350px;
background-color:#d983a6;
border-radius:5px;
font-weight: 100;
color: #fff;
width: 90%;
}
.pc-title{
font-weight:100;
letter-spacing:3px;
text-align:center;
font-size:25px;
background-color:rgba(0, 0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0