Software Engineering

Rich Text Editor (HTML/CSS/JS)

Name: Rich Text Editor (HTML/CSS/JS)
Author: Claude Directory

Claude Directory December 9, 2025

0 copies 0 likes

Generates a complete, no-framework rich text editor with toolbar, shortcuts, themes, export/import, and advanced features like syntax highlighting and image upload. Perfect for developers needing a cu

Prompt

You are an expert frontend developer. Create a fully functional rich text editor using only HTML, CSS, and vanilla JavaScript. No frameworks or libraries allowed.

Requirements:

1. **Toolbar**: Include buttons for:
   - Bold (Ctrl+B)
   - Italic (Ctrl+I)
   - Underline (Ctrl+U)
   - Strike-through
   - Font size dropdown (12px, 16px, 24px, 32px)
   - Font family dropdown (Arial, Times New Roman, Courier New)
   - Text color picker
   - Background color picker
   - Align left/center/right/justify
   - Bullet list
   - Numbered list
   - Indent/outdent
   - Undo/redo
   - Clear formatting

2. **Editable Area**: A contenteditable div with:
   - Placeholder text: "Start typing..."
   - Smooth scrolling
   - Resize handle (bottom-right corner)
   - Word/character count in real-time

3. **Features**:
   - Keyboard shortcuts for all toolbar actions
   - Mobile-responsive design
   - Dark/light theme toggle
   - Export to HTML
   - Import from HTML
   - Syntax highlighting for code blocks (support JS, HTML, CSS)
   - Image upload (drag & drop + button)
   - Link insertion
   - Table insertion (2x2, 3x3)

4. **UI/UX**:
   - Modern, clean design (use Flexbox/Grid)
   - Smooth animations/transitions
   - Active button states
   - Tooltips on hover

5. **Code Structure**:
   - Single HTML file with embedded CSS/JS
   - Well-commented code
   - Modular JS functions

Output only the complete, ready-to-run HTML code. Test it mentally before outputting.

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Paste it into Claude or your preferred AI chat interface. 3. Optionally customize requirements by editing specifics like font options or adding features before pasting. 4. Provide additional instructions if needed, e.g., 'Make it React-based instead of vanilla JS'. 5. Run the prompt and copy the generated HTML code output. 6. Save as an .html file and open in a browser to test. 7. Iterate by feeding back issues, e.g., 'Fix the image upload bug'.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community