Skip to main content

MarkdownImportExport Plugin

The MarkdownImportExportButton plugin enhances the On-Codemerge editor by providing the ability to convert HTML content to Markdown and vice versa. This plugin is especially useful for users who prefer writing in Markdown or need to convert existing HTML content into Markdown format.

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:

Key Features​

1. Convert HTML to Markdown​

  • Markdown Conversion: Allows users to convert the editor's HTML content into Markdown format.
  • Markdown Button: A dedicated "Markdown" button is provided on the editor's toolbar for easy access to this feature.

2. Convert Markdown to HTML​

  • HTML Conversion: Enables users to convert Markdown back into HTML format, which can be rendered within the editor.
  • Modal Interface: A modal window with a textarea is used for editing and converting Markdown.

3. Interactive Modal​

  • Modal Editing: Users can interact with a modal dialog, which provides a textarea for entering or editing Markdown.
  • Real-time Conversion: Converts Markdown to HTML or HTML to Markdown in real-time within the modal.

Integration​

Integrating the MarkdownImportExportButton plugin with the On-Codemerge editor is straightforward:

  1. Import the MarkdownImportExportButton class from the plugin package.
  2. Initialize an instance of EditorCore.
  3. Register the MarkdownImportExportButton as a module using the registerModule method.

Example of integrating the MarkdownImportExportButton plugin:

import EditorCore from 'on-codemerge';
import { MarkdownImportExportButton } from 'on-codemerge/markdownImportExportButton';

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

    // Create and register the MarkdownImportExportButton module
    const markdownImportExportButton = new MarkdownImportExportButton();
    editor.registerModule(markdownImportExportButton);
  }
});

Usage​

The MarkdownImportExportButton plugin is an excellent tool for users who need to switch between HTML and Markdown formats in the On-Codemerge editor. It provides an intuitive and user-friendly interface for converting and editing content, enhancing the overall editing experience.

Example Usage​

Leverage the MarkdownImportExportButton plugin to add Markdown editing capabilities to your On-Codemerge editor. This plugin not only simplifies the process of converting HTML content to Markdown but also offers an easy way to edit and convert Markdown content back to HTML, making it a versatile tool for various content editing needs.