useCustomEditor Hook

A React hook for integrating CKEditor 4 with MathJax support, custom styling, and enhanced functionality for educational content creation.

Note: This editor is based on CKEditor 4, providing a mature and stable rich text editing experience with extensive customization capabilities.

Features

• 🎯 Main Editor Mode: Full-featured editor with custom styling
• 🧮 MathJax Integration: Built-in mathematical equation support
• 🎨 Custom Styling: Predefined themes and customizable appearance
• 🔧 Dynamic Configuration: Flexible editor configuration options
• 📚 CKEditor 4 Foundation: Built on the reliable CKEditor 4 platform

Installation

npm install react
# or
yarn add react

Usage

Basic Usage

import React from "react";
import useCustomEditor from "./useCustomEditor";

const MyEditor = () => {
  const { editorRef } = useCustomEditor({
    initialValue: "<p>Hello World!</p>",
    onChangeEditor: (data) => {
      console.log("Editor content:", data);
    },
  });

  return <div ref={editorRef} />;
};

Main Editor Mode

const MainEditor = () => {
  const { editorRef } = useCustomEditor({
    isMainEditor: true,
    initialValue: "<p>Main editor content</p>",
    onChangeEditor: (data) => console.log(data),
  });

  return (
    <div>
      <div ref={editorRef} />
    </div>
  );
};

API Reference

Props

| Prop | Type | Default | Description | | ---------------- | ------------------------ | ----------- | ------------------------------------------ | | initialValue | string | "" | Initial content for the editor | | onChangeEditor | (data: string) => void | undefined | Callback fired when editor content changes | | isMainEditor | boolean | false | Enable main editor mode with full styling |

Return Value

| Property | Type | Description | | ----------- | ----------- | ----------------------------------- | | editorRef | RefObject | Ref to attach to the editor element |

Loading Status Values

• "Initializing..." - Initial loading state
• "Reinitializing..." - Editor is being reset
• "Creating editor instance..." - CKEditor 4 instance creation
• "Failed to load scripts" - Script loading failed
• "Initialization failed" - Editor initialization failed
• "Editor initialization failed" - General initialization error

Dependencies

The hook automatically loads the following external dependencies:

Scripts

• jQuery 3.6.0
• Bootstrap 4.5.0
• CKEditor 4 (custom build)
• MathJax 2.7.4
• TUI Image Editor
• TUI Color Picker
• Custom extensions

Stylesheets

• Bootstrap 4.5.0
• TUI Image Editor styles
• TUI Color Picker styles
• Google Fonts (Manrope, Inter)
• Custom theme styles

CKEditor 4 Configuration

This hook leverages CKEditor 4's extensive configuration system. You can pass any valid CKEditor 4 configuration options through the ckeditorConfig prop to customize the editor's behavior and appearance.

Styling

Main Editor Styling

The main editor applies custom styling including:

• Transparent backgrounds for inner elements
• Dashed borders for content areas
• Custom colors: #faf9fb, #fcfcfd, #D7D0DD
• Rounded corners and centered toolbars

Error Handling

The hook includes comprehensive error handling for initialization and runtime issues.

Browser Support

• Modern browsers with ES6+ support
• Requires DOM manipulation capabilities
• MathJax rendering support
• CKEditor 4 compatible browsers

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Merge Request

License

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

Support

For issues and questions:

• Create an issue in the GitLab repository
• Check existing issues for solutions
• Provide minimal reproduction examples
• Consult CKEditor 4 documentation for editor-specific questions