Complete Configuration Guide

Configuration Options

Learn how to configure and customize the editor to match your application's needs. From basic setup to advanced customization, this guide covers everything you need to know.

All Available Props

Complete reference of all configuration options

The editor accepts various props to customize its behavior, appearance, and functionality. All props are optional except value andonChange for controlled usage.

Prop	Type	Default	Description
value	string	""	HTML content of the editor
onChange	function	undefined	Callback when content changes
height	string \| number	"auto"	Editor height (px, "auto", "responsive")
width	string \| number	"100%"	Editor width
minHeight	number	200	Minimum height in pixels
className	string	""	Additional CSS class
allowedTags	array	null	Array of allowed HTML tags
storageKey	string	"rte-editor-content"	localStorage key ("" to disable)
plugins	array	[]	Array of custom plugins

Code Examples

Practical examples for common use cases

Basic Usage

Simple setup with minimal configuration. Perfect for getting started quickly.

import Editor from 
  '@webbycrown/react-advanced-richtext-editor';
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

function MyEditor() {
  const [content, setContent] = useState('');
  
  return (
    <Editor
      value={content}
      onChange={setContent}
      height={400}
    />
  );
}

With Restrictions

Restrict allowed HTML tags for security. Ideal for comment systems and user-generated content.

<Editor
  value={content}
  onChange={setContent}
  allowedTags={[
    'p', 'strong', 'em', 'a', 'br'
  ]}
  storageKey=""
  height={400}
/>

With Custom Height

Control editor dimensions with fixed height and minimum height constraints.

<Editor
  value={content}
  onChange={setContent}
  height={500}
  minHeight={300}
  width="100%"
/>

With Custom Class

Apply custom CSS classes for advanced styling and theming.

<Editor
  value={content}
  onChange={setContent}
  className="my-custom-editor"
  height={400}
/>

/* CSS */
.my-custom-editor .rte-toolbar {
  background: #your-color;
}

Allowed Tags Examples

Pre-configured tag sets for common use cases

Different applications require different levels of formatting control. Here are pre-configured tag sets for common use cases, from minimal comment systems to full-featured content editors.

Minimal (Comments)

allowedTags={['p', 'br', 'strong', 'em']}

Standard (Blog Posts)

allowedTags={[
  'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
  'strong', 'em', 'u', 'a', 'img', 'ul', 
  'ol', 'li', 'blockquote', 'br'
]}

Full (All Tags)

allowedTags={null}  // Allows all tags

Storage Key Configuration

Configure auto-save functionality with localStorage

The editor can automatically save content to the browser's localStorage, providing a seamless user experience with content persistence across page reloads. Configure the storage key to enable or disable this feature.

Enable Auto-save

<Editor
  value={content}
  onChange={setContent}
  storageKey="my-editor-content"
  height={400}
/>

Content will be automatically saved to localStorage with the key "my-editor-content". The content persists across browser sessions and page reloads. Use unique keys for multiple editor instances.

🚫

Disable Auto-save

<Editor
  value={content}
  onChange={setContent}
  storageKey=""
  height={400}
/>

Auto-save is disabled when storageKey is an empty string. Use controlled component pattern with React state management or external state libraries (Redux, Zustand, etc.) for more control over content persistence.

Best Practices

Use unique storage keys for each editor instance to avoid conflicts
Consider user authentication when using localStorage - associate keys with user IDs
For production apps, implement server-side persistence in addition to localStorage
Clear localStorage when users log out or switch accounts

Advanced Configuration

Power user configurations and customization tips

🔌 With Custom Plugins

const customPlugins = [
  {
    name: "highlight",
    icon: "🖍️",
    title: "Highlight Text",
    tag: "mark"
  },
  {
    name: "timestamp",
    icon: "⏱️",
    title: "Insert Timestamp",
    action: () => {
      const now = new Date();
      document.execCommand("insertText", false, now.toLocaleString());
    }
  }
];

<Editor
  value={content}
  onChange={setContent}
  plugins={customPlugins}
  height={400}
/>

Responsive Configuration

<Editor
  value={content}
  onChange={setContent}
  height="responsive"
  minHeight={200}
  width="100%"
  className="responsive-editor"
/>

Complete Example

import Editor from '@webbycrown/react-advanced-richtext-editor';
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

function AdvancedEditor() {
  const [content, setContent] = useState('');
  
  const plugins = [
    { name: "highlight", icon: "🖍️", title: "Highlight", tag: "mark" }
  ];
  
  return (
    <Editor
      value={content}
      onChange={setContent}
      height={500}
      minHeight={300}
      width="100%"
      allowedTags={['p', 'h1', 'h2', 'strong', 'em', 'a', 'img', 'ul', 'ol', 'li']}
      storageKey="advanced-editor-content"
      plugins={plugins}
      className="my-custom-editor"
    />
  );
}