Open source CMS Drupal integration visualization build tool GrapesJS（1）

We've previously covered related visual page builder tools and the benefits of the open source GrapesJS, in a nutshell:

GrapesJS is an open source multi-functional Web Builder framework that provides a wealth of tools and features to help users build the web pages they want in their mind. With GrapesJS , even the average user who knows nothing about code , through simple drag and drop components and visual content editing , you can create beautiful , feature-rich pages .

For developers, GrapesJS provides rich APIs, such as component system, style system, responsive support, etc., which allows developers to easily customize the visual web editor to meet the business requirements, improve development efficiency and save costs.

Why we chose GrapesJS, and we'll be brief again here, we had the following requirements for a visualization build tool:

1. visualization, 2. open source, 3. ability to extend, 4. ability to define the output source code, and 5. ability to be paired with a CMS, meaning integrated with a content management system, rather than a separate tool.

So, to summarize, we chose GrapesJS, which fully meets the above requirements.

This article is a series of introduction, how we integrate Drupal, through the Grapes JS quickly build Drupal related theme pages.

For GrapesJS, we first from the technical level to do a simple understanding, in order to facilitate the follow-up with Drupal to achieve the landing of the integration.

Architecturally.

The code architecture of GrapesJS is divided into the following main sections:

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.

From the above analysis, we can see that the code architecture of GrapesJS is very flexible and extensible, using a variety of open-source libraries to provide fast and easy fuanctionality, and can be extended with plugins.

GrapesJS itself comes with a number of basic plug-ins , including some common controls , as a visual editor can be used out of the box , and as a framework , it also provides a rich API , we can meet the implementation of more extensions .

The main points include the following:

• Block Manager - Users can develop their own controls and components and load them dynamically. It also supports piecing together different components to realize new composite components.
• Style Manager  - comes with a style editor that covers commonly used CSS attributes and can be used like PS to adjust the style of page elements. Users can customize the style editor to meet their needs.
• Asset Manager - Comes with an image manager. Also supports replace with your own image solution.
• Commands - That is, custom operations, such as copying, moving components up and down, etc., can turn some complex logic into a common command bound to a button.
• Traits - Trait defines the parameters and behavior of the component, while GrapesJS provides several types by default, which can be used to generate the component's setup items by a simple declaration.

Drupal as a CMS system, provides a perfect content management, but its own theme system, although powerful, but with a certain development threshold, ordinary users want to modify the page content page to face the problem of high cost.

With the introduction of GrapesJS, users are able to convert reusable, easily editable components into Drupal recognizable Twig templates, with visual content and style editing replacing traditional code development, benefiting both developers and site Both developers and site maintainers can benefit from it.

To accomplish this, Drupal needs to build a library of Twig-based components, and GrapesJS needs to implement a Twig parser that converts twig components to HTML when they are placed in the edit area. After the user builds the page, a custom API service saves the page structure, component data, etc. to the Drupal database and automatically generates a complete twig page template file (page template) for Drupal to use when rendering the page. In this way, as long as the developer provides a rich enough components, ordinary users can easily create and maintain their own site pages.

For details of the technical structure, refer to the figure below:

1. Parsing twig in GrapesJS

Twig is not HTML, when GrapesJS loads a piece of twig code, GrapesJS will display it as plain text, which is obviously not the result we want, there are two ways to solve this problem:

1. Implement a custom tag parser that converts twigs to HTML comments when they are loaded and also generates placeholder elements.
2. Implement an on-the-fly twig rendering service that sends the twig template snippet to the service when the twig loads, gets the real HTML and displays it on the page

Method 1 can be done in the client, simple and fast, the disadvantage is that you can not see the real page effects
Method 2 needs to keep calling the API service, there will be a certain network consumption, but closer to the real page effect

2. Making Twig Components for GrapesJS

GrapesJS的Block Manager允许其加载远程的组件库。 为此，我们在Drupal下实现了一套组件库机制，借鉴Drupal modules的实现，每个组件均为一个文件夹，其下有组件元数据描述文件，模板html文件以及js、css文件。

For example, a hero folder represents a hero component, and the hero directory will contain hero.info.yml, hero.twig, hero.css, hero.js files

During the initialization of GrapesJS, a list of components is fetched through the API and dynamically added to the component library. Take hero as an example, when the component is used, the contents of hero.twig will be loaded into the edit area of GrapesJS through the parser, along with hero.css and hero.js. This way, the UI/UX of hero will be restored to the edit area.

The use of components can also be divided into two forms: reference form and copy form

• Referenced form - When the page is saved, only the component ID is saved, and the component is used in the form of include hero.twig. In this form, updates to the component will automatically take effect on the page.
• Copy form - When the page is saved, the content in hero.twig is saved directly. Updates to components do not automatically take effect on the page, the user must edit the page, delete the original component and re-add it to get the update. However, the advantage is that the user can modify the component's content, html, etc. without affecting other pages.

3. Persistent Storage Landing Page

GrapesJS Storage Manager supports exporting pages to html or json format, as well as css generated by the style editor.

In conjunction with Drupal, HTML is saved as a template file, json is saved as an entity (e.g., a node of type landing_page), and css can be saved both in the template and in the entity. When the page needs to be updated, GrapesJS will load the json in the entity to restore the editing state of the page, and after the update is complete, it will be saved as an entity again and the template file will be updated.

As you can see, as long as there is a rich library of components, Drupal will become very easy to build pages. For developers, do not have to understand familiar with the Drupal theme mechanism, just need to understand Twig, or even just HTML and CSS is enough; for users, WYSIWYG editing not only enhance the creative experience, but also improve the efficiency of work.

4. Applying Drupal's twig template

GrapesJS generated twig template , the template in accordance with the Drupal specification organization , plus info file , plus the corresponding API call mechanism , plus assets ( images , etc.) resource reference processing , you can generate a standard Drupal template to use .

It's not easy to create.Reprinted with attribution!

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

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

更多GrapesJS开发以及Drupal CMS相关内容，请参考我们其他相关文章，