https://github.com/pranshudobhal/editor

EditOR is a rich text editor with functionalities like formatting text, adding hyperlinks, images, and memes.
https://github.com/pranshudobhal/editor

Last synced: 2 days ago
JSON representation

EditOR is a rich text editor with functionalities like formatting text, adding hyperlinks, images, and memes.

• Host: GitHub
• URL: https://github.com/pranshudobhal/editor
• Owner: pranshudobhal
• Created: 2021-08-08T15:43:07.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-13T11:36:58.000Z (over 3 years ago)
• Last Synced: 2024-11-08T17:54:48.423Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://edit-or.vercel.app/
• Size: 234 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# EditOR

EditOR is a rich text editor with functionalities like formatting text, adding hyperlinks, images, and memes.

## Tech Stack

- ReactJS

- Tiptap Editor

- Vanilla CSS

- Tenor API

## Live Demo

https://user-images.githubusercontent.com/26481473/128714903-d2b59e05-a698-4fa8-9d7b-b34623e4aa10.mp4

## Usage

1. To add **bold** style, click on the `B` button and start typing.

   If you want to add or remove bold style to an existing text, then select the text and click on the `B` button.

2. To add **italic** style, click on the `I` button and start typing.

   If you want to add or remove italic style to an existing text, then select the text and click on the `I` button.

3. To add **underline** style, click on the `U` button and start typing.

   If you want to add or remove underline style to an existing text, then select the text and click on the `U` button.

4. To add a **hyperlink** to your text, select the text, click on the `🔗` button, enter URL in opened modal.

   If you want to remove the hyperlink, select the text and click on the ~~`🔗`~~ button.

   > **NOTE:** Please make sure that you enter the full URL e.g. `https://www.google.com`

5. To add an **image**, click on the `Image` icon and enter image URL in opened modal.

   If you want to delete an image, then click on the image and press `delete` or `backspace` button.

   If you want to **reorder** the sequence of your images, just drag and drop.

   > **NOTE:** You can use this image URL for testing- `https://source.unsplash.com/random/800x600`

6. To add a meme, write "**{{nameOfMeme_meme}}**", then click on the `Add Meme` button.

   If you want to delete a meme, then click on the meme and press `delete` or `backspace` button.

   > **NOTE:** For testing purpose, you can use `{{cat_meme}}` to generate a meme