1
0
Fork
You've already forked downarea2
0
forked from PieFed/downarea2
Tweaked version of downarea.js
  • JavaScript 49.3%
  • TypeScript 44.7%
  • CSS 4.7%
  • HTML 1.3%
2025年06月23日 22:23:10 +09:00
img DownArea logo added to an internal directory 2022年01月19日 23:26:47 +03:00
src httpsはいらない 2025年06月23日 22:23:10 +09:00
index.html Added re-use feature of existing Textarea 2021年08月21日 17:23:59 +03:00
LICENSE Initial Commit 2021年07月04日 15:51:30 +03:00
package.json Update package author 2021年08月21日 17:29:24 +03:00
README.md DownArea logo added to an internal directory 2022年01月19日 23:26:47 +03:00
tsconfig.json Add removeComments' key to tsconfig.json file 2021年07月05日 10:30:34 +03:00

DownArea Logo

DownArea

An easy to use, lightweight and extensible JavaScript markdown editor library.

CDN Links

https://cdn.jsdelivr.net/gh/fatihege/downarea@1.3.0/src/downarea.min.js https://cdn.jsdelivr.net/gh/fatihege/downarea@1.3.0/src/downarea.min.css

https://cdn.jsdelivr.net/gh/fatihege/downarea@1.3.0/src/downarea.js https://cdn.jsdelivr.net/gh/fatihege/downarea@1.3.0/src/downarea.css

Tools

Key Name
heading Headings
bold Bold
italic Italic
bold-italic Bold Italic
link Links
image Image
blockquote Blockquote
u-list Unordered List
o-list Ordered List
sl-code Single Line Code
code-block Code Block

Simple Usage

Usage with the <div> element:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>DownArea</title>
 <link rel="stylesheet" href="downarea.min.css">
</head>
<body>
<div class="editor"></div>
<script src="downarea.min.js"></script>
<script>
 var downarea = new DownArea({
 elem: document.querySelector('.editor'), // Required - Container element
 resize: DownArea.RESIZE_BOTH, // Optional - RESIZE_OFF | RESIZE_VERTICAL | RESIZE_HORIZONTAL | RESIZE_BOTH
 hide: ['heading'], // Optional - Type the keys of the tools you want to hide here.
 name: 'body', // Optional - `name` attribute value.
 value: 'Lorem ipsum dolor sit amet.', // Optional - Textarea value.
 });
</script>
</body>
</html>

Usage with the <textarea> element:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>DownArea</title>
 <link rel="stylesheet" href="downarea.min.css">
</head>
<body>
<textarea class="editor" name="content"></textarea>
<script src="downarea.min.js"></script>
<script>
 var downarea = new DownArea({
 elem: document.querySelector('.editor'), // Required - Textarea element.
 attr: { // Optional - Values of the `id` and `class` attributes. 
 id: ['editor-id'], // Optional - ID of the element.
 class: ['editor-class'], // Optional - Class of the element.
 },
 resize: DownArea.RESIZE_BOTH, // Optional - RESIZE_OFF | RESIZE_VERTICAL | RESIZE_HORIZONTAL | RESIZE_BOTH
 hide: ['heading'], // Optional - Type the keys of the tools you want to hide here.
 name: 'body', // Optional - `name` attribute value. Overwrites if the name attribute is defined.
 value: 'Lorem ipsum dolor sit amet.', // Optional - Textarea value.
 });
</script>
</body>
</html>

All Arguments

Key Description
elem DownArea container DIV or TextArea
attr If the elem key is given the textarea element, the values of the ID and class attributes of the container element.
resize Editor's resizer options.
hide Tools to hide.
name The value of the textarea's name attribute.
value The content of the textarea.

Tool Methods (Public Methods)

Tool Key Method Args
heading-1 .addHeading(level: number = 1) default (1)
heading-2 .addHeading(level: number = 1) 2
heading-3 .addHeading(level: number = 1) 3
heading-4 .addHeading(level: number = 1) 4
heading-5 .addHeading(level: number = 1) 5
heading-6 .addHeading(level: number = 1) 6
bold .addBold() empty
italic .addItalic() empty
bold-italic .addItalic() empty
normal-link .addLink(type: number = 0) default (0)
quick-link .addLink(type: number = 0) 1
email .addEmail() empty
image .addImage() empty
blockquote .addBlockquote() empty
u-list .addUnorderedList() empty
o-list .addOrderedList() empty
sl-code .addSingleLineCode() empty
code-block .addCodeBlock() empty