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

desilvaNSP · 2017-03-15T08:04:03Z

How can I add select filed on header bar

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 · 2017-03-15T09:09:30Z

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 · 2017-03-15T11:17:21Z

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 · 2017-03-15T12:50:37Z

@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 · 2019-09-18T18:57:25Z

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.

artf closed this as completed Mar 15, 2017

lock bot added the outdated label Sep 18, 2019

lock bot locked as resolved and limited conversation to collaborators Sep 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

desilvaNSP commented Mar 15, 2017 •

edited

imsaeedafzal commented Mar 15, 2017 •

edited

desilvaNSP commented Mar 15, 2017

artf commented Mar 15, 2017

lock bot commented Sep 18, 2019

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

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

Comments

desilvaNSP commented Mar 15, 2017 • edited

imsaeedafzal commented Mar 15, 2017 • edited

desilvaNSP commented Mar 15, 2017

artf commented Mar 15, 2017

lock bot commented Sep 18, 2019

desilvaNSP commented Mar 15, 2017 •

edited

imsaeedafzal commented Mar 15, 2017 •

edited