ContentVeda UI
View Source
📝 Component

Rich Text Editor

Modern two-row editorial layout with typography selectors, direct media inserts, table controls, dynamic CSS chips, and AI assistant.

npm install @contentveda/ui

✨ Rich Text Editor Toolbar Redesign

Two-Row Layout

Modern two-row editorial layout with typography selectors, direct media inserts, table controls, dynamic CSS chips, and AI assistant.

🎨 Row 1: Typography
Headings, font family (Inter, Outfit, Fira Code), font size scale, inline colors, & alignment.
⚡ Row 2: Media & Controls
Direct media insertion, formula Fx, dynamic CSS class chips, and contextual table tools.

Interactive Demo Playground

<cv-rich-text-editor> Playground
⚙️ Configure Properties
❌ Invalid JSON Array
❌ Invalid JSON Object

Usage Code Generator 

import RichTextEditor from '@contentveda/ui/react/RichTextEditor';
import '@contentveda/ui/theme.css';

const toolbar = [
  'fullscreen', 'source', 'bold', 'italic', 'underline', 'strikeThrough',
  'code', 'quote', 'clear', 'headings', 'foreColor', 'backColor',
  'justifyLeft', 'justifyCenter', 'justifyRight',
  'image', 'link', 'table', 'unorderedList', 'orderedList', 'horizontalRule',
  'video', 'social', 'insertButton', 'addWidget', 'save', 'classInput',
];

export default function Example() {
  return (
    <RichTextEditor 
      content="<p>Hello World!</p>"
      availableClasses={['text-pink-500', 'font-bold']}
      config={{ toolbar }}
      onChange={(html) => console.log(html)}
    />
  );
}
<script setup>
import RichTextEditor from '@contentveda/ui/vue/RichTextEditor.vue';
import '@contentveda/ui/theme.css';

const toolbar = [
  'fullscreen', 'source', 'bold', 'italic', 'underline', 'strikeThrough',
  'code', 'quote', 'clear', 'headings', 'foreColor', 'backColor',
  'justifyLeft', 'justifyCenter', 'justifyRight',
  'image', 'link', 'table', 'unorderedList', 'orderedList', 'horizontalRule',
  'video', 'social', 'insertButton', 'addWidget', 'save', 'classInput',
];
</script>

<template>
  <RichTextEditor
    content="<p>Hello World!</p>"
    :availableClasses="['text-pink-500', 'font-bold']"
    :config="{ toolbar }"
    @change="(html) => console.log(html)"
  />
</template>
<script lang="ts">
  import RichTextEditor from '@contentveda/ui/svelte/RichTextEditor.svelte';

  const toolbar = [
    'fullscreen', 'source', 'bold', 'italic', 'underline', 'strikeThrough',
    'code', 'quote', 'clear', 'headings', 'foreColor', 'backColor',
    'justifyLeft', 'justifyCenter', 'justifyRight',
    'image', 'link', 'table', 'unorderedList', 'orderedList', 'horizontalRule',
    'video', 'social', 'insertButton', 'addWidget', 'save', 'classInput',
  ];
</script>

<RichTextEditor 
  content="<p>Hello World!</p>"
  config={{ toolbar }}
/>
import RichTextEditor from '@contentveda/ui/solid/RichTextEditor';
import '@contentveda/ui/theme.css';

const toolbar = [
  'fullscreen', 'source', 'bold', 'italic', 'underline', 'strikeThrough',
  'code', 'quote', 'clear', 'headings', 'foreColor', 'backColor',
  'justifyLeft', 'justifyCenter', 'justifyRight',
  'image', 'link', 'table', 'unorderedList', 'orderedList', 'horizontalRule',
  'video', 'social', 'insertButton', 'addWidget', 'save', 'classInput',
];

export default function Example() {
  return (
    <RichTextEditor
      content="<p>Hello World!</p>"
      availableClasses={['text-pink-500', 'font-bold']}
      config={{ toolbar }}
      onChange={(html) => console.log(html)}
    />
  );
}
import { Component } from '@angular/core';
import { RichTextEditorModule } from '@contentveda/ui/angular/RichTextEditor';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [RichTextEditorModule],
  template: `
    <rich-text-editor
      content="<p>Hello World!</p>"
      [availableClasses]="['text-pink-500', 'font-bold']"
      [config]="config"
    ></rich-text-editor>
  `
})
export class ExampleComponent {
  config = {
    toolbar: [
      'fullscreen', 'source', 'bold', 'italic', 'underline', 'strikeThrough',
      'code', 'quote', 'clear', 'headings', 'foreColor', 'backColor',
      'justifyLeft', 'justifyCenter', 'justifyRight',
      'image', 'link', 'table', 'unorderedList', 'orderedList', 'horizontalRule',
      'video', 'social', 'insertButton', 'addWidget', 'save', 'classInput',
    ]
  };
}
<script type="module"
  src="node_modules/@contentveda/ui/dist/webcomponent/dist/RichTextEditor.js"></script>

<cv-rich-text-editor 
  content="<p>Hello World!</p>"
  config='{"toolbar":["fullscreen","source","bold","italic","underline","strikeThrough","code","quote","clear","headings","foreColor","backColor","justifyLeft","justifyCenter","justifyRight","image","link","table","unorderedList","orderedList","horizontalRule","video","social","insertButton","addWidget","save","classInput"]}'
></cv-rich-text-editor>

Props API Reference

PropTypeDefaultDescription
content string undefined Initial HTML content for the editor.
initialContent string undefined Initial HTML content for the editor if content is not controlled.
onChange (content: string) => void undefined Callback triggered when content changes.
onMediaRequest (type: 'image' | 'video' | 'audio') => Promise<string> undefined Callback to open an external media library modal.
availableClasses string[] undefined Array of custom class names available for the user to apply.
className string undefined Additional CSS class names for the wrapper element.
config.toolbar string[] undefined List of toolbar buttons to display (e.g. ['bold', 'italic', 'underline', 'link']).
The editor natively supports adding inline styles or classes dynamically to selected ranges.