grapesjs-plugins/grapesjs-symbols/es5.html

Rama main · réplica de lectura del repositorio original.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Symbols for GrapesJS</title>
    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
    <script src="https://unpkg.com/grapesjs"></script>
    <link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapesjs-preset-webpage.min.css">
    <script src="https://unpkg.com/grapesjs-preset-webpage"></script>
    <script xxdata-main="dist/es5/index.js" src="node_modules/requirejs/require.js"></script>
    <script>
      require.config({
        baseUrl: "dist/es5/",
        paths: {
          "backbone": "/node_modules/backbone/backbone",
          "underscore": "/node_modules/underscore/underscore",
          "jquery": "/node_modules/jquery/dist/jquery",
        },
      });

      require(['dist/es5/index.js'], function () {});
    </script>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
      }
      .gjs-editor-cont { height: 100% !important; }
    </style>
  </head>
  <body>

    <div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
    <div id="gjs">
    </div>

    <script type="text/javascript">
      window.onload = () => {
      window.editor = grapesjs.init({
        container: '#gjs',
        //storageManager: false,
        autosave: false,
        noticeOnUnload: false,
        plugins: [
          'grapesjs-preset-webpage',
          '@silexlabs/grapesjs-symbols',
        ],
        pluginsOpts: {
          'grapesjs-preset-webpage': {},
          '@silexlabs/grapesjs-symbols': {
            appendTo: '.gjs-pn-views-container',
          },
        },
        pageManager: {
          pages: [{
              id: 'page-1',
              name: 'Page 1',
            },
            {
              id: 'page-2',
              name: 'Page 2',
            },
          ],
        }
      })

      var idx = 0
      editor.on('load', () => {
        const colors = ['red', 'blue', 'grey', 'yello', 'black', 'orange', 'chocolate', 'cadetblue', 'blueviolet']
        const color = colors[Math.floor(Math.random() * colors.length)]
        editor.addComponents(`<div style="min-height: 100px; background: ${color};"></div>`);

        editor.Panels.addPanel({
          id: 'basic-actions',
          el: '.panel__basic-actions',
          buttons: [
            {
              id: 'create-button',
              label: 'Create symbol',
              command(editor) {
                var label = prompt('Label', 'Symbol ' + ++idx)
                var icon = prompt('Icon', 'fa-list')
                editor.runCommand('symbols:add', { label, icon })
              },
            },
            {
              id: 'separator',
              label: '|',
            },
          ].concat(editor.Pages.getAll().flatMap(p => ([{
            id: 'button' + p.cid,
            label: p.getName() || 'no name?',
            command(editor) {
              editor.Pages.select(p)
            },
          },
            {
              id: 'separator' + p.cid,
              label: '|',
            },
          ])))
        })
        //setTimeout(() => {
        //  const data = JSON.parse(localStorage.getItem('init'))
        //  if(data) editor.loadData(data)
        //})
      })
      editor.addComponents([`
        <div class="main" style="padding: 20px; background: lightblue;">
          <h1 class="title">Test title</h1>
          <p class="content">Test content text lorem ipsum</p>
        </div>
      `])
      }
    </script>
  </body>
</html>