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

代码语言：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>
<body>
    <div class="panel__top">
        <div class="panel__basic-actions">
            <button id="show-json"><i class="fas fa-code"></i> JSON</button>
            <button id="show-html"><i class="fas fa-file-code"></i> HTML</button>
            <button id="show-css"><i class="fas fa-file-alt"></i> CSS</button>
        </div>
        <div class="panel__devices"></div>
        <div class="panel__switcher"></div>
        <button id="dark-mode-toggle"><i class="fas fa-moon"></i></button>
    </div>
    <div class="editor-row">
        <div class="panel__left">
            <div class="tab-buttons">
                <button class="tab-button active" data-tab="elements"><i class="fas fa-th-large"></i> Elements</button>
                <button class="tab-button" data-tab="pages"><i class="fas fa-file"></i> Pages</button>
            </div>
            <div id="elements-tab" class="tab-content active">
                <div class="blocks-container"></div>
            </div>
            <div id="pages-tab" class="tab-content">
                <div class="pages-container">
                    <button id="add-page">Add New Page</button>
                    <select id="page-selector"></select>
                </div>
            </div>
        </div>
        <div class="editor-canvas">
            <div id="gjs"></div>
        </div>
        <div class="panel__right">
            <div class="panel__right-header">
                Settings
            </div>
            <div class="layers-container"></div>
            <div class="styles-container"></div>
            <div class="traits-container"></div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentPage = null;
            let db;

            const editor = grapesjs.init({
                container: '#gjs',
                height: '100%',
                width: 'auto',
                storageManager: false,
                panels: { defaults: [] },
                blockManager: {
                    appendTo: '.blocks-container',
                },
                layerManager: {
                    appendTo: '.layers-container'
                },
                styleManager: {
                    appendTo: '.styles-container',
                },
                traitManager: {
                    appendTo: '.traits-container',
                },
                
                deviceManager: {
                    devices: [
                        { name: 'Desktop', width: '' },
                        { name: 'Tablet', width: '768px', widthMedia: '992px' },
                        { name: 'Mobile', width: '320px', widthMedia: '480px' }
                    ]
                },
            });

            // Initialize IndexedDB
            const dbName = 'WebsiteBuilderDB';
            const dbVersion = 1;
            const request = indexedDB.open(dbName, dbVersion);

            request.onerror = function(event) {
                console.error("IndexedDB error:", event.target.error);
            };

            request.onsuccess = function(event) {
                db = event.target.result;
                console.log("IndexedDB initialized successfully");
                loadPages();
            };

            request.onupgradeneeded = function(event) {
                db = event.target.result;
                const objectStore = db.createObjectStore("pages", { keyPath: "name" });
                objectStore.createIndex("name", "name", { unique: true });
            };

            // Save page to IndexedDB
            function savePage(pageName, pageData) {
                const transaction = db.transaction(["pages"], "readwrite");
                const objectStore = transaction.objectStore("pages");
                const request = objectStore.put({ name: pageName, data: pageData });

                request.onerror = function(event) {
                    console.error("Error saving page:", event.target.error);
                };

                request.onsuccess = function(event) {
                    console.log("Page saved successfully");
                };
            }

            // Load page from IndexedDB
            function loadPage(pageName) {
                const transaction = db.transaction(["pages"], "readonly");
                const objectStore = transaction.objectStore("pages");
                const request = objectStore.get(pageName);

                request.onerror = function(event) {
                    console.error("Error loading page:", event.target.error);
                };

                request.onsuccess = function(event) {
                    const pageData = event.target.result;
                    if (pageData) {
                        editor.setComponents(pageData.data.html);
                        editor.setStyle(pageData.data.css);
                        currentPage = pageName;
                        updateActivePageInList();
                    } else {
                        console.log("Page not found");
                    }
                };
            }

            // Load all page names
            function loadPages() {
                const transaction = db.transaction(["pages"], "readonly");
                const objectStore = transaction.objectStore("pages");
                const request = objectStore.getAllKeys();

                request.onerror = function(event) {
                    console.error("Error loading pages:", event.target.error);
                };

                request.onsuccess = function(event) {
                    const pageNames = event.target.result;
                    if (pageNames.length === 0) {
                        // If no pages exist, create a default "Home" page
                        createNewPage("Home");
                    } else {
                        renderPages(pageNames);
                        loadPage(pageNames[0]); // Load the first page
                    }
                };
            }

            // Render page list
            function renderPages(pageNames) {
                const pageSelector = document.getElementById('page-selector');
                pageSelector.innerHTML = '';
                pageNames.forEach(pageName => {
                    const option = document.createElement('option');
                    option.value = pageName;
                    option.textContent = pageName;
                    pageSelector.appendChild(option);
                });
            }

            // Switch page
            function switchPage(pageName) {
                if (currentPage) {
                    savePage(currentPage, {
                        html: editor.getHtml(),
                        css: editor.getCss()
                    });
                }
                loadPage(pageName);
            }

            // Create new page
            function createNewPage(pageName) {
                savePage(pageName, { html: '', css: '' });
                loadPages(); // Reload page list
            }

            // Update active page in the list
            function updateActivePageInList() {
                const pageSelector = document.getElementById('page-selector');
                pageSelector.value = currentPage;
            }

            // Add new page button functionality
            document.getElementById('add-page').addEventListener('click', () => {
                const pageName = prompt('Enter new page name:');
                if (pageName) {
                    createNewPage(pageName);
                }
            });

            // Page selector functionality
            docu.........完整代码请登录后点击上方下载按钮下载查看