Vanilla JS · No Dependencies
onvshark-texteditor
Lightweight, zero-dependency rich text editor for any web project. Attach it to a textarea by id and pick the buttons you need.
Lightweight, zero-dependency rich text editor for any web project. Attach it to a textarea by id and pick the buttons you need.
<link rel="stylesheet" href="texteditor.css">
<script src="texteditor.js"></script>Blok teks lalu pakai toolbar. Klik gambar atau video untuk ubah ukuran.
tools: ['size', 'color']
tools: [] — Enter tetap jalan.
const editor = OnvTextEditor.init(id, options)| # | Parameter | Type | Description |
|---|---|---|---|
| 1 | id |
string | HTMLTextAreaElement |
Textarea id ('desc' or '#desc') or the element |
| 2 | options |
object |
Optional, see the options table below |
| Key | Type | Default | Description |
|---|---|---|---|
tools | string[] | all | Toolbar buttons to show. Order always follows the toolbar. |
color | string | '#000000' | Starting value of the color picker |
size | number | 16 | Starting value of the font size input (px) |
| Value | Description |
|---|---|
'bold' | Bold |
'italic' | Italic |
'underline' | Underline |
'ul' | Bullet list |
'ol' | Numbered list |
'align' | Alignment dropdown: left, center, right, justify |
'color' | Text color |
'size' | Font size (px) |
'link' | Link: text + URL |
'image' | Image: URL + alt text |
'video' | YouTube / Vimeo embed |
'fullscreen' | Fullscreen |
'code' | HTML code view |
| Property / Method | Description |
|---|---|
getHTML() | Current HTML (same as textarea.value) |
setHTML(html) | Load content, e.g. after fetching data for an edit form |
element | Wrapper element (.onvs-texteditor) |
OnvTextEditor.sanitize(html) // clean HTML before showing it on a public pageconst desc = OnvTextEditor.init('desc')const title = OnvTextEditor.init('title', { tools: ['size', 'color'] })const title = OnvTextEditor.init('title', { tools: ['size', 'color'] })
const content = OnvTextEditor.init('content')desc.setHTML(data.description)el.innerHTML = OnvTextEditor.sanitize(html)Everything not listed is removed, including scripts, onclick / onerror and javascript: links.
| Kind | Allowed |
|---|---|
| Tags | b strong i em u br p div span ul ol li a img iframe |
| Styles | color · font-size (px) · text-align · width (% / px, img & iframe only) |
a href | https:// · http:// · mailto: · tel:, always opens in a new tab |
img src | https:// · http:// · site path /... |
iframe src | YouTube and Vimeo embeds only |
| Variable | Default |
|---|---|
--onvs-texteditor-border | #d0d5dd |
--onvs-texteditor-focus | #1a4099 |
--onvs-texteditor-bg | #fff |
--onvs-texteditor-bar-bg | #f6f7f9 |
--onvs-texteditor-text | inherit |
--onvs-texteditor-btn-hover | #e9ecf2 |
--onvs-texteditor-btn-active | #dbe4ff |
--onvs-texteditor-placeholder | #98a2b3 |
--onvs-texteditor-radius | 6px |
--onvs-texteditor-min-height | 120px |
init again returns the existing editor.