Skip to main content

Introduction

Welcome to the documentation for On-Codemerge, a versatile web editor designed for seamless integration and functionality.

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:

Getting Started​

Start by installing On-Codemerge in your project.

Installation​

To install on-codemerge, run the following command in your project directory:

npm i --save on-codemerge

Integration Example​

Here's a basic example of integrating On-Codemerge into a vanilla JavaScript project:

Initialize and Register
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new EditorCore(appElement);
    editor.registerModule(new TextStylingButton);
    editor.registerModule(new TableButton);
    // ... register other modules

    editor.subscribeToContentChange((newContent?: string) => {
      console.log(newContent)
    });

    // Optional: Set initial content
    editor.setContent("Your initial content here");
  }
});

Each plugin adds unique functionality to the On-Codemerge editor, making it a powerful tool for web content creation and editing.