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.
Welcome to the documentation for On-Codemerge, a versatile web editor designed for seamless integration and functionality.
Start by installing On-Codemerge in your project.
To install on-codemerge
, run one of the following commands in your project directory, depending on your preferred package manager:
npm install --save on-codemerge
yarn add on-codemerge
pnpm add on-codemerge
bun add on-codemerge
Here's a basic example of integrating On-Codemerge into a vanilla JavaScript project:
import 'on-codemerge/index.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());
}
});
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.
On-Codemerge supports multiple locales to cater to a global audience. Below is the list of available locales:
Locale Code | Language | File Name |
---|---|---|
ar | Arabic | ar.json |
cs | Czech | cs.json |
de | German | de.json |
en | English | en.json |
es | Spanish | es.json |
fr | French | fr.json |
hi | Hindi | hi.json |
id | Indonesian | id.json |
it | Italian | it.json |
ja | Japanese | ja.json |
ko | Korean | ko.json |
nl | Dutch | nl.json |
pl | Polish | pl.json |
pt | Portuguese | pt.json |
ru | Russian | ru.json |
th | Thai | th.json |
tr | Turkish | tr.json |
vi | Vietnamese | vi.json |
zh | Chinese (Simplified) | zh.json |
To set a locale in On-Codemerge, use the setLocale
method:
await editor.setLocale('ru'); // Set locale to Russian
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
.
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
To retrieve the currently active locale, use the getCurrentLocale
method:
const currentLocale = editor.getCurrentLocale();
console.log(currentLocale); // Outputs: 'ru' (if Russian is set)
To get a list of all loaded locales, use the getLoadedLocales
method:
const loadedLocales = editor.getLoadedLocales();
console.log(loadedLocales); // Outputs: ['en', 'ru', 'es']