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.

Introduction ​

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

Getting Started ​

Start by installing On-Codemerge in your project.

Installation ​

To install on-codemerge, run one of the following commands in your project directory, depending on your preferred package manager:

Using npm ​

npm install --save on-codemerge

Using yarn ​

yarn add on-codemerge

Using pnpm ​

pnpm add on-codemerge

Using bun ​

bun add on-codemerge

Integration Example ​

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

import 'on-codemerge/index.css';
import 'on-codemerge/public.css';
import 'on-codemerge/plugins/ToolbarPlugin/style.css';
import 'on-codemerge/plugins/AlignmentPlugin/public.css';
import 'on-codemerge/plugins/AlignmentPlugin/style.css';

import {HTMLEditor, ToolbarPlugin, AlignmentPlugin } from 'on-codemerge';

document.addEventListener('DOMContentLoaded', async () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new HTMLEditor(editorElement);

    await editor.setLocale('ru');

    editor.use(new ToolbarPlugin());
    editor.use(new AlignmentPlugin());
    // ... register other modules

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

    // Optional: Set initial content
    editor.setHtml('Your initial content here');
    console.log(editor.getHtml());
  }
});

Available Plugins ​

On-Codemerge comes with a comprehensive set of plugins that extend its functionality. Each plugin adds unique features to the editor, making it a powerful tool for web content creation and editing.

View all available plugins →

Supported Locales ​

On-Codemerge supports multiple locales to cater to a global audience. Below is the list of available locales:

Setting a Locale ​

To set a locale in On-Codemerge, use the setLocale method:

await editor.setLocale('ru'); // Set locale to Russian

Translating Placeholders ​

You can use placeholders in your translations to dynamically insert values. For example:

{
  "File size exceeds {{max}} limit": "File size exceeds {{max}} limit"
}

In your code, you can pass the max parameter when translating:

editor.t('File size exceeds {{max}} limit', { max: '10MB' });

This will output: File size exceeds 10MB limit.

Fallback Locale ​

If a translation key is missing in the current locale, On-Codemerge will fall back to the default locale (en by default). You can change the fallback locale using the setFallbackLocale method:

editor.setFallbackLocale('en'); // Set fallback locale to English

Getting the Current Locale ​

To retrieve the currently active locale, use the getCurrentLocale method:

const currentLocale = editor.getCurrentLocale();
console.log(currentLocale); // Outputs: 'ru' (if Russian is set)

Getting Loaded Locales ​

To get a list of all loaded locales, use the getLoadedLocales method:

const loadedLocales = editor.getLoadedLocales();
console.log(loadedLocales); // Outputs: ['en', 'ru', 'es']