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%; background-color: #1e1e1e; color: #f0f0f0; font-family: Arial, sans-serif; } 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; display: flex; justify-content: space-between; align-items: center; } #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; } .addbtn{ width:100%; background: #007bff; border: none; color:white; height:30px; } </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" class="addbtn">Add New Page</button> <div id="page-list"></div> </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' } ] }, }); // Add custom blocks editor.BlockManager.add('section', { label: 'Section', content: '<section class="bdg-sect"><h1 class="heading">Insert title here</h1><p class="paragraph">Lorem ipsum...</p></section>', category: 'Basic', }); editor.BlockManager.add('text', { label: 'Text', .........完整代码请登录后点击上方下载按钮下载查看
网友评论0