# How the Right Panel Editor Configuration Works for Plugins in Luban H5

> Understand Luban H5 plugin configuration. Explore how the Vuex-driven reactive architecture synchronizes canvas and panel property changes for seamless editing.

- Repository: [小小鲁班/luban-h5](https://github.com/ly525/luban-h5)
- Tags: how-to-guide
- Published: 2026-03-06

---

**The right panel editor configuration in Luban H5 uses a Vuex-driven reactive architecture where the `editingElement` state synchronizes property changes between the canvas and a plugin-agnostic configuration panel.**

Luban H5 is an open-source visual page builder for H5 mobile pages. Its right panel editor configuration system enables real-time manipulation of plugin properties through a centralized Vuex store, ensuring that changes to buttons, images, text elements, and custom components reflect immediately across the canvas and configuration interface.

## Vuex State Management for the Right Panel

The foundation of the right panel editor configuration resides in the Vuex `editor` module, which maintains the single source of truth for the currently selected element and its properties.

### The editor Module and editingElement

Located in [`src/store/modules/editor.js`](https://github.com/ly525/luban-h5/blob/main/src/store/modules/editor.js), the editor module defines `editingElement` to hold the active plugin instance and `pluginProps` to store its configurable attributes. When a user selects a plugin on the canvas, the `setEditingElement` action commits the full element object—including its default `pluginProps`—to the Vuex state, making it reactive across all right-panel components that import this slice using `mapState('editor', ['editingElement'])`.

## Right Panel Component Architecture

The right panel editor configuration renders through a hierarchical component structure centered around [`RightPanel.vue`](https://github.com/ly525/luban-h5/blob/main/RightPanel.vue), which orchestrates three specialized sub-panels for different aspects of plugin configuration.

### RightPanel.vue Wrapper

The [`src/components/core/editor/right-panel/index.vue`](https://github.com/ly525/luban-h5/blob/main/src/components/core/editor/right-panel/index.vue) file serves as the container component, injecting the shared Vuex state into its child panels. It provides the structural layout for the Work Mode, Box Model, and Script List sections, ensuring each sub-panel accesses the same `editingElement` reference through reactive bindings.

### Work Mode Configuration

The work-mode panel ([`right-panel/work-mode.vue`](https://github.com/ly525/luban-h5/blob/main/right-panel/work-mode.vue)) controls page-level layout settings such as swiper or long-page modes. It maps the Vuex `work.page_mode` value to a radio group interface, utilizing the `updateWork` action to persist layout changes back to the global store. The canvas reads this state to render the appropriate page structure dynamically.

### Box Model Editor

Located in [`right-panel/box-model/index.vue`](https://github.com/ly525/luban-h5/blob/main/right-panel/box-model/index.vue), this panel handles CSS box-model properties including width, height, margin, padding, and border. It directly mutates `editingElement.pluginProps`—for example, setting `this.editingElement.pluginProps.borderColor`—leveraging Vue's reactivity system to instantly reflect changes on the canvas without additional event dispatching.

### Script List Management

The script-list panel ([`right-panel/script-list.vue`](https://github.com/ly525/luban-h5/blob/main/right-panel/script-list.vue)) manages custom JavaScript handlers attached to plugins, such as click events. It reads from `editingElement.pluginProps.scripts` and provides interfaces for adding or removing script entries. Mutations to this reactive array immediately update the plugin's runtime behavior configuration.

## Data Flow from Canvas to Configuration

The right panel editor configuration follows a unidirectional data flow that ensures consistency between visual selection and property editing.

1. **Selection**: When a user clicks a plugin on the canvas, [`Editor.vue`](https://github.com/ly525/luban-h5/blob/main/Editor.vue) dispatches the `setEditingElement` action with the complete element object, including its `pluginProps`.
2. **Propagation**: Vuex updates `state.editingElement`, triggering reactive updates across all right-panel components that map this state.
3. **Two-way Binding**:
   - **Work Mode**: Uses computed properties with getters/setters to read `work.page_mode` and call `updateWork` on modification.
   - **Box Model**: Directly mutates `editingElement.pluginProps` properties, utilizing Vue's reactivity for instant canvas updates.
   - **Script List**: Mutates the `pluginProps.scripts` array to attach or detach behavior handlers.
4. **Persistence**: Upon saving, the entire canvas model—including all `pluginProps` from each element—serializes to JSON and stores in the backend database, enabling exact restoration on subsequent loads.

## Plugin-Agnostic Property Editing

A critical strength of the right panel editor configuration is its generic handling of plugin properties through the `pluginProps` abstraction.

Each plugin declares a `props` object defining its configurable attributes—such as type, default values, and labels. When an element is created, Luban H5 automatically merges these defaults into the element's `pluginProps` object. The right-panel components never hard-code specific fields; instead, they operate on the generic `pluginProps` structure. This architecture enables the same configuration interface to work uniformly across buttons, carousels, text boxes, images, and custom plugins without component-specific modifications.

## Implementation Example

The following excerpt from [`right-panel/box-model/index.vue`](https://github.com/ly525/luban-h5/blob/main/right-panel/box-model/index.vue) demonstrates the reactive property updates that define the right panel editor configuration workflow:

```javascript
// right-panel/box-model/index.vue (excerpt)
computed: {
  ...mapState('editor', ['editingElement'])
},
methods: {
  updateBorderColor (color) {
    // Reactive update – the canvas re-renders instantly
    this.editingElement.pluginProps.borderColor = color
  }
}

```

This pattern illustrates how direct mutations to `pluginProps` propagate changes throughout the application without requiring explicit event emission or complex callback chains.

## Key Source Files for the Right Panel Editor Configuration

Understanding the complete implementation requires examining these specific files in the `ly525/luban-h5` repository:

| File Path | Purpose |
|-----------|---------|
| [`front-end/h5/src/store/modules/editor.js`](https://github.com/ly525/luban-h5/blob/main/front-end/h5/src/store/modules/editor.js) | Vuex store module managing `editingElement`, `pluginProps`, and `work` state |
| [`front-end/h5/src/components/core/editor/right-panel/index.vue`](https://github.com/ly525/luban-h5/blob/main/front-end/h5/src/components/core/editor/right-panel/index.vue) | Main container component orchestrating the three sub-panels |
| [`front-end/h5/src/components/core/editor/right-panel/work-mode.vue`](https://github.com/ly525/luban-h5/blob/main/front-end/h5/src/components/core/editor/right-panel/work-mode.vue) | Page layout mode selector (swiper/long-page) |
| [`front-end/h5/src/components/core/editor/right-panel/box-model/index.vue`](https://github.com/ly525/luban-h5/blob/main/front-end/h5/src/components/core/editor/right-panel/box-model/index.vue) | CSS box-model property editor |
| [`front-end/h5/src/components/core/editor/right-panel/script-list.vue`](https://github.com/ly525/luban-h5/blob/main/front-end/h5/src/components/core/editor/right-panel/script-list.vue) | Custom script attachment interface |
| [`front-end/h5/src/components/core/editor/index.vue`](https://github.com/ly525/luban-h5/blob/main/front-end/h5/src/components/core/editor/index.vue) | Canvas editor that dispatches `setEditingElement` on plugin selection |

## Summary

- The **right panel editor configuration** in Luban H5 relies on a **Vuex central store** (`editor` module) to synchronize state between the canvas and configuration interface.
- The **`editingElement`** state object contains **`pluginProps`**, which stores all configurable properties for the currently selected plugin.
- **Three specialized sub-panels**—Work Mode, Box Model, and Script List—provide focused editing interfaces while sharing the same reactive state.
- **Plugin-agnostic architecture** allows the right panel to edit any plugin type without hard-coding specific fields, using the generic `pluginProps` abstraction.
- **Instant reactivity** is achieved through direct mutations to `pluginProps` or Vuex actions, ensuring the canvas updates immediately when properties change.

## Frequently Asked Questions

### How does the right panel editor configuration handle different plugin types without specific UI components for each?

The system uses a **generic `pluginProps` object** that every plugin populates with its own configuration schema. When a plugin is selected, its `pluginProps` becomes the reactive data source for the right panel. The Box Model, Script List, and other panels operate on this generic structure rather than plugin-specific fields, enabling the same components to edit buttons, images, carousels, and custom plugins uniformly.

### What triggers the right panel to update when a user selects a plugin on the canvas?

The update is triggered by the **`setEditingElement` Vuex action** dispatched from [`Editor.vue`](https://github.com/ly525/luban-h5/blob/main/Editor.vue) when a plugin receives a click event. This action commits the selected element object—including its `pluginProps`—to the Vuex store's `editingElement` state. Because the right-panel components map this state using `mapState('editor', ['editingElement'])`, Vue's reactivity system automatically propagates the update to all configuration interfaces.

### How are changes in the right panel immediately reflected on the canvas?

The system leverages **Vue's reactive data binding** through direct mutations to `pluginProps`. When a user modifies a value in the Box Model panel—such as changing `borderColor`—the component updates `this.editingElement.pluginProps.borderColor` directly. Since `editingElement` is a reactive Vuex state object referenced by both the right panel and the canvas renderer, the change instantaneously triggers a re-render of the plugin on the canvas without requiring explicit event emission or API calls.

### Where is the configuration data stored when a user saves the page?

All configuration data resides in the **`pluginProps` objects** within each element of the canvas model. When the user initiates a save operation, the entire editor state—including the `work` configuration and all elements with their respective `pluginProps`—serializes to JSON format. This payload is then transmitted to the backend database. On subsequent loads, Luban H5 deserializes this JSON to restore the exact right panel editor configuration for every plugin.