[Question]: How to change device from dropdown to icon
Question
I'm trying to replace the dropdown with icon for the devices following the example in the newsletter template yet it doesn't work.
//custom commands
// Turn off default devices select and create new one
let pnm = editor.Panels;
editor.getConfig().showDevices = false;
let devicePanel = pnm.addPanel({
id: 'devices-c'
});
let deviceBtns = devicePanel.get('buttons');
devicePanel.get('buttons').add([{
id: 'deviceDesktop',
command: 'set-device-desktop',
className: 'fa fa-desktop',
attributes: {title: 'Desktop'},
active: 1,
}, {
id: 'deviceTablet',
command: 'set-device-tablet',
className: 'fa fa-tablet',
attributes: {title:'Tablet'},
}, {
id: 'deviceMobile',
command: 'set-device-mobile',
className: 'fa fa-mobile',
attributes: {title: 'Mobile'},
}])
Answers (3)
The above examples didn't work for me in version 0.17.28 (I presume the API has changed). This worked:
editor.getConfig().showDevices = 0;
editor.Panels.addPanel({
id: 'devices', buttons: [
{ id: "set-device-desktop", command: function (e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1 },
{ id: "set-device-tablet", command: function (e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
{ id: "set-device-mobile", command: function (e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" }
]
});
@petervandeput https://github.com/artf/grapesjs/issues/1507#issuecomment-496280105 After grapesjs init.
editor.getConfig().showDevices = 0;
editor.Panels.addPanel({ id: "devices-c" }).get("buttons").add([
{ id: "set-device-desktop", command: function(e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1},
{ id: "set-device-tablet", command: function(e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
{ id: "set-device-mobile", command: function(e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" },
]);
// Panel should re render again otherwise
// New button will not be shown on device panel
editor.Panels.render();
You should also create those commands https://github.com/artf/grapesjs-preset-newsletter/blob/04f1eb21c1ae45f8d2b2912323e79354d8e72f18/src/commands.js#L30-L44
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2360
[Question] How to add a new property type(integer) to StyleManager?
Hi, I am trying to create a custom StyleManager property with 'integer' type. My ultimate goal is to 're-define' how certain units are disp...
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #665
Custom component and save
Sorry, me again ! I'm trying to save my template with my new component "img-link" : But when I save my template using the gjs-get-inlined-h...
Issue #2144
[QUESTION] how to create custom element
Hi guys, I'm new in this so I'm sorry for my question. I'm trying to use grapesjs to edit email templates. Is it possible to have dynamic f...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.