search

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.4k stars 4.06k forks source link

How to add select filed in header bar on editor #55

Closed desilvaNSP closed 7 years ago

desilvaNSP commented 7 years ago

How can I add select filed on header bar screenshot from 2017-03-15 13 33 30

please give me a solution for my problem

I want to add custom UI element on your header bar in editor,How can i do it?

imsaeedafzal commented 7 years ago

Please go thru the demo.js file in detail. Scroll to the bottom and modify the following code to add new desired option in top header bar.

,{ id: 'clean-all', className: 'fa fa-trash icon-blank', command: function(editor, sender) { if(sender) sender.set('active',false); if(confirm('Are you sure to clean the canvas?')){ var comps = editor.DomComponents.clear(); localStorage.setItem('gjs-css', ''); localStorage.setItem('gjs-html', ''); } }, attributes: { title: 'Empty canvas' } }

desilvaNSP commented 7 years ago

I have overide grapejs.init in my code.not in the demo.js


`    var editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
        plugins: ['gjs-plugin-export'],
        pluginsOpts: {
            'gjs-plugin-export': {
                btnLabel: 'EXPORT',
                preHtml: '<!doctype><html><head><link rel="stylesheet" href="./css/style.css"></head><body>'
            }
        }
    });
`

How I add new element into this.
artf commented 7 years ago

@desilvaNSP if the built-in button interface (illustrated also by @sirsmac) doesn't fit your needs just use your UI components. Quick example

var selectEl = $('<select> <option>Desktop</option> <option>Tablet</option> </select>');
selectEl.appendTo('#gjs-pn-options .gjs-pn-buttons');
selectEl.on('change', function() {
  // Use GrapesJS's API if you need to
  editor.setDevice(this.value);
});
lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.