Rich Text Integration

Overview

The Campus Template utilizes rich text editors to allow administrators to create and format complex content for sections such as Academic Programs, About Us, and Publications. This ensures that content rendered on the frontend maintains structural integrity (headers, lists, bold text, etc.) without requiring manual HTML coding from the user.

The system supports two primary rich text libraries depending on the complexity required: TipTap and CKEditor.

TipTap Implementation

TipTap is used for lightweight, headless rich text editing. It is primarily integrated into the CMS forms for dynamic content fields.

Usage in CMS Forms

When implementing a new CMS field that requires rich text, use the editor instance to capture HTML output before sending it to the backend via the API.

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

const RichTextEditor = ({ value, onChange }) => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: value,
    onUpdate: ({ editor }) => {
      // Extract HTML to save to the database
      onChange(editor.getHTML());
    },
  });

  return <EditorContent editor={editor} />;
};

CKEditor Integration

For more robust document-style editing, the template integrates CKEditor 5. This is typically used for long-form content like the Program Details or About Us sections.

Data Format

CKEditor outputs a standard HTML string. When submitting data to endpoints such as addProgram or updateAboutUsById, the rich text field should be assigned the HTML string produced by the editor.

Example API Submission:

import { addProgram } from './academicsApi';

const handleSubmit = async (formData) => {
    // formData.programDetails contains the HTML string from CKEditor
    const response = await addProgram(formData);
    console.log("Program saved:", response);
};

Rendering Rich Content

On the public-facing screens (e.g., ProgramPage.jsx), content created via rich text editors is stored as HTML strings in the database. To display this content correctly, the template uses the dangerouslySetInnerHTML attribute.

Implementation Example

In the ProgramPage component, the programDetails fetched from the API are injected into the DOM:

// src/Components/Programs/ProgramPage.jsx

function ProgramPage() {
    const [programDetail, setProgramDetail] = useState({});

    // ... fetching logic

    return (
        <div className="p-2">
            <h1 className="text-md font-bold">{programDetail.programName}</h1>
            {/* 
                The HTML string from the rich text editor is rendered here.
                Fallback text is provided if the content is missing.
            */}
            <div 
                className="rich-text-container"
                dangerouslySetInnerHTML={{ 
                    __html: programDetail.programDetails || "No details available" 
                }} 
            />
        </div>
    );
}

Styling Rich Text

Content rendered via dangerouslySetInnerHTML does not automatically inherit Tailwind's utility classes for internal elements (like <p> or <ul>). You should target the wrapper class in your CSS:

.rich-text-container ul {
    list-style-type: disc;
    margin-left: 1.5rem;
}
.rich-text-container h2 {
    font-size: 1.5rem;
    font-weight: bold;
}

API Interaction Details

The following API functions are the primary consumers of rich text data. Ensure the data object passed to these functions contains the valid HTML string generated by the editors.

Input/Output Types

Input: data (Object) - Must include the rich text field as a String.
Output: Promise<Object> - Returns the saved record from the database.

Note on Security: While the template allows HTML rendering for administrative flexibility, it is recommended to sanitize HTML strings on the backend before storage to prevent Cross-Site Scripting (XSS) attacks.