@ncds/editor

A React component wrapper for Froala WYSIWYG Editor designed for NHN Commerce applications.

Features

• 🚀 Easy-to-use React wrapper for Froala Editor
• 📦 TypeScript support with full type definitions
• 🎨 Customizable styling and configuration
• 🖼️ Built-in image upload handling
• 🌐 Korean language support included
• 📱 Responsive design support

Installation

npm install @ncds/editor

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom froala-editor react-froala-wysiwyg

Quick Start

import React, { useState, useRef } from 'react';
import { FroalaEditor, FroalaEditorType } from '@ncds/editor';

function MyEditor() {
  const [content, setContent] = useState('<p>Hello World!</p>');
  const editorRef = useRef<FroalaEditorType | null>(null);

  return (
    <FroalaEditor
      value={content}
      onChange={setContent}
      editorRef={editorRef}
      placeholder="Start typing..."
      height={400}
      licenseKey="your-license-key"
    />
  );
}

API Reference

Props

| Prop | Type | Default | Description | | -------------------------- | ----------------------------- | ------------------------ | -------------------------------------------- | | value | string | - | Current HTML content of the editor | | onChange | (value: string) => void | - | Callback fired when content changes | | editorRef | RefObject<FroalaEditorType> | - | Ref to access editor instance methods | | placeholder | string | '내용을 입력해주세요.' | Placeholder text when editor is empty | | height | number | 300 | Editor height in pixels | | width | number | 100% | Editor width | | disabled | boolean | false | Whether the editor is read-only | | licenseKey | string | - | Froala license key (required for production) | | imageUploadOptions | object | - | Custom image upload configuration | | customImageUploadOptions | object | - | Additional image upload options | | viewContentSize | boolean | true | Show content size in status bar | | className | string | - | Additional CSS classes for wrapper | | tag | string | 'div' | HTML tag for editor container |

Editor Instance Methods

Access editor methods through the editorRef:

const editorRef = useRef<FroalaEditorType | null>(null);

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

// Set HTML content
editorRef.current?.setHTML('<p>New content</p>');

// Focus editor
editorRef.current?.focus();

// Get selection
const selection = editorRef.current?.getSelection();

Advanced Usage

Custom Image Upload

<FroalaEditor
  value={content}
  onChange={setContent}
  imageUploadOptions={{
    uploadUrl: '/api/upload-image',
    uploadParams: { folder: 'editor-images' },
    maxImageSize: 5 * 1024 * 1024, // 5MB
  }}
/>

Event Handlers

<FroalaEditor
  value={content}
  onChange={setContent}
  onInit={(editor) => console.log('Editor initialized')}
  onBlur={() => console.log('Editor lost focus')}
/>

Styling

The component includes default styles, but you can customize the appearance:

.my-editor {
  border: 2px solid #e1e5e9;
  border-radius: 8px;
}

.my-editor .fr-box {
  border: none;
}

TypeScript Support

Full TypeScript support with proper type definitions:

import { FroalaEditorProps, FroalaEditorType } from '@ncds/editor';

interface MyEditorProps extends Partial<FroalaEditorProps> {
  customProp?: string;
}

Requirements

• React >= 16.8.0
• react-dom >= 16.8.0
• froala-editor >= 4.0.0
• react-froala-wysiwyg >= 4.0.0

License

MIT License - see LICENSE file for details.