Chronos UI/ Rich Text Editor
View Source
📝 Component

Rich Text Editor

Advanced headless WYSIWYG editor with custom inline styles, table builder, media embedding, and dark premium aesthetics.

npm install @chronos-ui/core

Interactive Demo Playground

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

Usage Code Generator 

import RichTextEditor from '@chronos-ui/core/react/RichTextEditor';
import '@chronos-ui/core/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',
];

<RichTextEditor 
  content="<p>Hello World!</p>"
  availableClasses={['text-pink-500', 'font-bold']}
  config={{ toolbar }}
  onChange={(html) => console.log(html)}
/>
<script lang="ts">
  import RichTextEditor from '@chronos-ui/core/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 }}
/>
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/RichTextEditor.js"></script>

<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"]}'
></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.