Skip to main content

BlockButton Plugin

The BlockButton plugin introduces advanced block management within the On-Codemerge editor. It provides capabilities for creating, manipulating, and organizing content blocks.

on-CodeMerge

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product. This intuitive tool for developers of all skill levels.
Result:
Preview:

Integration​

To integrate the BlockButton plugin, import and register it with the EditorCore. Follow these steps:

Initialize and Register BlockButton
import EditorCore from 'on-codemerge';
import { BlockButton } from 'on-codemerge/blockButton';

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new EditorCore(appElement);
    editor.registerModule(new BlockButton());
  }
});

Features​

The BlockButton plugin provides functionalities such as:

  • Block Creation: Adds a new block to the editor.
  • Block Management: Manages individual blocks within the editor, allowing for customized content arrangement.
  • Drag-and-Drop Support: Facilitates drag-and-drop actions for easy block repositioning.

When activated, the plugin adds a button to the toolbar for creating new content blocks and dynamically manages them.

How it Works​

The BlockButton plugin leverages a combination of DOM manipulation and event handling for its operations. It works as follows:

  • Block Initialization: Upon initialization, the plugin scans the editor for existing blocks and sets up management for each.
  • Dynamic Block ID Assignment: New blocks are assigned unique IDs for identification and management.
  • Event Handling: The plugin attaches event listeners to blocks for operations like drag-and-drop.