https://github.com/swapnalshahil/richtext-editor
npm package for Rich Text Editor
https://github.com/swapnalshahil/richtext-editor
npm npm-package rich-text-editor richtexteditor
Last synced: 3 months ago
JSON representation
npm package for Rich Text Editor
- Host: GitHub
- URL: https://github.com/swapnalshahil/richtext-editor
- Owner: swapnalshahil
- License: mit
- Created: 2024-07-08T15:11:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T13:02:47.000Z (almost 2 years ago)
- Last Synced: 2025-10-19T01:01:55.051Z (8 months ago)
- Topics: npm, npm-package, rich-text-editor, richtexteditor
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@eulersgamma/richtext-editor
- Size: 249 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌟 Rich Text Editor
Create stunning and customizable Rich Text Editors effortlessly with our `richtext-editor` npm package! Using `draft-js`, this package brings a robust and versatile text editing experience to your project.
## ✨ Features
- **Rich Text Formatting**: Bold, italic, underline, monospace, and heading levels H1 to H6.
- **Hyperlinks**: Easily add and manage links.
- **Media Uploads**: Upload images, videos, PDFs, docs, and .txt files.
- **Mentions**: Integrate user mentions with the `@` character.
## 📦 Installation
Get started by installing the package via npm:
```bash
npm install @eulersgamma/richtext-editor
```
# 🚀 Usage
Seamlessly integrate the Rich Text Editor into your project:
```bash
import { RichTextEditor } from '@eulersgamma/richtext-editor';
```
## 🔧 Props
- **rawJson**: The JSON structure of the editor's content, necessary for re-rendering and editing existing content.
- **mentionmembers**: An array of objects representing mentioned users for a specific note ID.
- **dropDownAPI**: A function `dropDownAPI(searchedText)` that returns an array of objects in the format
```json
[
{ "label": "Thomas", "id": "12348287236824" },
{ "label": "Swapnal", "id": "4398534858935935" }
]
```
- **onSubmit**: A callback function that receives an object containing
```bash
{
"html": get the content in html format,
"rawJson": this rawJSON you will need to reconfigure Editor to edit pre-existing content,
"mentions": all the mentions,
"text": get raw text content
}
```
- **getUrlforMedia**: An API function for saving images in the database and providing URLs for the media.
## 🛠️ Running Locally
To run the project locally and start development, follow these steps:
### Install Dependencies
```bash
npm install
# or
yarn
```
### Start the Project
```bash
npm run start
# or
yarn start
```
## 🤝 Contributing
We welcome contributions! Feel free to open issues, submit pull requests, or suggest enhancements.
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/swapnalshahil/richtext-editor/blob/main/LICENSE) file for details.
Elevate your text editing experience with the richtext-editor! Enjoy rich features, easy integration, and endless possibilities.
# Happy Coding! 🎉