德扑之星有限公司官方网站

開源可視化頁面框架GrapesJS開發教程（二） - 組件開發

本文是介紹可視化頁面構建工具 GrapesJS開發教程系列篇之組件介紹㈠㈡㈢㈣㈤㈥㈦，本系列主要是介紹GrapesJS以及與如何對接GrapesJS㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，如何與CMS整合等相關內容㈠㈡㈢㈣㈤㈥㈦。

GrapesJS是一個可視化的☧☬☸✡♁✙♆。，、＇：∶；、開源的網頁構建工具♦☜☞☝✍☚☛☟✌✽✾✿❁❃，前幾篇主要是對GrapesJS的基礎介紹❣❦❧♡۵、代碼結構✵✶✷✸✹✺✻✼❄❅、如何生成Twig模板等①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯。本文重點是介紹Grapes的組件開⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯、組件定義❣❦❧♡۵、組件具體代碼案例等相關知識ⓣⓤⓥⓦⓧⓨⓩ。

GrapesJS的組件基礎概念

GrapesJS 的組件是指包含有關元素在畫布中如何呈現（由 View 管理）以及其最終代碼可能如何（由 Model 中的屬性創建）的信息的對象❻❼❽❾❿⓫⓬⓭⓮⓯⓰，所有 Model 屬性都會反映在 View 中⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ。GrapesJS 支持添加各種自定義組件❻❼❽❾❿⓫⓬⓭⓮⓯⓰，也內置了常用的基礎組件❻❼❽❾❿⓫⓬⓭⓮⓯⓰，例如區塊✵✶✷✸✹✺✻✼❄❅、文本⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯、圖片等✵✶✷✸✹✺✻✼❄❅。

組件ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，在GrapesJS里面是一個重要的概念✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，是一等公民☾☽❄☃，我們看到的所見即所得就是對組件的拖拉拽以及屬性配置操作♦☜☞☝✍☚☛☟✌✽✾✿❁❃，組件有一點需要特別注意一下①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，就是組件的性質㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂。

如果我們構建的是HTML頁面❣❦❧♡۵，那么組件就是HTML元素的拖拉拽⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ。

如果我們是對郵件MJML的編輯✵✶✷✸✹✺✻✼❄❅，那么拖拽的就是MJML元素ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ。

如果我們構建的是H5或者App✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，一個元素是一段JSON①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯，那么拖拽的其實是JSON㈠㈡㈢㈣㈤㈥㈦，而不是常見的HTML♀☿☼☀☁☂☄，這樣可視化所見即所得相對要復雜很多ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ。

GrapesJS的組件開發要點

GrapesJS 里開發組件☾☽❄☃，首先需要弄清楚兩個核心概念：Component 和 Block☾☽❄☃。

Component 定義了一個組件的標簽是什么☧☬☸✡♁✙♆。，、＇：∶；，有什么屬性✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴、方法웃유ღ♋♂，在Canvas里如何展示✵✶✷✸✹✺✻✼❄❅，保存為HTML時又應該是什么結果㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉。

Block 可以理解為是一個或多個 Component 組成的“代碼片段”ⓚⓛⓜⓝⓞⓟⓠⓡⓢ。

通常而言ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，用戶在組件庫里看到的東西就是Block⑰⑱⑲⑳⓪⓿❶❷❸❹❺，在用戶將Block拖動到Canvas里之后⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，Grapes JS會經由解析器將它們轉換成ComponentⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，這時候用戶如果要編輯組件的樣式ⓣⓤⓥⓦⓧⓨⓩ、內容♦☜☞☝✍☚☛☟✌✽✾✿❁❃、屬性等❣❦❧♡۵，就變成和Component交互了⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。

為了更好理解這兩者之間的關系以及組件開發⑰⑱⑲⑳⓪⓿❶❷❸❹❺，我們來梳理一個典型的圖片組件的開發流程㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉。

1. 定義 Image Component

Component 分為Model和View❻❼❽❾❿⓫⓬⓭⓮⓯⓰，對于前端來說☧☬☸✡♁✙♆。，、＇：∶；，這兩個概念不陌生웃유ღ♋♂，一個定義了屬性웃유ღ♋♂、方法和事件✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，一個定義了在canvas里展現的UI✺ϟ☇♤♧♡♢♠♣♥。具體代碼可參考如下兩個文件：

https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/C... https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/view/Co...

2. 注冊 Image 到 DOM 組件

將 Image 注冊到 DomComponent 里☧☬☸✡♁✙♆。，、＇：∶；，此時GrapesJS已經可以識別image組件了⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，但是用戶還無法在組件庫找到并使用該組件㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉。

{
    id: 'image',
    model: ComponentImage,
    view: ComponentImageView,
}

3. 拖拽 Image 到可視區

通過 BlockManager 添加一個只包含Image的片段⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，這時候用戶在組件庫里可以看到一個新的組件Image㈠㈡㈢㈣㈤㈥㈦，并且有個icon表示這是個圖片組件♀☿☼☀☁☂☄。拖到這個Image到canvas里㈠㈡㈢㈣㈤㈥㈦，可以看到生成了一張圖片❻❼❽❾❿⓫⓬⓭⓮⓯⓰。

editor.BlockManager.add('image', {
    ...commonBlockProps,
    activate: true,
    label: 'Image',
    media: `
    `,
    content: {
        style: { color: 'black' },
        type: 'image',
    }
});

注意這里 content是block的內容ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，用了json的方式來構造內容ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，和virtul dom的概念十分接近㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉。但block除了使用json格式以外✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，也支持直接用html的形式來構造內容❻❼❽❾❿⓫⓬⓭⓮⓯⓰，例如以下片段웃유ღ♋♂，就是包含了兩張圖片的blockⓣⓤⓥⓦⓧⓨⓩ，比如下面的代碼：

content: '
https://placehold.it/400x400">https://placehold.it/500x300">
'

完整案例

我們找了一個計時器組件的完整代碼☧☬☸✡♁✙♆。，、＇：∶；，里面包含了每一個步驟的注釋☈⊙☉℃℉❅，通過整個代碼示例⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，就可以完全理解GrapesJS組件開發的基本流程⑰⑱⑲⑳⓪⓿❶❷❸❹❺，具體參考如下：

// 定義component type
const timerModel = editor.DomComponents.addType('timer', {
  model: {
    defaults: {
      // Default properties
      tagName: 'div',
      timer: 60, // seconds
      script() {
        // This script will be printed in the final HTML
        const timerEl = this;
        let timer = timerEl.getAttribute('data-timer');
        const interval = setInterval(() => {
          timerEl.innerHTML = timer;
          timer--;
          if (timer <0) {
            clearInterval(interval);
            timerEl.innerHTML = 'Time is up!';
          }
        }, 1000);
      },
      // Show the timer value in the badge
      badgeLabel() {
        return this.getAttributes().timer;
      },
    },
  },
});
// 給component type 定義 view 
const timerView = editor.DomComponents.getType('default').view.extend({
  events: {
    // Listen to the click event and update the timer value
    click: function () {
      const model = this.model;
      const timer = model.getAttributes().timer;
      const newTimer = prompt('Enter the new timer value', timer);
      if (newTimer) {
        model.addAttributes({ timer: newTimer });
        model.trigger('change:badgeLabel');
      }
    },
  },
});
// 注冊 component 和 view
editor.DomComponents.addType('timer', {
  model: timerModel,
  view: timerView,
});
// 注冊 block
editor.BlockManager.add('timer', {
  label: 'Timer',
  content: { type: 'timer' },
});

Drupal與GrapesJS集成演示請點擊這里>>

更多GrapesJS開發以及Drupal CMS相關內容ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，請參考我們其他相關文章☾☽❄☃，

1⑰⑱⑲⑳⓪⓿❶❷❸❹❺、常見開源可視化低代碼頁面構建框架對比

2✵✶✷✸✹✺✻✼❄❅、開源可視化低代碼頁面構建框架GrapesJS介紹

3ⓚⓛⓜⓝⓞⓟⓠⓡⓢ、開源CMS Drupal整合可視化構建工具GrapesJS（一）

4⒜⒝⒞⒟⒠⒡⒢⒣⒤、開源可視化頁面框架GrapesJS教程（二）- 組件開發

5ⓚⓛⓜⓝⓞⓟⓠⓡⓢ、可視化頁面框架GrapesJS開發教程（三）- 與Drupal CMS整合

6♀☿☼☀☁☂☄、開源可視化頁面框架GrapesJS開發教程（四）- 創建 Block

7☾☽❄☃、CMS與可視化構建工具GrapesJS整合之動態組件開發（五）

8⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ、在線展覽和多媒體展示建設方案

9웃유ღ♋♂、構建英文網站應該用什么框架ⓚⓛⓜⓝⓞⓟⓠⓡⓢ？

10ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ、如何基于開源系統構建資料庫/文檔庫平臺