Appearance

Rich Text Editor ​

The FTRichText component provides a powerful WYSIWYG rich text editor built on top of Tiptap, offering a comprehensive set of text formatting and content structuring capabilities.

Usage ​

The rich text editor provides an intuitive toolbar with various formatting options and supports standard keyboard shortcuts for efficient content editing.

Composition api (script setup) ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText, FTInput } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

</script>

<template>
  <FTRichText v-model="content" />
  <FTInput type="textarea" label="HTML Output" :modelValue="content" readOnly />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText, FTInput } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

</script>

<template>
  <FTRichText v-model="content" />
  <FTInput type="textarea" label="HTML Output" :modelValue="content" readOnly />
</template>

Basic Example ​

INFO


With Actions ​

The actions slot allows you to add custom buttons or controls to the editor toolbar.

INFO


vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText, FTButton, FTInput } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

const handleAIAssist = () => {
  console.log('AI Assist clicked!');
};

const handleExport = () => {
  console.log('Export clicked!');
};
</script>

<template>
  <FTRichText v-model="content">
    <template #actions>
      <FTButton iconOnly iconSmall icon="fad rocket-launch" @click="handleAIAssist" />
      <FTButton iconOnly iconSmall icon="fas wand-magic-sparkles" @click="handleExport" />
    </template>
  </FTRichText>
  <FTInput type="textarea" label="HTML Output" :modelValue="content" readOnly />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText, FTButton, FTInput } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

const handleAIAssist = () => {
  console.log('AI Assist clicked!');
};

const handleExport = () => {
  console.log('Export clicked!');
};
</script>

<template>
  <FTRichText v-model="content">
    <template #actions>
      <FTButton iconOnly iconSmall icon="fad rocket-launch" @click="handleAIAssist" />
      <FTButton iconOnly iconSmall icon="fas wand-magic-sparkles" @click="handleExport" />
    </template>
  </FTRichText>
  <FTInput type="textarea" label="HTML Output" :modelValue="content" readOnly />
</template>

Simplified Editor ​

You can hide specific buttons to create a simpler editor interface.

INFO


vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText, FTInput } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Simple editor with fewer options</p>');

// Hide advanced formatting options
const simpleButtons = {
  h1: false,
  h2: false,
  h3: false,
  colorPicker: false,
  alignJustify: false,
  codeBlock: false,
  horizontalRule: false,
};

// Customize tooltips
const customTooltips = {
  bold: 'Make text bold (Ctrl+B)',
  italic: 'Italicize (Ctrl+I)',
  link: 'Insert link',
};
</script>

<template>
  <FTRichText v-model="content" :buttons="simpleButtons" :tooltips="customTooltips" />
  <FTInput type="textarea" label="HTML Output" :modelValue="content" readOnly />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText, FTInput } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Simple editor with fewer options</p>');

// Hide advanced formatting options
const simpleButtons = {
  h1: false,
  h2: false,
  h3: false,
  colorPicker: false,
  alignJustify: false,
  codeBlock: false,
  horizontalRule: false,
};

// Customize tooltips
const customTooltips = {
  bold: 'Make text bold (Ctrl+B)',
  italic: 'Italicize (Ctrl+I)',
  link: 'Insert link',
};
</script>

<template>
  <FTRichText v-model="content" :buttons="simpleButtons" :tooltips="customTooltips" />
  <FTInput type="textarea" label="HTML Output" :modelValue="content" readOnly />
</template>

With Label ​

Add a label above the editor using the label prop. Combine with isRequired to show a required indicator.

INFO

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Editor with a label</p>');
</script>

<template>
  <FTRichText v-model="content" label="Description" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Editor with a label</p>');
</script>

<template>
  <FTRichText v-model="content" label="Description" />
</template>

With Label and Required ​

INFO

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>This field is required</p>');
</script>

<template>
  <FTRichText v-model="content" label="Terms & Conditions" :isRequired="true" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>This field is required</p>');
</script>

<template>
  <FTRichText v-model="content" label="Terms & Conditions" :isRequired="true" />
</template>

Disabled State ​

When disabled, the editor becomes non-editable and the toolbar is non-interactive, using the same disabled styling as FTInput.

INFO

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>This editor is <strong>disabled</strong>. You cannot edit the content.</p>');
</script>

<template>
  <FTRichText v-model="content" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>This editor is <strong>disabled</strong>. You cannot edit the content.</p>');
</script>

<template>
  <FTRichText v-model="content" disabled />
</template>

Technical Details ​

The component is built using:

  • Tiptap - A headless wrapper around ProseMirror
  • StarterKit - Provides essential editor extensions

Props ​

NameTypeDefaultDescription
modelValueString''The HTML content of the editor (supports v-model)
tooltipsFTRichTextTooltips{}Custom tooltip text for toolbar buttons
buttonsFTRichTextButtons{}Controls visibility of toolbar buttons
disabledBooleanfalseDisables the editor and toolbar when true
labelString''Label text displayed above the editor
isRequiredBooleanfalseShows a required indicator (*) next to the label

Tooltips Interface ​

The tooltips prop accepts an object with the following optional properties:

typescript
interface FTRichTextTooltips {
  bold?: string;
  italic?: string;
  strikethrough?: string;
  code?: string;
  paragraph?: string;
  h1?: string;
  h2?: string;
  h3?: string;
  bulletList?: string;
  orderedList?: string;
  codeBlock?: string;
  horizontalRule?: string;
  alignLeft?: string;
  alignCenter?: string;
  alignRight?: string;
  alignJustify?: string;
  unsetAlign?: string;
  link?: string;
  unlink?: string;
}
interface FTRichTextTooltips {
  bold?: string;
  italic?: string;
  strikethrough?: string;
  code?: string;
  paragraph?: string;
  h1?: string;
  h2?: string;
  h3?: string;
  bulletList?: string;
  orderedList?: string;
  codeBlock?: string;
  horizontalRule?: string;
  alignLeft?: string;
  alignCenter?: string;
  alignRight?: string;
  alignJustify?: string;
  unsetAlign?: string;
  link?: string;
  unlink?: string;
}

Default Tooltips:

  • bold: "Bold"
  • italic: "Italic"
  • strikethrough: "Strikethrough"
  • code: "Code"
  • paragraph: "Paragraph"
  • h1: "Heading 1"
  • h2: "Heading 2"
  • h3: "Heading 3"
  • bulletList: "Bullet List"
  • orderedList: "Ordered List"
  • codeBlock: "Code Block"
  • horizontalRule: "Horizontal Rule"
  • alignLeft: "Align Left"
  • alignCenter: "Align Center"
  • alignRight: "Align Right"
  • alignJustify: "Justify"
  • unsetAlign: "Unset Alignment"
  • link: "Link"
  • unlink: "Unlink"

Buttons Interface ​

The buttons prop accepts an object with the following optional boolean properties (all default to true):

typescript
interface FTRichTextButtons {
  bold?: boolean;
  italic?: boolean;
  strikethrough?: boolean;
  code?: boolean;
  paragraph?: boolean;
  h1?: boolean;
  h2?: boolean;
  h3?: boolean;
  bulletList?: boolean;
  orderedList?: boolean;
  codeBlock?: boolean;
  horizontalRule?: boolean;
  colorPicker?: boolean;
  alignLeft?: boolean;
  alignCenter?: boolean;
  alignRight?: boolean;
  alignJustify?: boolean;
  unsetAlign?: boolean;
  link?: boolean;
  unlink?: boolean;
}
interface FTRichTextButtons {
  bold?: boolean;
  italic?: boolean;
  strikethrough?: boolean;
  code?: boolean;
  paragraph?: boolean;
  h1?: boolean;
  h2?: boolean;
  h3?: boolean;
  bulletList?: boolean;
  orderedList?: boolean;
  codeBlock?: boolean;
  horizontalRule?: boolean;
  colorPicker?: boolean;
  alignLeft?: boolean;
  alignCenter?: boolean;
  alignRight?: boolean;
  alignJustify?: boolean;
  unsetAlign?: boolean;
  link?: boolean;
  unlink?: boolean;
}

Customizing Tooltips ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

const customTooltips = {
  bold: 'Make text bold (Ctrl+B)',
  italic: 'Italicize text (Ctrl+I)',
  h1: 'Large heading',
  link: 'Insert hyperlink',
};
</script>

<template>
  <FTRichText v-model="content" :tooltips="customTooltips" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

const customTooltips = {
  bold: 'Make text bold (Ctrl+B)',
  italic: 'Italicize text (Ctrl+I)',
  h1: 'Large heading',
  link: 'Insert hyperlink',
};
</script>

<template>
  <FTRichText v-model="content" :tooltips="customTooltips" />
</template>

Hiding Specific Buttons ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

// Hide heading buttons and color picker for a simpler editor
const visibleButtons = {
  h1: false,
  h2: false,
  h3: false,
  colorPicker: false,
  alignJustify: false,
};
</script>

<template>
  <FTRichText v-model="content" :buttons="visibleButtons" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FTRichText } from '@fasttrack-solutions/vue-components-lib';

const content = ref('<p>Hello world!</p>');

// Hide heading buttons and color picker for a simpler editor
const visibleButtons = {
  h1: false,
  h2: false,
  h3: false,
  colorPicker: false,
  alignJustify: false,
};
</script>

<template>
  <FTRichText v-model="content" :buttons="visibleButtons" />
</template>

Events ​

EventPayloadDescription
update:modelValueStringEmitted when the editor content changes, returns HTML

Slots ​

Slot NameDescription
actionsContent displayed in the right side of the toolbar (e.g., custom action buttons)
toolsAdditional formatting tools displayed in the left side of the toolbar

Styling ​

The editor comes with pre-styled content rendering that includes:

  • Responsive typography
  • Syntax-highlighted code blocks
  • Properly formatted lists and blockquotes
  • Semantic heading hierarchy
  • Clean horizontal rules

Copyright © Fast Track Solutions