TuxRichTextEditor

flagship · full feature set

Seven toolbar groups + source mode + full-screen

Format · Headings (H1–H4) · Lists (bullet · numbered · task) · Block (quote · code · rule) · Media (link · image) · Table (insert + manipulate when in-table) · Mode (WYSIWYG ↔ raw HTML source). Plus undo / redo, full-screen, and word count.

Try: Click Source to view the raw HTML, edit it, click WYSIWYG to see your changes rendered. The pre-seeded content already exercises a task list, table, and Python code block (with syntax highlighting via lowlight). Press ⌘S to emit the save event.

<h2>Field notes — corridor compliance pass</h2>
<p>Visited <strong>three sites</strong> in the Bryan district. Two showed the expected post-treatment behavior; one (<em>FM-60 / Wellborn</em>) regressed toward baseline. <u>Possible causes</u>:</p>
<ul>
  <li>Construction-phase signage degraded sight lines</li>
  <li>Beacon battery on the eastern approach drained — needs replacement</li>
  <li>Driver-population shift after the spring semester start</li>
</ul>
<blockquote>The compliance figure dropped from 51% (Q3 2025) to 38% (Q1 2026) at this site only. Treatment-effect persistence cannot be claimed without explaining the regression.</blockquote>
<h3>Action items</h3>
<ul data-type="taskList">
  <li data-type="taskItem" data-checked="true"><div>Open a maintenance ticket for the eastern beacon</div></li>
  <li data-type="taskItem" data-checked="false"><div>Re-instrument for one quarter</div></li>
  <li data-type="taskItem" data-checked="false"><div>Compare against the I-35 corridor regression model</div></li>
</ul>
<h3>Sample analysis</h3>
<table>
  <thead>
    <tr><th>Quarter</th><th>Treated %</th><th>Control %</th><th>Δ</th></tr>
  </thead>
  <tbody>
    <tr><td>Q3 2025</td><td>51</td><td>78</td><td>-27</td></tr>
    <tr><td>Q4 2025</td><td>45</td><td>77</td><td>-32</td></tr>
    <tr><td>Q1 2026</td><td>38</td><td>78</td><td>-40</td></tr>
  </tbody>
</table>
<p>Quick code reference:</p>
<pre><code class="language-python">def compliance_delta(treated, control):
    """Return treated minus control as a percent point."""
    return round(treated - control, 1)
</code></pre>
<p>Try → <code>"smart quotes"</code> and an em dash --- and a horizontal rule below.</p>
<hr>
<p>End of field-note draft.</p>

<tux-rich-text-editor
  v-model="html"
  placeholder="Start writing…"
  @update="onUpdate"
  @save="onSave"
  @mode-change="onModeChange"
  @fullscreen-change="onFullscreenChange"
/>

events: save count = 0 · mode = wysiwyg · fullscreen = false

density · trimmed

Inline comment field

Pass a subset of toolbar groups via :toolbar, zero out :heading-levels, hide the word count and full-screen for tight contexts.

<tux-rich-text-editor
  v-model="html"
  :toolbar="['format', 'lists', 'media']"
  :heading-levels="[]"
  min-height="6rem"
  max-height="14rem"
  :show-count="false"
  :fullscreenable="false"
  placeholder="What changed?"
/>

minimal

Source-mode only chrome

Three buttons (bold · italic · underline + the mode toggle) for surfaces where the user mostly wants a textarea with the occasional formatting tag.

<tux-rich-text-editor
  v-model="html"
  :toolbar="['format', 'mode']"
  :heading-levels="[]"
  min-height="5rem"
  placeholder="Add a note…"
/>

feature inventory

What ships

Inline marks: bold, italic, underline, strikethrough, inline code
Headings: H1 · H2 · H3 · H4 (configurable per consumer)
Lists: bullet, numbered, task (checkable, nestable)
Blocks: blockquote, code block (with lowlight syntax highlighting), horizontal rule
Media: link (⌘K prompt, brand-color rendering), image (URL + alt prompt, base64 allowed)
Tables: insert 3×3 with header row; add / remove columns and rows; resizable column widths; delete table
Mode toggle: WYSIWYG ↔ raw HTML source textarea — edits in either view round-trip cleanly
Full-screen: overlay mode (Esc exits); useful for long-form drafting
Word / character count: live footer; pure DOM-text count, ignores tags
Save event: ⌘S / Ctrl+S emits save — host wires to persist
Typography substitutions: smart quotes, em dashes, ellipses (Tiptap Typography extension)
Undo / redo: with disabled-state derived from editor.can()

why this is the canonical surface

One editor across the stack

The feature set mirrors the TipTapEditor component in docs-tti-tamu-edu/nuxt-site/app/components/ so the same chrome can land in Landscape's draft surfaces, tti-ai-studio's chat composition, and the docs platform's admin center — without each consumer maintaining its own Tiptap wrapper. Things the docs editor does that this one defers to a follow-on:

Markdown ↔ HTML round-trip — needs turndown + a markdown parser; defer until a consumer surface stores markdown rather than HTML. The :sourceFormat prop is the planned extension point.
YAML frontmatter preservation — coupled to the markdown round-trip above.
Slash-command palette — Tiptap supports via extension-mention; defer to a follow-on if AI-studio chat composition adopts it.