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

代码语言：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 {.........完整代码请登录后点击上方下载按钮下载查看