Open source visual low-code page building framework GrapesJS Getting Started (2)

This article is to introduce the visual page builder GrapesJS series of the second article, this series is mainly to introduce GrapesJS and with GrapesJS visualization tool how to integrate with the CMS.

GrapesJS is a visual , open source web page builder , this article is mainly on GrapesJS to do a basic introduction to the basics of GrapesJS , the architecture of GrapesJS, as well as the basic development and the basic concepts of GrapesJS to do some of the introductory guidelines .

GrapesJS is an open source, extensible page builder. It allows users to create complex pages without writing code by providing an easy-to-use interface.GrapesJS uses modern JavaScript frameworks and libraries to provide great performance and ease of use.

Grapes.js has a range of built-in components such as images, text, buttons, and videos that can be quickly assembled to create a variety of different types of pages. Users can also extend the functionality of GrapesJS with plugins to meet specific needs.

GrapesJS also has great design tools that allow users to easily adjust the position, size, and color of elements and to complete the appearance of the page using predefined styles or custom styles.

GrapesJS has the following advantages over other page builders or frameworks:

1. Visualization: GrapesJS provides a visual interface that allows users to create pages by dragging and dropping and placing elements without writing code.
2. Extensibility: GrapesJS is very extensible, users can install plug-ins to extend its functionality to meet specific needs.
3. Highly efficient: GrapesJS uses modern JavaScript frameworks and libraries such as React and Redux to provide great performance and ease of use.
4. Design Tools: GrapesJS has great design tools that allow users to easily adjust the position, size and color of elements and use predefined styles or custom styles to complete the appearance of the page.
5. Open Source: GrapesJS is an open source project that allows users to use and contribute code for free to improve the quality and functionality of the project.

All in all, GrapesJS is an excellent choice for a page builder that combines visualization, scalability, efficiency and powerful design tools.

First of all, GrapesJS is based on Backbone, Backbone a basic JS framework, so the architecture of Backbone is equivalent to the architecture of GrapesJS, let's take a brief look at the architecture of GrapesJS.

The code architecture foundation of GrapesJS:

1. Core: The core of GrapesJS is responsible for managing the overall layout and interaction of the page, including the management of models, views and controllers.
2. Models: GrapesJS models are responsible for storing data for page elements. Models use the Backbone.js library to manage data for quick and easy manipulation of data.
3. Views: GrapesJS views are responsible for rendering page elements. Views are managed using the Backbone.js view system and data is rendered through the Mustache.js template system.
4. Controller: The controller of GrapesJS is responsible for handling user interactions such as mouse clicks and keyboard input. The controller uses the jQuery library for event handling and manages models and views through the core.
5. Plugins: Plugins for GrapesJS are responsible for extending the functionality of GrapesJS. Plugins can use the functionality of the core, models, views and controllers to implement customized features.

 The base element of GrapesJS:

1. Component： A virtual dom element, such as a div, an img, etc., is a component inside Grapes.

2. Component Type:  Virtual dom types such as img, input, div, etc all are.

editor.DomComponents.addType('my-custom-type', {
// ...
model: {
defaults: {
// defined above
},
init() {
// Listen to any attribute change
this.on('change:attributes', this.handleAttrChange);
// Listen to title attribute change
this.on('change:attributes:title', this.handleTitleChange);
},
handleAttrChange() {
console.log('Attributes updated: ', this.getAttributes());
},
handleTitleChange() {
console.log('Attribute title updated: ', this.getAttributes().title);
},
}
});
                                        

3. Block： A component block containing one or more components that can be dragged and dropped and have their properties set, the WYSIWYG widgets in grapes.

 const myFirstBlock = editor = {
var blockManager = editor.BlockManager;
// 'my-first-block' is the ID of the block
blockManager.add('my-first-block', {
label: 'Button',
content: {
type: button, 
tagName: 'button',
draggable: false,
attributes: { class: 'container'},
style: { 'background-color': '#ffffff' },
content: "Change Title",
}
});
}
                                        

4. Panels: A collection of tools, such as the default panel that includes preview, clear, and other actions.

5. LayerManager: Layer management, which can provide management of layers of HTML.

6. StyleManager: Provides style management and definition for Component.

7. Traits: It's the attributes of the element, such as title, placeholder, etc.

domComponents.addType('my-custom-type', {
model: {
defaults: {
traits: [  ...domComponents.getType('my-custom-type').model.prototype.defaults.traits,
{
type: 'select',
label: 'Custom Trait',
name: 'custom_trait',
options: [
{ value: '', name: 'None' },
{ value: 'Js', name: 'Javascript}
]
}
],
}
}
});
                                         

8. StorageManager: We have created a page, to store the current page, Grapes provides a storage manager, the default is stored to the local disk, but here we can docking API, stored in the database, such as docking Drupal, stored in Drupal's backend LandingPage.

storageManager: {
id: 'gjs-', // Prefix identifier that will be used inside storing and loading
type: 'local',
autosave: true,
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
},
                                        

9. Events：Events are a way for us to add some customization or modification to some of the system's native operations. GrapesJS also provides a lot of events, which can be handled by listening to them in response to these actions.

editor.on('load', () => {
let styleManager = editor.StyleManager;
let fontProperty = styleManager.getProperty('typography',  'font-family');
fontProperty.set('defaults', 'Roboto');
styleManager.render();
});
                                        

10. Commands：Command is similar to some common functions for us to develop code when called, such as clearing the canvas is  canvas-clear, so you can clear the canvas through the following code :  editor.runCommand ('canvas-clear'); you can also customize the command.

editor.Commands.add('custom-command', {
run(editor) {
alert(`Command is active`) 
return “Grapesjs”
}
stop(editor) {
alert(`Command is disabled`)
}
})
                                        

11. Plugin：Equivalent to a set of code, this code in the form of a plugin , loaded by GrapesJS to use , so the Plugin can write command, event, block, component and so on all the elements of GrapesJS or call the API.

Drupal与GrapesJS集成演示请点击这里>>

It is not easy to create!Reprinted with attribution!

For more on Drupal and content management systems, see our other related articles.