Custom Rich Text Editor

Wysiwyg editor

This custom WYSIWYG editor is built on top of Quill.js to explore and customize WYSIWYG editors, offering versatile features and a user-friendly experience for text formatting and content management.

Screenshots

Why this 🤔

I developed this project as a proof of concept (POC) to explore the customization potential of existing editors. During this process, I evaluated several options, including paid and open-source editors like CKEditor, TinyMCE, Editor.js, Draft.js, and Quill.js. ⚖️
I ultimately chose Quill.js due to its robustness, extensive API, strong customization capabilities, and the fact that it is open-source. 🏆

This project was also one of my early experiences with React, allowing me to develop a flexible and tailored text editor while honing my skills in front-end development. 🏗️

Key Features

  • Custom Menu BarThe custom menu bar includes file management for opening and downloading files(.docx and .txt), a content edit menu for precise adjustments, a full-screen mode for focused writing, and advanced formatting tools for quick case changes.
  • Word and Character CountA built-in word and character count component provides real-time tracking of text length, ensuring that users can easily monitor and adhere to content length requirements.
  • Find and Replace FunctionalityThe editor includes a powerful find and replace tool, allowing users to search for specific words or phrases and replace them across the document effortlessly. This feature is particularly useful for large documents where consistency in terminology is crucial.
  • Help Section ModalTo enhance usability, the editor features a help section modal that displays all available keyboard shortcuts. This makes it easy for users to familiarize themselves with the editor’s capabilities and streamline their workflow.
  • Custom ToolbarThe custom toolbar offers extensive options beyond basic text editing, including the ability to choose from a variety of Google fonts for flexible text presentation, adjust font sizes for precise control, and incorporate basic tables, providing users with a versatile set of tools.

Technology stack

ReactReactHTMLHTMLCSSCSSGITGIT