A list,

Panels module: The Grapes editor panel feature, with some configuration, we can customize the initial state of the GrapesJs editor.

1.1 Page Structure

1.2 DOM tree Structure

1.3 Code structure of panel

Second, code interpretation

The code for the Panels is layered in four sections:

  • Config folder: Basic configuration files
  • Model folder: Models
  • The view folder
  • Index. Js file

2.1 the config. Js

  • The stylePrefix of the [stylePrefix] panel is concatenated with the Base prefix defined in the stylePrefix of editor\config\config.js

  • 【em】 : Editor model

  • [delayBtnsShow] : // Load child button delay time (ms)

  • The core configuration area of the [Defaults] panel is overridden by grapesjs.init.

    • Defaults is an array with members of the following format:

      id: xxx
buttons: Array<buttonItemConfig>
Copy the code

    • Commands: Commands button group configuration

    • Options: configures the function button group

    • Views: Displays button group configurations

      • Open Style Manager: Style configuration Manager
      • Settings: Features related to Trait Manager
      • Open Layer Manager: DOM tree
      • Open Blocks: Component libraries

2.1 Model folder: Provides data for the view of the panel

  • Details: use the method can refer to: wizardforcel gitbooks. IO/backbone – js…

  • Button.js

    • Defaults: The base data model required by a button

    • Initialize methods: When creating a Model instance, you pass in the initial values of attributes, which are set to the model. If initialize is defined, the function is executed after the Model is created

  • Buttons.js: a collection of Button data that provides four methods

    • DeactivateAllExceptOne: default activation item in control panel
      • Panels \model\ button.js in defaults.active to configure whether all the buttons in the current panel need to be activated
      • The panels\config\config.js defaults[I].buttons.active is used to configure whether a button in the panel’s button group is active
    • DeactivateAll: All buttons in the current panel are activated
      • Panels \model\ button.js in defaults.active to configure whether all the buttons in the current panel need to be activated
    • DisableAllButtons: specifies whether to disableAllButtons
      • Defaults.disable in panels\model\ button.js to configure whether the buttons in the current panel need to be completely disabled
    • DisableAllButtonsExceptOne: when all the button group is disabled, can be configured defaults [I] buttons. Disable to enable one of the buttons
      • Defaults.disable in panels\model\ button.js to configure whether the buttons in the current panel need to be completely disabled
      • The panels\config\config.js defaults[I].buttons.disable is used to configure whether a button in the panel button group needs to be disabled

  • Panel.js and Panels. Js are essentially the same as buttons. js and buttons. js, which separate complex Buttons from each other.

2.2 View Folder: The view folder is the part for displaying and interacting with users

2.4 index.js: Exposed panel API

The properties of the panel are automatically initialized according to the configuration when the editor is initialized. We can customize the panel information during editor initialization in the following ways

const editor = grapesjs.init({
 panels: {
	...options
 }
})
Copy the code

Currently, there are eight exposed apis:

  • GetPanels: Returns a collection of current panels

  • GetPanelsEl: Returns the current panel collection with HTMLElement as the return value

  • GetPanel: through panel id get a panel, a panel | the return value is null

    Id panelManager. GetPanel (panel)Copy the code

  • AddPanel: Adds a new panel to the collection

    panelManager.addPanel({
  id: 'myNewPanel'.visible  : true.buttons: [...]. ,})Copy the code

  • RemovePanel: Removes a panel from the collection

    panelManager.removePanel({
  id: 'myNewPanel'.visible  : true.buttons  : [...],
});
Copy the code

  • AddButton: Adds a button by panel ID and button configuration

    PanelManager. AddButton (panel id, {id: 'myNewButton'.className: 'someClass'.command: 'someCommand'.attributes: { title: 'Some title'},
  active: false});Copy the code

  • RemoveButton: Remove a button by panel ID and button ID

    PanelManager. RemoveButton (panel id, button id);Copy the code

  • GetButton: Gets a button by panel ID and button ID

    Panelmanager.getbutton (panel ID, button ID);Copy the code