markdown-text-editor 0.0.21-beta.2 → 0.0.23-beta.3

package/README.md

@@ -1,181 +1,267 @@
-# MarkdownEditor Plugin Documentation
+## MarkdownEditor Plugin Documentation
 
-This document explains how to use the **MarkdownEditor Plugin**, a customizable, reusable markdown editor with toolbar functionality that allows options like **bold** and **italic** formatting. Users can dynamically set which tools to display and in what order. The plugin is built with Tailwind CSS for styling and provides easy integration into any project.
+Welcome to the documentation for the **MarkdownEditor Plugin** – an **open source project** offering the **best, simple, embeddable JavaScript Markdown editor plugin or library**. This powerful tool provides **real-time preview**, **syntax highlighting**, and **easy integration** into your projects. Whether you’re building a blog, note-taking app, or any content-rich website, this plugin delivers a robust and customizable markdown editing experience.
+
+---
 
 ## Table of Contents
+
+- [Overview](#overview)
 - [Installation](#installation)
 - [Usage](#usage)
+- [Markdown Content Retrieval](#markdown-content-retrieval)
 - [Configuration Options](#configuration-options)
-- [Toolbar Options](#toolbar-options)
-- [Methods](#methods)
-- [Example Usage](#example-usage)
+- [Toolbar Customization](#toolbar-customization)
+- [Example Implementations](#example-implementations)
+- [Contribution Guidelines](#contribute)
 - [License](#license)
 
-## Installation
+---
 
-To install the plugin in your project, you can include the plugin JavaScript file and its associated styles.
+## Overview
 
-1. **Install via NPM** (for bundling tools like Webpack):
-   ```
-   npm install markdown-text-editor
-   ```
+The MarkdownEditor Plugin is designed to be the **best, simple, and embeddable JavaScript markdown editor plugin** available. It is an open source project that boasts:
 
-## Usage
+- **Real-time Preview:** See your markdown rendered instantly as you type.
+- **Syntax Highlighting:** Enhanced readability with clear code and markdown formatting.
+- **Easy Integration:** Seamlessly integrate into any web project with minimal setup.
+- **Customizable Toolbar:** Dynamically configure and reorder toolbar options like **bold**, **italic**, and more.
+
+Built with **Tailwind CSS** for modern styling, this plugin is perfect for developers seeking a lightweight yet feature-rich markdown editor.
+
+---
+
+## Installation
 
+Integrating the MarkdownEditor Plugin into your project is straightforward. You can install it using NPM, import the JavaScript file directly, or use a CDN for rapid deployment.
 
-Import the `MarkdownEditor` class from markdown-text-editor:
+### Install via NPM
 
+For projects utilizing bundling tools like Webpack, run:
 
+```bash
+npm install markdown-text-editor
 ```
+
+---
+
+## Usage
+
+After installation, import the `MarkdownEditor` class from the package:
+
+```javascript
 import MarkdownEditor from "markdown-text-editor";
 ```
 
-## Basic Example:
+### Basic Initialization
 
-To initialize the Markdown editor, you need to add `textarea` tag in your HTML and initialize the editor by passing the container's ID or class and options.
+To get started, include a `<textarea>` element in your HTML and initialize the editor by targeting its container:
+
+#### HTML
 
-### HTML:
 ```html
 <textarea class="editor-container"></textarea>
 ```
 
-### CSS Setup
+#### JavaScript
+
+```javascript
+const editor = new MarkdownEditor('.editor-container', {
+    placeholder: 'Write your markdown...',
+    toolbar: ['preview', 'bold', 'italic'], // Customize toolbar options as needed
+});
+```
+
+---
 
-#### Using TailwindCSS
+## CSS Setup
 
-If you are using **TailwindCSS**, add the following configuration to your `tailwind.config.js` file:
+### Using TailwindCSS
+
+If you’re leveraging **TailwindCSS**, add the following configuration to your `tailwind.config.js`:
 
 ```javascript
 // tailwind.config.js
 module.exports = {
   content: [
-    // './src/**/*.{html,js}',
     'node_modules/markdown-text-editor/**/*.js',
-  ]
-}
+    // Add your project paths here
+  ],
+};
 ```
 
-#### Without TailwindCSS
-If you are not using TailwindCSS, you can directly import the CSS file into your project:
+### Without TailwindCSS
+
+For projects not using TailwindCSS, simply import the CSS file directly:
 
 ```javascript
 import 'markdown-text-editor/dist/markdown-text-editor.css';
 ```
 
-#### Using CDN
-For projects using a CDN, you can include the following links:
+### Using a CDN
 
-**JavaScript:**
-```javascript
+Alternatively, include the following CDN links in your HTML:
+
+#### JavaScript:
+
+```html
 <script src="https://cdn.jsdelivr.net/npm/markdown-text-editor/dist/markdown-text-editor.js"></script>
 ```
 
-**CSS:**
-```javascript
+#### CSS:
+
+```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markdown-text-editor/dist/markdown-text-editor.min.css">
 ```
 
+---
 
-#### Using a bundler e.g. Webpack:
-```javascript
-import MarkdownEditor from 'markdown-text-editor';
+## Markdown Content Retrieval
+
+### JavaScript Value Retrieval
+
+In this method, you can access the markdown content entered into the editor directly using JavaScript. This is helpful when you want to dynamically retrieve the value and process it in your application (e.g., displaying it elsewhere or sending it via AJAX).
+
+
+#### HTML
+
+```html
+<form>
+  <textarea class="editor-container"></textarea>
+  <button type="button" id="submit-btn">Submit</button>
+  <div class="output"></div>
+</form>
+```
 
+#### JavaScript
+
+```javascript
 const editor = new MarkdownEditor('.editor-container', {
-    placeholder: 'Write your markdown...',
-    toolbar: ['preview', 'bold', 'italic'], // Define the tools you want in the toolbar
+    placeholder: 'Start writing...',
+    toolbar: ['bold', 'italic', 'preview'],
+});
+
+document.getElementById('submit-btn').addEventListener('click', function() {
+    const markdownValue = document.querySelector('.editor-container').value;
+    console.log(markdownValue);
+    document.querySelector('.output').innerHTML = `<pre>${markdownValue}</pre>`;
 });
 ```
 
-This will create a markdown editor with a toolbar at the top and a preview area below the text input.
+### HTML Template Form Submission
 
-### Dynamic Toolbar:
+If you prefer a traditional form submission approach (for example, in server-side applications like Django), you can integrate the markdown editor into a form that submits the value to the server for processing.
 
-You can specify which formatting options you want in the toolbar. The plugin supports different tools that can be reordered.
+#### HTML (Form Submission)
+
+```html
+<form method="POST" action="/your-server-endpoint">
+    <textarea class="editor-container" name="markdown"></textarea>
+    <button type="submit">Submit</button>
+</form>
+```
+
+you can retrieve the value from a traditional `<textarea>` in a form submission without any custom element. When the form is submitted, the content inside the `<textarea>` is automatically included as part of the form data, using the name attribute of the `<textarea>`. 
+
+#### JavaScript (MarkdownEditor Initialization)
 
-**For example:**
 ```javascript
 const editor = new MarkdownEditor('.editor-container', {
-    placeholder: 'Start writing...',
-    toolbar: ['bold', 'italic', 'strikethrough', 'preview'],
+    placeholder: 'Write your markdown...',
+    toolbar: ['preview', 'bold', 'italic'],
 });
 ```
 
+
 ## Configuration Options
 
-You can customize the Markdown editor by passing an `options` object when initializing it.
+Customize your Markdown editor by passing an `options` object during initialization. Below are some key configuration options:
+
+| Option        | Type     | Default                      | Description                                               |
+|---------------|----------|------------------------------|-----------------------------------------------------------|
+| `placeholder` | `string` | `'Write your markdown...'`   | Sets the placeholder text for the textarea.             |
+| `toolbar`     | `array`  | `['bold', 'italic', 'strikethrough']` | Determines which tools appear in the toolbar and their order. |
 
-| Option      | Type     | Default                    | Description                                         |
-|-------------|----------|----------------------------|-----------------------------------------------------|
-| `placeholder` | `string` | `'Write your markdown...'` | The placeholder text for the textarea.               |
-| `toolbar`   | `array`  | `['bold', 'italic', 'strikethrough']`        | The tools to display in the toolbar and their order. |
+---
 
-## Toolbar Options
+## Toolbar Customization
 
-The toolbar can be customized to include the following options (you can add more tools as needed):
+Tailor the toolbar to suit your needs by choosing which formatting options to include. The MarkdownEditor Plugin supports several tools, including:
 
-- `bold`: Adds a bold button to the toolbar.
-- `italic`: Adds an italic button to the toolbar.
+- **`bold`**: Enables bold text formatting.
+- **`italic`**: Enables italic text formatting.
+- **`strikethrough`**: Allows text to be struck through.
+- **`preview`**: Toggles the real-time markdown preview.
 
-Example:
+**Example:**
 
 ```javascript
 const editor = new MarkdownEditor('.editor-container', {
-    placeholder: 'Your markdown here...',
-    toolbar: ['preview', 'italic', 'bold'], // Shows italic first, then bold
+    placeholder: 'Start writing...',
+    toolbar: ['bold', 'italic', 'strikethrough', 'preview'],
 });
 ```
 
-## Example Usage
+---
+
+## Example Implementations
+
+### Full HTML Example
 
-### Full Example:
+Below is a complete HTML example demonstrating how to integrate the MarkdownEditor Plugin into your project:
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Markdown Editor Example</title>
-    <link rel="stylesheet" href="dist/markdown-editor-plugin.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Markdown Editor Example</title>
+  <link rel="stylesheet" href="dist/markdown-editor-plugin.css">
 </head>
 <body>
-  <textarea class="editor"></textarea>
-
-    <script src="dist/markdown-editor-plugin.js"></script>
-    <script>
-        const editor = new MarkdownEditor('.editor-container', {
-            placeholder: 'Type some markdown...',
-            toolbar: ['preview', 'bold', 'italic'] // Toolbar order: bold first, then italic
-        });
-    </script>
+  <textarea class="editor-container"></textarea>
+
+  <script src="dist/markdown-editor-plugin.js"></script>
+  <script>
+    const editor = new MarkdownEditor('.editor-container', {
+      placeholder: 'Type your markdown...',
+      toolbar: ['preview', 'bold', 'italic']
+    });
+  </script>
 </body>
 </html>
 ```
 
-### Webpack Example:
+### Webpack Integration Example
 
-To use the plugin with Webpack, import the plugin and initialize it as shown below:
+For projects using Webpack, import and initialize the editor as follows:
 
 ```javascript
 import MarkdownEditor from 'markdown-text-editor';
 
 const editor = new MarkdownEditor('.editor-container', {
     placeholder: 'Write markdown...',
-    toolbar: ['preview', 'bold', 'italic'],  // Custom toolbar options
+    toolbar: ['preview', 'bold', 'italic'],
 });
 ```
 
-### Customizing Styles with Tailwind:
+### Customizing Styles with TailwindCSS
+
+Customize the appearance of the editor using Tailwind utility classes. The plugin’s default styling can be easily overridden in your custom Tailwind configuration.
+
+---
+
+## Contribute
 
-You can modify the appearance of the editor and toolbar using Tailwind utility classes. For example:
+Contributions to this **open source project** are highly encouraged! If you have bug fixes, feature enhancements, or new ideas, please consider opening an issue or submitting a pull request. Your help will ensure that this **best, simple, embeddable JavaScript markdown editor plugin** continues to evolve and serve the community with **real-time preview** and **syntax highlighting** capabilities.
 
-- The toolbar and editor area are styled with Tailwind by default.
-- You can override these classes in your custom Tailwind config to suit your design.
+---
 
-## Contribute to the Project
+## License
 
-If you're interested in improving this editor, I welcome contributions! Feel free to open issues or submit pull requests with bug fixes, features, or enhancements. Your contributions will help keep the project active and thriving.
+This project is released under the [MIT License](LICENSE).
 
-Thank you for your support and consideration. Let’s continue to improve Markdown editing together!
+---
 
-## A Product of Nezanuha
+Thank you for choosing the MarkdownEditor Plugin – your reliable, feature-rich solution for seamless markdown editing and content creation with **easy integration**. Happy coding!