可视化页面框架GrapesJS开发教程（三）- 与Drupal CMS整合

本文是介绍可视化页面构建工具 GrapesJS开发教程系列篇之组件介绍，本系列主要是介绍GrapesJS开发以及与如何对接GrapesJS的可视化到其他系统，比如如何与CMS整合等相关内容。

我们之前介绍过几篇关于GrapesJS的基础开发，包括架构、组件开发等，这篇主要介绍如何与Drupal进行整合，从而实现快速对Drupal的页面、LandingPage等进行编辑和制作，通过GrapesJS和Drupal，实现快速建站的目的。

GrapesJS与Drupal的整合

上一篇我们讲解GrapesJS组件里有两个重要的元素：Component 和 Block。

Component 定义了一个组件的标签是什么，有什么属性、方法，在Canvas里如何展示，保存为HTML时又应该是什么结果。

Block 可以理解为是一个或多个 Component 组成的“代码片段”。

那么与Drupal的整合中，我们重点就是通过Drupal来提供Block和Component，因此整合也有两种模式

1. 仅创建Block。

由于GrapesJS已经实现了常见的HTML元素的Component，所以一些静态化的组件可以直接通过Block来构建。例如一个静态Hero、一个三列的Showcase，一个广告牌等。这种方式优点明显，开发简单，因为组件就是常规的HTML+CSS构成，用户也能方便的编辑其中的内容，缺点是仅能实现静态内容，对于动态组件不适用。

2. Twig基本的Component。

可以实现Twig的解析器与Component，让GrapesJS可以识别到Twig的一些语法，实现动态组件的编辑。通过一定的映射关系，用户可以借助GJS去编辑twig组件的参数，这样一来，开发者在开发组件时只需决定暴露什么参数给使用者，使用者也无需关心怎么让组件有良好的展示，专注于内容构建。不过这种形式的缺点也很明显，就是组件的预览效果和实际页面通常有着较大差距，譬如预览的时候可能只是个占位区块。

我们已经在Drupal里实现了一套框架来构建方便的构建GJS组件。在Drupal的docroot下新增了个widget目录，此目录的工作机制和结构和module一样, 来看看具体的示例：

完整案例

我们找了一个计时器组件的完整代码，里面包含了每一个步骤的注释，通过整个代码示例，就可以完全理解GrapesJS组件开发的基本流程，具体参考如下：

widget
|- hero
   |- hero.info.yml
   |- hero.lib.yml
   |- hero.twig
   |- hero.js
   |- hero.css

这个是Drupal模块的目录结构，可以通过plugin的方式动态注册组件，重点介绍如下几个文件：

1. hero.info.yml表明这是个widget，当检测到.info.yml文件时，hero就作为这个组件的machine name被使用。

# hero.info.yml
name: Hero
description: "Hero block"
type: widget
category: hero

2. hero.lib.yml则定义了组件使用到的js和css

# hero.lib.yml
css:
  hero.css: {}
js:
  hero.js: {}

3. hero.twig是这个组件的模板。

名称是固定的 {machine_name}.twig。在解析组件时，API会获取hero.twig里的内容并返回给GrapesJS，而根据上面提到的，内容可以是普通HTML，也可以是Twig语言，甚至可以是混合体。GrapesJS会在解析内容时自动转换为对应的Component

这里我们做了个特殊的Component来增强这些组件的使用。我们建立一个Component type叫twig_widget, 所有Drupal提供的widget，默认都会被解析成该类型。 twig_widget是个封闭的Component，用户无法往里添加或删除组件，所有内容是作为一个整体而存在，用户只能编辑该组件暴露的属性。
这种用法可以理解为“组件引用”，当组件有样式更新或功能更新时（更新必须是向前兼容的，如果有Breaking change，则必须创建新的组件），用户不需要重新编辑，页面会自动获得更新。

以hero组件为例，GrapesJS导出的HTML，会是如下结果

未来HERO一旦有HTML变化，或者CSS调整，只要其接收的参数不变，用户都不需要重新编辑组件内容。
那如果用户有需要改动其中的一些内容怎么办？twig_widget提供了一个方法eject, 一旦用户点选该方法，twig_widget会将内容提取，经由GJS解析拆散为小的独立组件。此操作不可逆，一旦执行，意味着后续HERO的所有更新都不会对这个页面的hero生效。
在执行eject后，GJS导出HTML结果如下：