https://github.com/komagata/textarea-markdown
Make textarea a markdown editor.
https://github.com/komagata/textarea-markdown
markdown rails textarea
Last synced: 10 months ago
JSON representation
Make textarea a markdown editor.
- Host: GitHub
- URL: https://github.com/komagata/textarea-markdown
- Owner: komagata
- Created: 2017-11-09T05:20:49.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-07-17T21:28:08.000Z (11 months ago)
- Last Synced: 2025-07-20T06:24:16.545Z (11 months ago)
- Topics: markdown, rails, textarea
- Language: JavaScript
- Size: 688 KB
- Stars: 44
- Watchers: 3
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# textarea-markdown
[](https://gyazo.com/5759ef553225cfa788adf3596b90e256)
Make textarea a markdown editor.
## Usage
```
$ npm install textarea-markdown
```
```html
Editor
Preview
```
```javascript
import TextareaMarkdown from 'textarea-markdown'
let textarea = document.querySelector('textarea');
new TextareaMarkdown(textarea);
```
with rails.
```html
```
```javascript
import TextareaMarkdown from 'textarea-markdown'
document.addEventListener('DOMContentLoaded', () => {
const token = document.querySelector("meta[name=\"csrf-token\"]").content;
const textarea = document.querySelector('#editor');
new TextareaMarkdown(textarea, {
endPoint: '/api/image.json',
paramName: 'file',
responseKey: 'url',
csrfToken: token,
placeholder: 'uploading %filename ...',
uploadImageTag: '
\n',
})
});
```
### Options
#### useUploader
- type: Boolean
- default: true
Enable uploading files on drop when the value is set to true
#### file upload by file selection dialog
Enable uploading files by file selection dialog when using `` as in the following code
```html
Editor & File input
Preview
```
```javascript
import TextareaMarkdown from 'textarea-markdown'
let textarea = document.querySelector('textarea');
new TextareaMarkdown(textarea);
```
#### plugins
- type: Array
- default: []
An array of Markdown-It plugins to apply.
Each plugin can be either:
- a function (plugin)
- or an array like `[plugin, option1, option2, ...]`
**Example**
```javascript
import TextareaMarkdown from 'textarea-markdown'
import markdownItEmoji from 'markdown-it-emoji'
import markdownItSub from 'markdown-it-sub'
new TextareaMarkdown(textarea, {
plugins: [
markdownItEmoji,
[markdownItSub, { delimiter: '~' }]
]
})
```