grapesjs实现网页可视化拖拽编辑器效果代码

代码语言:html

所属分类:其他

代码描述:grapesjs实现网页可视化拖拽编辑器效果代码,可直接拖拽设计网页,支持图片编辑、文字编辑、倒计时、tab选项卡、视频、代码块、表单,打字动画、文字提示等组件。

代码标签: grapes 网页 可视化 拖拽 编辑器

下面为部分代码预览,完整代码请点击下载或在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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0