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:
- Use a contentEditable
div
to allow users to input or paste rich text. - Use the Turndown library to convert the HTML content to Markdown.
- 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:
- Rich Text Input:
- A
div
with thecontenteditable="true"
attribute allows users to paste or type rich text (bold, italic, lists, etc.).
- A
- Markdown Conversion:
- The script uses Turndown.js to convert the rich text (HTML) content to Markdown format.
- Markdown Export:
- After conversion, the content is packaged as a
.md
file using aBlob
, and the user is prompted to download the file.
- After conversion, the content is packaged as a
Turndown.js Integration:
- Turndown.js is a popular JavaScript library that converts HTML to Markdown. It handles rich text elements like bold, italic, headings, and lists.
- It’s included in the HTML file using a CDN in this case (
<script src="https://cdnjs.cloudflare.com/ajax/libs/turndown/7.1.1/turndown.min.js"></script>
).
Usage:
- Copy the HTML, CSS, and JavaScript into your own files.
- Open the HTML file in your browser.
- Paste or type any rich text content into the editable box.
- Click Convert to Markdown & Export.
- 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.