Web-Based Text Editor
A feature-rich, in-browser text editor supporting various fonts, colors, formatting options, and the ability to save your work as a local file.
Project Overview
Created to learn advanced in-browser text formatting, local file handling, and a dynamic UI reminiscent of a traditional word processor.
Implementation
The editor is built with: 1. **HTML** for structure: - A toolbar with formatting, alignment, and color-picking options. - A document title bar, editable content area, and word count. - Buttons for saving to file, deleting, creating new pages, and toggling the toolbar visibility. 2. **CSS** for styling: - A clean layout with a collapsible toolbar. - Hover tooltips on each button. - Custom color pickers with styled swatches for text color, highlight color, and page background. 3. **JavaScript** for logic: - Uses `document.execCommand` to handle bold, italic, underline, lists, alignment, and more. - Maintains a live word count via `keyup` and `input` events. - Offers local file saving by converting content to a downloadable `.txt`. - Allows renaming the document title, which updates the default filename when saving. - Includes a 'new page' feature to open the editor in a fresh browser tab.
Challenges
Ensuring consistent behavior across browsers with `execCommand`, building a large font list, and managing multiple color pickers for text, highlight, and page background. Handling the user experience for toggling the toolbar and saving/deleting files also required careful planning.
Outcome
Successfully delivered a polished, browser-based text editor that replicates core word processor features. This project highlights advanced DOM manipulation, color customization, and local file generation—making it both a practical tool and a valuable learning experience.
Project Gallery
