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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +58 -0
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -9,6 +9,7 @@ Welcome to the documentation for the **MarkdownEditor Plugin** – an **open sou
9
9
  - [Overview](#overview)
10
10
  - [Installation](#installation)
11
11
  - [Usage](#usage)
12
+ - [Markdown Content Retrieval](#markdown-content-retrieval)
12
13
  - [Configuration Options](#configuration-options)
13
14
  - [Toolbar Customization](#toolbar-customization)
14
15
  - [Example Implementations](#example-implementations)
@@ -115,6 +116,63 @@ Alternatively, include the following CDN links in your HTML:
115
116
 
116
117
  ---
117
118
 
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
+
118
176
  ## Configuration Options
119
177
 
120
178
  Customize your Markdown editor by passing an `options` object during initialization. Below are some key configuration options:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "markdown-text-editor",
3
- "version": "0.0.21-beta.3",
3
+ "version": "0.0.23-beta.3",
4
4
  "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.",
5
5
  "main": "./dist/markdown-text-editor.js",
6
6
  "browser": "dist/markdown-text-editor.js",