開源可視化頁面框架GrapesJS開發教程（四）- 創建 Block
本文是介紹可視化頁面構建工具 GrapesJS開發教程系列篇之組件介紹♦☜☞☝✍☚☛☟✌✽✾✿❁❃，本系列主要是介紹GrapesJS以及與如何對接GrapesJSⓚⓛⓜⓝⓞⓟⓠⓡⓢ，如何與CMS整合等相關內容⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓。
如果需要對GrapesJS開發還沒有完全了解㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，可以參考我們之前的相關文章♀☿☼☀☁☂☄，本篇主要介紹如何在GrapesJS里面創建一個Block❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣。
GrapesJS的組件介紹
GrapesJS 的組件是指包含有關元素在畫布中如何呈現（由 View 管理）以及其最終代碼ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，所有 Model 屬性都會反映在 View 中❣❦❧♡۵。GrapesJS 支持添加各種自定義組件ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，也內置了常用的基礎組件㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，例如區塊①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯、文本⑰⑱⑲⑳⓪⓿❶❷❸❹❺、圖片等♦☜☞☝✍☚☛☟✌✽✾✿❁❃。
GrapesJS 里開發組件⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓，首先需要弄清楚兩個核心概念：Component 和 Block⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。
Component 定義了一個組件的標簽是什么♦☜☞☝✍☚☛☟✌✽✾✿❁❃，有什么屬性❋❀⚘☑✓✔√☐☒✗✘ㄨ✕✖✖⋆✢✣、方法✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴、在Canvas里如何展示✤✥❋✦✧✩✰✪✫✬✭✮✯❂✡★✱✲✳✴，保存為HTML時又應該是什么結果ⓚⓛⓜⓝⓞⓟⓠⓡⓢ。
Block 可以理解為是一個或多個 Component 組成的“代碼片段”⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯。
通常而言ⓣⓤⓥⓦⓧⓨⓩ，用戶在組件庫里看到的東西就是Blockⓚⓛⓜⓝⓞⓟⓠⓡⓢ，在用戶將Block拖動到Canvas里之后㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，Grapes JS會經由解析器將它們轉換成ComponentⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，這時候用戶如果要編輯組件的樣式☈⊙☉℃℉❅、內容⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯、屬性等⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，就變成和Component交互了☾☽❄☃。
GrapesJS的Block構建
GrapesJS 的Block主要由BlockManager管理㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉，創建好Block之后⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，就可以進行拖拽到GrapesJS的界面中來使用和編輯웃유ღ♋♂。
1. 創建自定義Block
代碼文件是 component.ts㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，主要是 ngOnInit 觸發后的事件ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，具體代碼如下：
createBlockTemplateConfirmation () {
const selected = this.editor.getSelected();
let name = this.blockTemplateForm.get('name')!.value
let blockId = 'customBlockTemplate_' + name.split(' ').join('_')
let name_blockId = {
'name': name,
'blockId': blockId
}
createBlockTemplate(this.editor, selected, name_blockId)
this.blockTemplateForm.reset();
this.modalService.getModal('createBlockTemplate').close();
}
createBlockTemplate 方法會調用相關的函數獲取component的css和js內容✵✶✷✸✹✺✻✼❄❅，來看一下 createBlockTemplate的源碼⒜⒝⒞⒟⒠⒡⒢⒣⒤，（在index.ts里面）
export const getCss = (editor, id) => {
const style = editor.CssComposer.getRule(`#${id}`);
const hoverStyle = editor.CssComposer.getRule(`#${id}:hover`);
if (style){
if(hoverStyle){
return style.toCSS() + ' ' + hoverStyle.toCSS()
}
return style.toCSS()
}
else {
return ''
}
}
export const findComponentStyles = (editor:any,selected:any) => {
let css =''
if (selected){
const childModel = selected.components().models
if (childModel) {
for (const model of childModel) {
css = css + findComponentStyles(editor,model)
}
return css+ getCss(editor, selected.getId());
}
else{
return getCss(editor, selected.getId());
}
}
}
export const createBlockTemplate = (editor:any, selected:any, name_blockId:any) => {
const bm = editor.BlockManager
const blockId = name_blockId.blockId;
const name = name_blockId.name;
let elementHTML = selected.getEl().outerHTML;
let first_partHtml = elementHTML.substring(0, elementHTML.indexOf(' '));
let second_partHtml = elementHTML.substring(elementHTML.indexOf(' ') + 1);
first_partHtml += ` custom_block_template=true block_id="${blockId}" `
let finalHtml = first_partHtml + second_partHtml
const blockCss = findComponentStyles(editor,selected)
const css = ``
const elementHtmlCss = finalHtml + css
bm.add(`customBlockTemplate_${blockId}`,{
category: 'Custom Blocks',
attributes: {custom_block_template:true},
label: `${name}`,
media: '',
content: elementHtmlCss,
})
}
創建好Block之后ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ，Block就會出現在GrapesJS的工具欄里面ⓣⓤⓥⓦⓧⓨⓩ，然后通過拖拽就可以放到頁面編輯區了⑰⑱⑲⑳⓪⓿❶❷❸❹❺，參考下圖
2. 給Block添加工具菜單
在每一個Block⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，當鼠標劃上去的時候⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾，就會有一個工具欄⒜⒝⒞⒟⒠⒡⒢⒣⒤，用戶可以點擊這個工具欄做響應的操作ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，當然有幾個是默認的⒔⒕⒖⒗⒘⒙⒚⒛ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅰⅱ，比如復制ⓣⓤⓥⓦⓧⓨⓩ、渲染⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓、刪除等☾☽❄☃，此外ⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉ，我們也可以自定義工具ⓚⓛⓜⓝⓞⓟⓠⓡⓢ，比如配置웃유ღ♋♂，用戶點擊后♀☿☼☀☁☂☄，就彈出一個配置框✵✶✷✸✹✺✻✼❄❅，在配置框里面㈧㈨㈩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂，用戶可以做各種操作ⅲⅳⅴⅵⅶⅷⅸⅹⒶⒷⒸⒹ。下面的代碼就是注冊一個選中事件ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，來觸發工具條✵✶✷✸✹✺✻✼❄❅。
（我們的動態組件就是用這種方式開發的）
this.editor.on('component:selected', (editor:any) => {
// whenever a component is selected in the editor
if (!this.editor) {
this.editor = editor
}
const selectedComponent = this.editor.getSelected();
if (selectedComponent && selectedComponent.attributes) {
//createBlockTemplate functionality
const commandBlockTemplateIcon = 'fad fa-square'
const commandBlockTemplate = () => {
// this.modalService.getModal('createBlockTemplate').open(); //Commented for ………………… now as we have not made Modal yet
}
const defaultToolbar = selectedComponent.get('toolbar');
const commandExists = defaultToolbar.some((item:any) => item.command.name === 'commandBlockTemplate');
if (!commandExists) {
selectedComponent.set({
toolbar: [ ...defaultToolbar, { attributes: {class: commandBlockTemplateIcon}, command: commandBlockTemplate }]
});
}
}
});
具體的效果如下：
然后☧☬☸✡♁✙♆。，、＇：∶；，我們給工具欄點擊增加一個彈出框❣❦❧♡۵。
#1. 裝一個modal box組件
npm i ngx-smart-modal ng add @ng-bootstrap/ng-bootstrap
#2. 在component文件里面導入表單
import {NgxSmartModalService} from 'ngx-smart-modal';
import {FormBuilder, Validators} from '@angular/forms';
下面是Component的源文件
export class CustomBlockComponent implements OnInit {
public editor:any = null
blockTemplateForm = this.formBuilder.group({
name: ['', Validators.required]
})
Component的HTML文件 :
<ngx-smart-modal #createBlockTemplate (onAnyCloseEvent)="createBlockTemplate.close()" customClass="nsm-centered" identifier="createBlockTemplate"> <div class="modal-header"> <h4 class="modal-title"> Are you sure you want to save this block template? h4> div> <div class="modal-body"> <div>This action cannot be undonediv> div> <form (ngSubmit)="createBlockTemplateConfirmation()" [formGroup]="blockTemplateForm" > <div class="col-sm-12 form-group mb-3"> <label for="name">Namelabel> <input id="name" type="text" class="form-control" formControlName="name"/> div> <div class="modal-footer"> <div class="col-sm-12 form-group page-form-controls"> <button type="submit" [disabled]="!blockTemplateForm.valid" class="btn btn-primary">Savebutton> <button (click)="createBlockTemplate.close()" class="btn btn-secondary" type="button">Cancelbutton> div> div> form> ngx-smart-modal>
Component的CSS文件:
@import "~ngx-smart-modal/ngx-smart-modal.css"; .nsm-dialog.nsm-centered { display: grid; } .nsm-dialog-lg { max-width: 980px; } .nsm-dialog-xl { max-width: 1200px; } .nsm-dialog-xxl { max-width: 1500px; } .nsm-dialog-full { max-width: 100%; }
最終ⓊⓋⓌⓍⓎⓏⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙ，點擊工具欄⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵❆❇❈❉❊†☨✞✝☥☦☓☩☯，得到如下效果✵✶✷✸✹✺✻✼❄❅，
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⒃⒄⒅⒆⒇⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓、如何基于開源系統構建資料庫/文檔庫平臺
