Skip to main content

ImageButton Plugin

The ImageButton plugin adds image uploading and management capabilities to the On-Codemerge editor. This plugin enables users to insert images directly into the editor from their device.

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 ImageButton plugin with the On-Codemerge editor, import and register it with the EditorCore as follows:

Initialize and Register ImageButton
import EditorCore from 'on-codemerge';
import { ImageButton } from 'on-codemerge/imageButton';

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

Features​

The ImageButton plugin provides the following features:

  • Image Upload: Adds a toolbar button for uploading images.
  • Image Management: Manages inserted images, allowing for further customization and control.

How it Works​

When the image button in the toolbar is clicked, it triggers an image file input. Users can select an image from their device, which is then read and inserted into the editor.