A guided tour of everything TAEditor puts in the toolbar — from the formatting basics to KaTeX math, image upload, and a code-editor Tab — and the safety and compatibility work that happens behind the scenes.
This is a full editor with every feature switched on. Format text, drop in an image, add a table, or insert an equation.
Every inline control is one click (or one shortcut) away, and each button reflects the current selection so you always know what's active.
<strong>, <em>, <u>, <s><code><mark> chipA bold claim, an italic aside, an underline, and some cut text. Inline code() stays monospace, highlights pop, and E = mc2 needs a superscript.
The block style menu switches the current block between paragraph and heading levels — its label always tracks whatever block the cursor sits in.
h1–h6 are available as individual toolbar buttons too<blockquote><hr> dividerHeading
Sub heading
A normal paragraph of body text, sitting under the headings it belongs to.
A blockquote for the parts worth pulling out.
Set the alignment on any block — and because images are aligned through their parent block, the same buttons reposition images, too.
Left-aligned line.
Centered line.
Right-aligned line.
Toggle bullet or ordered lists from the toolbar, then shape them with the keyboard the way you'd expect.
* , - , or 1. then Enter to start a listAdd a link from the toolbar dialog, or just paste a URL over selected text. Click an existing link and an inline popover lets you edit or remove it without re-selecting.
Read the full documentation for details.
Insert images by file or by URL. By default they're embedded as base64 (works fully offline); point TAEditor at an endpoint or hand it an async handler when you want them hosted.
uploadUrl// 1. base64 (default) — nothing to configure TAEditor.create('#editor'); // 2. POST to your endpoint TAEditor.create('#editor', { image: { uploadUrl: '/api/upload' } }); // 3. async handler (S3, signed URLs…) TAEditor.create('#editor', { image: { uploadHandler: async (file) => { const url = await putToS3(file); return url; } } });
Insert an N×M table, then manage it directly: each cell has a context menu to add or remove rows and columns, and Tab walks you through the grid.
| Feature | Output |
|---|---|
| Bold | <strong> |
| Highlight | <mark> |
| Code block | <pre><code> |
Write LaTeX with a live preview, or pull from a searchable library of 200+ presets across 14 topics. The LaTeX source is stored on the element, so saving and re-loading a document is lossless.
Convert a block to <pre><code> and the editor behaves like a code editor inside it — Tab inserts a real tab or indents the selection, Shift+Tab outdents.
\t, or indents every selected linefunction greet(name) { if (name) { return `Hi, ${name}`; } return 'Hi there'; }
The shortcuts that matter for fast editing, all built in.
| Key | Effect |
|---|---|
| Ctrl/Cmd + B | Bold |
| Ctrl/Cmd + I | Italic |
| Ctrl/Cmd + U | Underline |
| Tab / Shift+Tab (list) | Nest / outdent the current item |
| Tab / Shift+Tab (table) | Move to next / previous cell (adds a row at the end) |
| Tab / Shift+Tab (code) | Indent / outdent line(s) |
| Enter (empty list item) | Outdent a level, then exit the list |
* / - / 1. then Enter | Start a bullet or ordered list |
| Ctrl/Cmd + Enter (math dialog) | Insert the equation |
| Escape (any dialog) | Cancel |
A built-in sanitizer runs on every paste and on load, stripping anything that could execute. And the clear format button resets a messy selection back to clean text.
<script>, inline on* handlers, and javascript: URLs// pasted in… <img src=x onerror=alert(1)> <a href="javascript:steal()">click</a> <script>evil()</script> // …stored as <img src=x> <a>click</a>
All CSS is namespaced under .ta-editor and the editor guards against framework quirks, so it coexists with whatever you're running.
x-ignore / v-pre on the root keep them off the contenteditable subtreeMutationObserver// full editor (default toolbar) TAEditor.create('#post'); // minimal comment box TAEditor.create('#comment', { toolbar: ['bold', 'italic', 'link', 'bulletList'] });
Open the playground — no install, no signup.