Awesome
on-codemerge
zero dependencies editor
<img src="https://github.com/s00d/on-codemerge/blob/main/branding/repository-open-graph-template_long.png?raw=true" alt="logo"> <img src="https://github.com/s00d/on-codemerge/blob/main/branding/Screenshot1.png?raw=true" alt="logo"> <img src="https://github.com/s00d/on-codemerge/blob/main/branding/Screenshot2.png?raw=true" alt="logo">Description
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.
Installation
To use the editor, include it in your project by importing the main EditorCore class and any required plugins.
import { EditorCore } from 'on-codemerge';
import BoldButtonPlugin from 'on-codemerge/boldbuttonplugin';
// Import other plugins as needed
Setup
Initialize the editor by creating an instance of EditorCore and passing the target DOM element where the editor should be rendered.
const targetElement = document.getElementById('editor');
const editor = new EditorCore(targetElement);
// Register plugins
editor.registerModule(new BoldButtonPlugin());
// Register other plugins in a similar manner
// To start the editor
editor.init();
Using Plugins
Plugins can be added to enhance the functionality of the editor. Here's an example of how to add a bold button plugin.
import BoldButtonPlugin from 'path/to/boldbuttonplugin';
// After initializing the editor
editor.registerModule(new BoldButtonPlugin());
Contribution
Contributions to the editor are welcome. Please ensure that custom plugins and features adhere to the project's architecture and coding standards.
For more detailed documentation, please refer to the individual plugin files and the source code of EditorCore.