CMS与可视化构建工具GrapesJS整合之动态组件开发

CMS与可视化构建工具GrapesJS整合之动态组件开发（五）

我们整合Drupal CMS和可视化开源构建工具，GrapesJS，来实现CMS级别的可视化，通过GrapesJS的可视化，可以让CMS的开发、维护、管理更加方便、简洁、成本更低。

为什么要用GrapesJS，GrapesJS是一套开源、可视化、可扩展的构建工具，并且提供了丰富的API，例如组件系统、样式系统、响应式支持等，可以让开发者轻松定制出符合业务要求的可视化网页编辑器，提高开发效率，节省成本。

本文重点介绍GrapesJS中如何动态读取CMS的内容，通过TWIG的SDK函数和输出的示例，以及如何声明组件，来展示动态组件开发过程。

为了能使GrapesJS可以读取动态的Drupal的内容，我们必须要在GrapesJS中能解析Twig代码，这样可以动态解析Twig模板。

那么，Drupal需要建立一套基于Twig的组件库，中间的动态内容，可以借助自定义的API服务，将变量注入到Twig模板中，Drupal渲染页面就可以用原来的TWIG引擎渲染，此时只要开发者只需开发对应的TWIG组件即可。

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

上面的架构可以扩展，从而实现任意的后端对接，理论上不局限与Drupal CMS，可以与其他的中台系统（JAVA/Node/Python）等对接，只需要能解析对应模板即可，比如JSP模板、PUG、EJS等模板，都是可以实现对接动态内容，从而实现动态内容的所见即所得的页面构建，具体架构如下：

1. 如何实现组件的开发

为了实现在GrapesJS中加载和渲染动态的TWIG组件，在GrapesJS做TWIG的解析，当twig加载时，将其渲染成HTML，从而实现可视化。

而我们实际的做法是将TWIG在服务器端渲染，然后通过服务器生成的HTML插入当前的GrapesJS的文档树中，实现动态的加载。

具体的代码可以参考下面的TWIG片段

上面的代码通过getNodes函数获取相关的内容列表，然后通过for循环将其输出，这样就是先了动态的内容渲染，而相关的函数就是我们通过TWIG引擎，注入进模板的函数，这种函数也可以注入更多，从而实现更加灵活的内容读取。

2. 如何声明组件

我们在Drupal中，声明组件采用的是动态加载的方式，类似Drupal的模块，声明一个YAML文件，这样多个组件互不影响也互不依赖，具体的代码如下：

实现了动态组件的开发，那么可以将常用的组件做成通用组件库，针对项目的组件，可以做成项目组件，通用组件库可以在其他的项目中复用，通过积累通用组件库，就可以解决我们项目中常见的80%需求，从而大大减少后续项目的维护和开发难度。

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