Comments (4)
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' }
}
from grapesjs.
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.
from grapesjs.
@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);
});
from grapesjs.
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.
from grapesjs.
Related Issues (20)
- BUG: Can't set background:none in mobile version using styles panel HOT 3
- BUG: "storage:end:load" event is not triggered when all components are mounted into the canvas HOT 1
- BUG: Layer manager not refreshing on page change HOT 3
- BUG: Cannot expand previously empty layers HOT 1
- BUG: Incorrect type definition for StyleManagerConfig.sectors.properties
- BUG: Old Component script is not deleted on Import. Resulting in duplicate scripts HOT 2
- BUG: Border is not taken into consideration when showing placeholder on empty elements HOT 1
- BUG: configuring an onStart() resize callback prevents resizing HOT 1
- BUG: Undo manager add() not working as expected HOT 1
- BUG: Add a change to the undomanager HOT 1
- BUG: Cannot select component in ``component:remove`` handler HOT 2
- BUG: Undomanager.remove() not working HOT 1
- BUG: When inserting text when component not synced, the text is overwritten from the existing model HOT 1
- BUG: HTML Comment Tags disable text edit
- BUG: sourcemap not loading for CompoentTextView HOT 1
- BUG: The infinite canvas is increasing its height infinitely when there is an element with a min-height of 100vh HOT 1
- BUG: HOT 1
- BUG: Commands.runCommand not working for built in command HOT 1
- BUG: <> is introduced at the beginning editor.getHtml() HOT 3
- BUG: Undo not working while seleting background or text color through color picker HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grapesjs.