To enable exporting selected rich text (HTML) into Markdown format and allow the user to download it as a .md file, you can enhance the previous example by adding rich text parsing and conversion. There are several JavaScript libraries that can help with converting HTML or rich text to Markdown, such as Turndown.

Here’s how you can create a tool that allows users to select and convert rich text into Markdown for export.

Steps:

  1. Use a contentEditable div to allow users to input or paste rich text.
  2. Use the Turndown library to convert the HTML content to Markdown.
  3. Enable the export of the converted Markdown as a .md file.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Text to Markdown Exporter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="exporter-container">
        <h1>Rich Text to Markdown Exporter</h1>

        <div id="richTextInput" contenteditable="true" class="rich-text-box">
            <!-- Users can type or paste rich text here -->
            <p><b>Example:</b> This is rich text with <i>italic</i> and <b>bold</b> formatting.</p>
        </div>

        <button id="exportBtn">Convert to Markdown & Export</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/turndown/7.1.1/turndown.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.exporter-container {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

.rich-text-box {
    width: 100%;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    overflow-y: auto;
    background-color: #fefefe;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}

JavaScript (script.js)

// Initialize Turndown for converting HTML to Markdown
const turndownService = new TurndownService();

document.getElementById('exportBtn').addEventListener('click', function () {
    // Get the rich text content from the div
    const richTextContent = document.getElementById('richTextInput').innerHTML;

    // Convert the rich text (HTML) to Markdown using Turndown
    const markdownText = turndownService.turndown(richTextContent);

    // Check if the rich text input area is empty
    if (!markdownText.trim()) {
        alert('Please enter some content to export.');
        return;
    }

    // Create a Blob from the markdown text
    const blob = new Blob([markdownText], { type: 'text/markdown' });

    // Create a link element to download the file
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'Rich_Text_Converted_to_Markdown.md';

    // Trigger the download
    link.click();

    // Clean up the object URL
    URL.revokeObjectURL(link.href);
});

How It Works:

  1. Rich Text Input:
    • A div with the contenteditable="true" attribute allows users to paste or type rich text (bold, italic, lists, etc.).
  2. Markdown Conversion:
    • The script uses Turndown.js to convert the rich text (HTML) content to Markdown format.
  3. Markdown Export:
    • After conversion, the content is packaged as a .md file using a Blob, and the user is prompted to download the file.

Turndown.js Integration:

Usage:

  1. Copy the HTML, CSS, and JavaScript into your own files.
  2. Open the HTML file in your browser.
  3. Paste or type any rich text content into the editable box.
  4. Click Convert to Markdown & Export.
  5. The rich text will be converted to Markdown and saved as a .md file.

This tool allows for easy conversion and export of selected rich text into Markdown format.