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>
</di.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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