@ehfuse/editor

A powerful, customizable WYSIWYG editor for React applications

한국어 문서 | English Documentation

✨ Features

• 🎨 Rich Text Editing - Bold, italic, underline, strikethrough, and more
• 🔗 Links & Media - Insert links and images with ease
• �️ Image Resize - Drag to resize images with 8-direction handles
• �📝 Text Formatting - Headings, lists, blockquotes, and code blocks
• 🎯 Alignment & Indentation - Full text alignment and indentation control
• 🌈 Colors - Text and background color customization
• 🔤 Fonts - Multiple font families and sizes
• ↩️ Undo/Redo - Complete history management
• 🌍 i18n - Support for 18 languages
• 🎨 Customizable - Custom icons, styles, and toolbar options
• 🔌 Plugin System - Extend functionality with custom plugins
• 📱 Responsive - Works perfectly on all screen sizes

📦 Installation

npm install @ehfuse/editor
# or
yarn add @ehfuse/editor
# or
pnpm add @ehfuse/editor

🚀 Quick Start

import { EhfuseEditor } from "@ehfuse/editor";

function App() {
    return (
        <EhfuseEditor
            defaultValue="<p>Start typing...</p>"
            locale="ko"
            onChange={(html) => console.log(html)}
        />
    );
}

📚 Documentation

• Getting Started - Installation and basic usage
• API Reference - Complete API documentation
• Examples - Usage examples and recipes
• Custom Plugins - Create your own plugins

🎯 Basic Usage

With Toolbar Options

<EhfuseEditor
    defaultValue="<p>Hello World</p>"
    toolbarOptions={[
        ["font", "size"],
        ["bold", "italic", "underline"],
        ["color", "bgcolor"],
        ["align"],
        ["bulletList", "numberList"],
        ["link", "image"],
        ["undo", "redo"],
    ]}
    locale="ko"
/>

Custom Styling

<EhfuseEditor
    defaultValue="<p>Styled editor</p>"
    styles={{
        selectedIconColor: "#0066cc",
        toolbarBackgroundColor: "#f8f9fa",
        focusBorderColor: "#0066cc",
    }}
/>

With Ref

const editorRef = useRef<EhfuseEditorRef>(null);

<EhfuseEditor ref={editorRef} defaultValue="<p>Hello</p>" />;

// Get HTML
const html = editorRef.current?.getHtml();

// Set HTML
editorRef.current?.setHtml("<p>New content</p>");

🔌 Built-in Plugins

ImageResizePlugin

Provides image resizing functionality with drag handles.

import { EhfuseEditor, ImageResizePlugin } from "@ehfuse/editor";

<EhfuseEditor
    plugins={[new ImageResizePlugin()]}
    defaultValue="<p>Insert an image!</p>"
/>;

Features:

• Hover overlay preview
• 8-direction resize handles
• Real-time size display
• Delete with keyboard (Delete/Backspace)
• Drag and drop to move

🌟 Pro Version

Need advanced features? Check out @ehfuse/editor-pro

Pro Features:

• 📹 YouTube embed
• 📄 Google Docs embed
• 📊 Advanced table editor with resize
• 💻 HTML source editing
• 🎬 Iframe resize plugin
• 📷 Server-side image upload

🤝 Contributing

This is a private repository. For bug reports or feature requests, please contact the maintainer.

📄 License

MIT License - see the LICENSE file for details

🙋 Support

For commercial support, please visit https://ehfuse.com

Made with ❤️ by @ehfuse