grapesjs实现可视化自定义菜单面板多网页设计器代码-html代码-BFW代码库

grapesjs实现可视化自定义菜单面板多网页设计器代码

代码语言：html

所属分类：其他

代码描述：grapesjs实现可视化自定义菜单面板多网页设计器代码，可新增和删除页面，切换页面，可视化编辑。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GrapesJS Website Builder </title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.9.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.9.js"></script>
    <style>
        body, html {
            margin: 0;
            height: 100%;
            font-family: Arial, sans-serif;
           background-color: #1e1e1e;
            color: #f0f0f0;
             
        }
        body .dark-mode {
          
        }
        #gjs {
            height: calc(100vh - 40px);
        }
        .panel__top {
            padding: 0;
            width: 100%;
            display: flex;
            position: initial;
            justify-content: space-between;
            background-color: #2c2c2c;
            color: #fff;
        }
        .panel__basic-actions {
            position: initial;
            padding: 0 10px;
        }
        .panel__devices {
            position: initial;
        }
        .panel__switcher {
            position: initial;
        }
        .editor-row {
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            flex-wrap: nowrap;
            height: calc(100% - 40px);
        }
        .editor-canvas {
            flex-grow: 1;
            height: 100%;
        }
        .panel__left {
            flex-basis: 230px;
            position: relative;
            overflow-y: auto;
            background-color: #2c2c2c;
        }
        .panel__right {
            flex-basis: 280px;
            position: relative;
            overflow-y: auto;
            background-color: #2c2c2c;
        }
        .panel__left-header,
        .panel__right-header {
            background-color: #3c3c3c;
            padding: 10px;
            font-weight: bold;
        }
        .blocks-container,
        .pages-container,
        .layers-container,
        .styles-container,
        .traits-container {
            padding: 10px;
        }
        .gjs-block {
            width: 100%;
            height: auto;
            min-height: 40px;
            margin: 5px 0;
            cursor: move;
            text-align: center;
            color: #f0f0f0;
            background-color: #3c3c3c;
        }
        .panel__top button {
            background: none;
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
        }
        .panel__top button:hover {
            background-color: #4c4c4c;
        }
        .gjs-pn-btn.fa {
            font-size: 16px;
            padding: 10px;
        }
        .tab-buttons {
            display: flex;
            background-color: #3c3c3c;
        }
        .tab-button {
            flex: 1;
            padding: 10px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            color: #f0f0f0;
        }
        .tab-button.active {
            background-color: #4c4c4c;
            border-bottom: 2px solid #007bff;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        #page-list li {
            cursor: pointer;
            padding: 5px;
            margin: 5px 0;
            background-color: #3c3c3c;
            border-radius: 3px;
        }
        #page-list li.active {
            background-color: #007bff;
            color: white;
        }
        #page-selector {
            background-color: #3c3c3c;
            color: #f0f0f0;
            border: none;
            padding: 5px;
            margin: 5px 0;
            width: 100%;
        }
        #dark-mode-toggle {
            background: none;
            border: none;
            color: #f0f0f0;
            cursor: pointer;
            font-size: 16px;
            padding: 10px;
        }
    </style>
</head&.........完整代码请登录后点击上方下载按钮下载查看