React-enhanced-text-editor NPM

React Enhanced Text Editor

A simple and customizable rich text editor built with React. This editor supports various text formatting options and media embedding, making it suitable for a wide range of applications.

Features

Text Formatting: Supports headings, paragraphs, bold, italic, font size, and font family.
Lists: Create ordered and unordered lists.
Text Alignment: Align text to the left, center, or right.
Indentation: Increase or decrease text indentation.
Spacing: Adjust line spacing and text spacing.
Undo/Redo: Easily revert or reapply changes.
Customizable: Style the editor and toolbar to fit your application's design.

Installation

To install the package, run:

npm install react-enhanced-text-editor

Usage

To use the rich text editor in your application, import the Editor and Toolbar components:

import React, { useState } from 'react';
import { Editor, Toolbar } from 'react-enhanced-text-editor';

const App: React.FC = () => {
  const [content, setContent] = useState<string>('');
  const [isRaw, setIsRaw] = useState<boolean>(false);

  const handleContentChange = (newContent: string) => {
    setContent(newContent);
  };

  const handleFormat = (command: string, value?: string) => {
    document.execCommand(command, false, value);
  };

  const toggleRaw = () => {
    setIsRaw(!isRaw);
  };

  return (
    <div className="app">
      <Toolbar onFormat={handleFormat} toggleRaw={toggleRaw} isRaw={isRaw} />
      <Editor content={content} onChange={handleContentChange} isRaw={isRaw} />
    </div>
  );
};

export default App;