Skip to main content

ParagraphButton Plugin

The ParagraphButton plugin introduces versatile paragraph styling options to the On-Codemerge editor, enabling users to easily format text as different headings, quotes, or code 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 add the ParagraphButton plugin to the On-Codemerge editor, import and register it with EditorCore:

Initialize and Register ParagraphButton
import EditorCore from 'on-codemerge';
import { ParagraphButton } from 'on-codemerge/paragraphButton';

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

Features​

The ParagraphButton plugin provides the following capabilities:

  • Multiple Styles: Offers options for normal text, various heading levels (H1 to H4), blockquotes, and code blocks.
  • Dropdown Menu: A dropdown menu in the toolbar allows users to select the desired paragraph style.
  • Ease of Use: Streamlines the process of applying different text formats.