Skip to content

Commit 1c46a09

Browse files
author
nezanuha
committed
Enhance README.md for clearer plugin usage instructions
1 parent 0fecfe6 commit 1c46a09

File tree

2 files changed

+59
-1
lines changed

2 files changed

+59
-1
lines changed

README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Welcome to the documentation for the **MarkdownEditor Plugin** – an **open sou
99
- [Overview](#overview)
1010
- [Installation](#installation)
1111
- [Usage](#usage)
12+
- [Markdown Content Retrieval](#markdown-content-retrieval)
1213
- [Configuration Options](#configuration-options)
1314
- [Toolbar Customization](#toolbar-customization)
1415
- [Example Implementations](#example-implementations)
@@ -115,6 +116,63 @@ Alternatively, include the following CDN links in your HTML:
115116

116117
---
117118

119+
## Markdown Content Retrieval
120+
121+
### JavaScript Value Retrieval
122+
123+
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).
124+
125+
126+
#### HTML
127+
128+
```html
129+
<form>
130+
<textarea class="editor-container"></textarea>
131+
<button type="button" id="submit-btn">Submit</button>
132+
<div class="output"></div>
133+
</form>
134+
```
135+
136+
#### JavaScript
137+
138+
```javascript
139+
const editor = new MarkdownEditor('.editor-container', {
140+
placeholder: 'Start writing...',
141+
toolbar: ['bold', 'italic', 'preview'],
142+
});
143+
144+
document.getElementById('submit-btn').addEventListener('click', function() {
145+
const markdownValue = document.querySelector('.editor-container').value;
146+
console.log(markdownValue);
147+
document.querySelector('.output').innerHTML = `<pre>${markdownValue}</pre>`;
148+
});
149+
```
150+
151+
### HTML Template Form Submission
152+
153+
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.
154+
155+
#### HTML (Form Submission)
156+
157+
```html
158+
<form method="POST" action="/your-server-endpoint">
159+
<textarea class="editor-container" name="markdown"></textarea>
160+
<button type="submit">Submit</button>
161+
</form>
162+
```
163+
164+
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>`.
165+
166+
#### JavaScript (MarkdownEditor Initialization)
167+
168+
```javascript
169+
const editor = new MarkdownEditor('.editor-container', {
170+
placeholder: 'Write your markdown...',
171+
toolbar: ['preview', 'bold', 'italic'],
172+
});
173+
```
174+
175+
118176
## Configuration Options
119177

120178
Customize your Markdown editor by passing an `options` object during initialization. Below are some key configuration options:

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "markdown-text-editor",
3-
"version": "0.0.21-beta.3",
3+
"version": "0.0.22-beta.3",
44
"description": "A powerful, easy-to-use Markdown editor with a real-time preview, syntax highlighting. Ideal for developers, writers, and content creators who need a seamless, interactive writing experience with full Markdown support.",
55
"main": "./dist/markdown-text-editor.js",
66
"browser": "dist/markdown-text-editor.js",

0 commit comments

Comments
 (0)