grapejs自定义按钮和pannel面板示例代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：grapejs自定义按钮和pannel面板示例代码，包括自定义styleManager、traitManager、selectorManager、storageManager、blockManager、deviceManager及panels面板和主题色设置。

代码标签： grapejs 自定义按钮 pannel 面板示例代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/filesaver.js"></script>
    <style>
        $primaryColor: #444;
    $secondaryColor: #ddd;
    $tertiaryColor: #804f7b;
    $quaternaryColor: #d278c9;
      body, html {
              margin: 0;
              font: caption;
              height: 100%;
            }
    /* We can remove the border we've set at the beginnig */
    #gjs {
      border: none;
    }
    /* Theming */
    
    /* Primary color for the background */
    .gjs-one-bg {
      background-color: #78366a;
    }
    
    /* Secondary color for the text color */
    .gjs-two-color {
      color: rgba(255, 255, 255, 0.7);
    }
    
    /* Tertiary color for the background */
    .gjs-three-bg {
      background-color: #ec5896;
      color: white;
    }
    
    /* Quaternary color for the text color */
    .gjs-four-color,
    .gjs-four-color-h:hover {
      color: #ec5896;
    }
          
            
        /* Let's highlight canvas boundaries */
    #gjs {
      border: 3px solid #444;
    }
    
    /* Reset some default styling */
    .gjs-cv-canvas {
      top: 0;
      width: 100%;
      height: 100%;
    }
.gjs-block {
  width: auto;
  height: auto;
  min-height: auto;
}
       .panel__top {
  padding: 0;
  width: 100%;
  display: flex;
  position: initial;
  justify-content: center;
  justify-content: space-between;
}

    .panel__basic-actions {
      position: initial;
    }
    .panel__switcher {
  position: initial;
}
    .editor-row {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 300px;
}

.editor-canvas {
  flex-grow: 1;
}

.panel__right {
  flex-basis: 230px;
  position: relative;
  overflow-y: auto;
}
    
    .editor-canvas {
      flex-grow: 1;
    }
    .panel__devices {
  position: initial;
}
    </style>
</head>

<body>
    <div class="panel__top">
        <div class="panel__basic-actions"></div>
        <div class="panel__devices"></div>
        <div class="panel__switcher"></div>
    </div>
    <div class="editor-row">
        <div class="editor-canvas">
            <div id="gjs"></div>
        </div>
        <div class="panel__right">
            <div class="layers-container"></div>
            <div class="styles-container"></div>
            <div class="traits-container"></div>
        </div>
    </div>
    <div id="blocks"></div>


    <script>
        var editor = grapesjs.init({
             // Indicate where to init the editor. You can also pass an HTMLElement
  container: '#gjs',
  // Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,
  // Size of the editor
  height: '80%',
  width: 'auto',
  layerManager: {
    appendTo: '.layers-container'
  },
  deviceManager: {
    devices: [{
        name: 'Desktop',
        width: '', // default size
      }, {
        name: 'Mobile',
        width: '320px', // this value will be used on canvas width
        widthMedia: '480px', // this value will be used in CSS @media
    }]
  },
  // We define a default panel as a sidebar to contain layers
 panels: {
    defaults: [
      // ...
      {
        id: 'panel-switcher',
        el: '.panel__switcher',
        buttons: [{
            id: 'show-layers',
            active: true,
            label: 'Layers',
            command: 'show-layers',
            // Once activated disable the possibility to turn it off
            togglable: false,
          }, {
            id: 'show-style',
            active: true,
            label: 'Styles',
            command: 'show-styles',
            togglable: false,
        }],
      },
      {
        id: 'panel-switcher',
        el: '.panel__switcher',
        buttons: [
          // ...
          {
            id: 'show-traits',
            active: true,
            label: 'Traits',
            command: 'show-traits',
            togglable: false,
        }],
  
  },
  
   {
        id: 'panel-devices',
        el: '.panel__devices',
        buttons: [{
            id: 'device-desktop',
            label: 'D',
            command: 'set-device-desktop',
            active: true,
            togglable: false,
          }, {
            id: 'device-mobile',
            label: 'M',
            command: 'set-device-mobile',
            togglable: false,
        }],
      }

    ]
  },

  // The Selector Manager allows to assign classes and
  // different states (eg. :hover) on components.
  // Generally, it's used in conjunction with Style Manager
  // but it's not mandatory
  selectorManager: {
    appendTo: '.styles-container'
  },
    traitManager: {
    appendTo: '.traits-container',
  },
  styleManager: {
    appendTo: '.styles-container',
    sectors: [{
        name: 'Dimension',
        open: false,
        // Use built-in properties
        buildProps: ['width', 'min-height', 'padding&#.........完整代码请登录后点击上方下载按钮下载查看