TextEditor Component

A rich text editor wrapper powered by TinyMCE. Provides visual text editing with support for formatting, lists, tables, colors, alignment, search & replace, and more. The component uses locally bundled TinyMCE skins and does not require an API key.

---

Table of Contents

• Import
• Basic Usage
• Props
• Events
• TypeScript Interfaces
• Enabled Features
• Usage Examples
• Best Practices
• Troubleshooting

---

Import

import { TextEditor } from "dolphin-components";
import type { TextEditorProps } from "dolphin-components";

---

Basic Usage

<template>
  <TextEditor v-model="content" />
</template>

<script setup>
import { ref } from "vue";
import { TextEditor } from "dolphin-components";

const content = ref("<p>Start typing...</p>");
</script>

---

Props

Prop	Type	Default	Description
modelValue	string	""	The HTML content of the editor. Supports v-model.
menubar	boolean	true	Show or hide the TinyMCE menubar (File, Edit, View, etc.).
statusbar	boolean	true	Show or hide the status bar at the bottom of the editor.
min_height	number	500	Minimum height in pixels of the editor content area.

---

Events

Event	Payload	Description
update:modelValue	string	Emitted when the editor content changes.

---

Slots

This component does not provide any slots.

---

TypeScript Interfaces

interface TextEditorProps {
  modelValue: string;
  menubar?: boolean;
  statusbar?: boolean;
  min_height?: number;
}

---

Enabled Features

Plugins

lists, advlist, autolink, charmap, searchreplace, wordcount, table, visualblocks, visualchars

Toolbar Actions

• Font sizes
• Bold, Italic, Underline, Strikethrough
• Text color and background color
• Text alignment (left, center, right, justify)
• Bulleted and numbered lists
• Undo / Redo
• Search & Replace
• Block markers (visual blocks)

Safety Configurations

• Paste as plain text: Strips complex formatting from pasted content.
• Removed spans/styles on paste: Prevents structural markup issues.
• Invalid elements: img, figure, and svg tags are blocked to ensure clean, content-only workflows.

---

Usage Examples

Compact Editor (Without Menubar)

<template>
  <TextEditor v-model="note" :menubar="false" :min_height="200" />
</template>

<script setup>
import { ref } from "vue";
import { TextEditor } from "dolphin-components";

const note = ref("");
</script>

With Live Preview

<template>
  <div class="grid grid-cols-2 gap-6">
    <div>
      <h3>Editor</h3>
      <TextEditor v-model="htmlContent" :min_height="400" :menubar="false" />
    </div>
    <div>
      <h3>Preview</h3>
      <div class="border p-4 rounded" v-html="htmlContent"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { TextEditor } from "dolphin-components";

const htmlContent = ref("<p>Type your content here...</p>");
</script>

Form Integration

<template>
  <form @submit.prevent="submitPost">
    <div class="mb-4">
      <label class="input-label">Title</label>
      <input class="input-text" v-model="post.title" />
    </div>

    <div class="mb-4">
      <label class="input-label">Content</label>
      <TextEditor v-model="post.body" :min_height="300" />
    </div>

    <button type="submit" class="btn btn-primary">Publish</button>
  </form>
</template>

<script setup>
import { reactive } from "vue";
import { TextEditor } from "dolphin-components";

const post = reactive({
  title: "",
  body: "",
});

const submitPost = () => {
  console.log("Publishing:", post);
};
</script>

---

Best Practices

1. Use v-model for two-way binding — The editor emits HTML string content through update:modelValue.
2. Sanitize output — Although images and SVGs are blocked by the editor config, always sanitize HTML before rendering with v-html or storing in a database.
3. Set appropriate height — Use min_height to match the expected content volume. Use 200-300 for comments, 400-500 for articles.
4. Hide menubar for simple editors — Set :menubar="false" for note-taking or comment fields where the full menu is unnecessary.

---

Troubleshooting

Editor not rendering

• TinyMCE is bundled locally with oxide skins. Ensure the package's CSS is properly imported (dolphin-components/dolphin-components.css).
• No API key is required — the editor uses the open-source TinyMCE core.

Content not syncing with v-model

• Ensure you're using v-model (not :modelValue without the event handler).
• The editor updates the model on every content change.

Paste formatting issues

• The editor is configured to strip complex formatting on paste. This is intentional to maintain clean content. Inline styles (bold, italic) are preserved.

---

Dependencies

• @tinymce/tinymce-vue — Vue 3 integration component for TinyMCE
• tinymce — Core rich text editor engine (bundled with oxide skins)