Rich editor with Tiptap, Tailwind CSS, Reka UI (Dialog), and Vue3 as frontend, combined with Go as backend to store images
Overview
The Tiptap Example is an innovative rich text editor designed to provide a seamless editing experience. Built using a modern tech stack that includes Tiptap, Tailwind CSS, Headless UI, and Vue 3 for the frontend, coupled with a Go backend for efficient image storage, this editor is highly versatile. It stands out with its simplicity and robust functionality, making it suitable for a variety of applications.
Incorporating advanced features, the Tiptap Example adapts well to various components, allowing for ease of use with a simple integration through v-model. Whether you are a developer or an end-user, this rich text editor offers an intuitive interface combined with powerful editing capabilities.
Features
- History (Undo, Redo): Seamlessly navigate through your editing process with the ability to undo or redo changes.
- Heading Options: Format your text with various heading levels (1, 2, 3) for better structure and organization.
- Text Styles: Enhance your content with basic text styles including Bold, Italic, Underline, and Strikethrough.
- List Creation: Create ordered and unordered lists easily for organized content presentation.
- Link Integration: Insert hyperlinks to enhance connectivity within your text.
- Image Support: Upload and manage images directly, with an example provided using Go as the backend server.
- Blockquote Functionality: Add blockquotes to emphasize important text visually.
- Table Management: Create, modify, and manage tables with features like adding/deleting rows and columns, merging or splitting cells.
- YouTube Video Embedding: Enrich your content with videos by easily embedding YouTube links.
- Horizontal Line: Use horizontal lines for better content separation or visual organization.
- Preview Mode: Check your content in real-time before finalizing with a dedicated preview feature.
