Drupal整合可视化所见及所得构建工具GrapesJS（一）

开源CMS Drupal整合可视化构建工具GrapesJS（一）

我们之前介绍过相关的可视化页面构建工具，以及开源的GrapesJS的优势，简单来说：

GrapesJS是一个开源的多功能Web Builder框架，提供了丰富的工具与功能来帮助用户构建他们心目中想要的网页。借助GrapesJS，即使是对代码一窍不通的普通用户，通过简单的拖拽组件以及可视化的内容编辑方式，也可以创造出精美的、功能丰富的页面。

对于开发者而言，GrapesJS提供了丰富的API，例如组件系统、样式系统、响应式支持等，可以让开发者轻松定制出符合业务要求的可视化网页编辑器，提高开发效率，节省成本。

为什么选择GrapesJS，我们这里再简单说一下，我们对可视化构建工具的要求有以下几点：

1. 可视化，2. 开源，3. 能扩展，4. 能定义输出源码，5. 能搭配CMS，也是说跟内容管理系统集成，而不是一个单独的工具。

所以，综上来说，我们选择了GrapesJS，完全能满足以上要求。

本文就系列性的介绍，我们如何整合Drupal，通过Grapes JS快速构建Drupal的相关主题页面。

GrapesJS技术基础架构

对于GrapesJS，我们先从技术层面做一个简单了解，以方便后续跟Drupal实现落地的整合。

从架构上来讲，

GrapesJS的代码架构主要分为以下几个部分：

核心：GrapesJS的核心负责管理页面的整体布局和交互，包括模型，视图和控制器的管理。
模型：GrapesJS的模型负责存储页面元素的数据。模型使用Backbone.js库管理数据，以便快速和方便地对数据进行操作。
视图：GrapesJS的视图负责呈现页面元素。视图使用Backbone.js的视图系统管理，并通过Mustache.js模板系统呈现数据。
控制器：GrapesJS的控制器负责处理用户交互，如鼠标点击和键盘输入。控制器使用jQuery库进行事件处理，并通过核心管理模型和视图。
插件：GrapesJS的插件负责扩展GrapesJS的功能。插件可以使用核心、模型、视图和控制器的功能，以实现自定义的功能。

通过上述分析，我们可以看出GrapesJS的代码架构是非常灵活和可扩展的，它使用了多种开源库，以提供快速和方便的功能，并可以通过插件扩展其功能。

GrapesJS本身自带了一些基础插件，包括一些常见的控件，作为可视化编辑器可以开箱即用，而作为框架，它也提供了丰富的API，可以满足我们实现更多的扩展。

主要包括以下几点：

Block Manager - 用户可以开发自己的控件和组件，并实现动态加载。还支持将不同组件拼凑在一起，实现新的复合组件
Style Manager - 自带的样式编辑器，涵盖了常用的CSS属性，可以像PS一样去调整页面元素的样式。用户可以自定义出符合自己需求的样式编辑器
Asset Manager - 自带图片管理器。同时支持替换为自己的图片解决方案。
Commands - 即自定义操作，如复制、组件的上移、下移等，可以将一些复杂的逻辑变成一个普通的命令绑定到一个按钮上。
Traits - Trait定义了组件的参数和行为，而GrapesJS默认提供了几种类型，通过简单的声明就可以生成组件的设置项。

Drupal与GrapesJS的集成

Drupal作为CMS系统，提供了完善的内容管理，但其自带的主题系统，虽然强大，却具备一定的开发门槛，普通用户想修改页面的内容页面临成本高的问题。

在引入GrapesJS后，用户能够将可重复使用、轻松编辑的组件转换成Drupal可以认识的Twig模板，可视化的内容、样式编辑代替了传统的代码开发，不管是开发者或是站点维护者都能从中受益。

为了实现这一目标，Drupal需要建立一套基于Twig的组件库，GrapesJS则需要实现一个Twig的解析器，从而能在用户将twig组件放到编辑区时，转换为HTML内容。当用户构建完页面后，借助自定义的API服务将页面结构、组件数据等保存到Drupal数据库中，并自动生成一个完整的twig页面模板文件 (page template)，供Drupal渲染页面时使用。这样一来，只要开发者提供了足够丰富的组件，普通用户就可以轻松地创建维护自己的站点页面了。

详情的技术结构，参考下图：

1. 在GrapesJS里解析twig

Twig不是HTML，当GrapesJS加载一段twig代码时，GrapesJS会将其显示为普通文本，这显然不是我们想要的结果，解决这一问题有两种方法：

实现一个自定义的标签解析器，当twig加载时，将其转为HTML注释，同时生成占位元素。
实现一个即时的twig渲染服务，当twig加载时，将twig模板片段发送给服务，获得真正的HTML并显示于页面

方法一在客户端即可完成，简单快速，缺点是无法看到真实的页面效果
方法二需要不停调用API服务，会有一定的网络消耗，但更接近真实的页面效果

2. 为GrapesJS制作Twig组件

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

例如一个hero文件夹就代表了一个hero组件，hero目录下会有 hero.info.yml, hero.twig, hero.css, hero.js 几个文件

在GrapesJS初始化的过程中，通过API获取组件列表并动态添加到组件库里。以hero举例，当组件被使用时，hero.twig里的内容会经过解析器被加载到GrapesJS的编辑区，同时会被加载的还有hero.css和hero.js。这样hero的UI/UX就被还原到编辑区里。

组件的使用上还能分为两种形式: 引用形式和副本形式

引用形式 - 页面保存时，只保存组件的ID，以include hero.twig的形式来使用组件。这种形式下，对组件的更新会自动对页面生效。
副本形式 - 页面保存时，将hero.twig里的内容直接保存。对组件的更新不会自动对页面生效，用户必须编辑页面，删除原来的组件并重新添加才能获得更新。但好处是用户可以修改组件的内容、html等而不影响其他页面。

3. 持久化存储 Landing Page

GrapesJS 的 Storage Manager 支持将页面导出为 html 或 json 格式，同时还有通过样式编辑器生成的css。

在与 Drupal 的结合中，HTML会被保存为模板文件，json会被保存为entity（例如类型为 landing_page 的 node )，而css可以同时存到模板中与entity里。当页面需要更新时，GrapesJS会加载entity里的json来恢复page的编辑状态，在更新完成后，又重新保存为entity，并更新模板文件。

可以看到，只要有丰富的组件库，Drupal构建页面将变得十分轻松。对于开发者而言，不用再去了解熟悉Drupal的主题机制，只需要了解Twig，甚至仅仅是HTML和CSS就足够了；对于使用者而言，所见即所得的编辑方式不仅提升了创作体验，也提高了工作效率。

4. 应用Drupal的twig模板

GrapesJS 生成了twig模板之后，将模板按照Drupal的规范组织，加上info文件、加上对应的API调用机制、加上assets（图片等）资源的引用处理，就可以生成一个标准的Drupal模板来使用了。