react-enhanced-text-editor

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.

Table of Contents

• Features
• Installation
• Usage
• Customization
• Development
• Build
• Contributing
• License

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;

Example screenshot

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.

License

This project is licensed under the MIT License. See the LICENSE file for details.