GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

How can i customize video blocks a #2754

Closed shakil-official closed 4 years ago

shakil-official commented 4 years ago

I want to create a video gallery-like image gallery. After drop video block shows the gallery . How can I do that?

I using grapesjs-preset-webpage plugin . try to below code that not working ..

var editor = grapesjs.init({ height: '100%', showOffsets: 1, noticeOnUnload: 0,
container: '#gjs', fromElement: true,

    plugins: ['gjs-preset-webpage' , 'gjs-blocks-basic'],
      storageManager: {
      autoload: 0,
      autosave: false,
      setStepsBeforeSave: 1,           
      contentTypeJson: true,
      },
    pluginsOpts: {
      'gjs-preset-webpage': {},
      'gjs-blocks-basic' : {
        'block' : {
            'video' : {
              label: 'Updated simple block',
              attributes: {
                title: 'My title'
              }
            }

        }
      }
    },
    commands: {
        defaults: [

        ],
      }, 

    });

editor.Panels.addButton
  ('options',
    [{
      id: 'save-db',
      className: 'fa fa-floppy-o',
      command: 'save-db',
      attributes: {title: 'Save'}
    }]
  );

// Add the command
editor.Commands.add
('save-db',
{
    run: function(editor, sender)
    {

      sender && sender.set('active', 0); // turn off the button
      editor.store();

      var htmldata = editor.getHtml();
      var cssdata = editor.getCss();

      console.log(htmldata);
      console.log(cssdata);

      console.log(htmldata);
      console.log(cssdata);
        $.post("https://reqbin.com/echo",
      {
        html: htmldata,
        css: cssdata
      }); 
    }
});

var blockManager = editor.BlockManager;

var c = blockManager.get('video').set({
  label: 'e',
  category: 'Basic',
  changing : true,
  attributes: {
    title: 'My title'
  },
  content: {
    type: 'video', // Built-in 'video' component
    style: {

    },
    removable: false, // Once inserted it can't be removed
  }
})

console.log(c);
artf commented 4 years ago

Hi @ShakilAhmedMunna, you have to use custom Components

shakil-official commented 4 years ago

I did not understand how to use that .. Have any tutorial that

nadhu2013 commented 1 year ago

is there any solution for this ticket because i need the same as I using grapesjs-preset-webpage plugin

amir7896 commented 8 months ago

i also need a solution for this is any update ?