/rich-text-editor

Purple Editor - A Rich Text Editor with ability to add images and memes

Primary LanguageJavaScript

Purple Editor

What is Purple Editor?

It is a text editor which allows user to add text formatting, images and memes in the text content.

Live url: https://purple-editor.netlify.app/

Tech Stack

  • ReactJS
  • Vanilla CSS
  • Tiptap Editor
  • Tenor API
Purple.Editor.mp4

How to Use?

  1. To add bold style text click on B button and start typing. If you want to write non-bold text, deselect the B button and start typing.

    If you want to add bold/non-bold style to the existing text, then select the text and click on B button.

  2. To add italic style text click on I button and start typing. If you want to write non-italic text, deselect the I button and start typing.

    If you want to add italic/non-italic style to the existing text, then select the text and click on I button.

  3. To add underline style text click on U button and start typing. If you want to write no-underline text, deselect the U button and start typing.

    If you want to add underline/no-underline style to the existing text, then select the text and click on U button.

  4. To add hyperlink to your text, select the text, click on 🔗 button, enter url in opened pop-up. Please make sure you are entering the full url e.g. https://www.google.com

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

  5. To add image, click on Add Image button and enter image url in pop-up window.

    If you want to delete image, then click on the image and press delete button on keyboard, or backspace will work as well. For Testing: You can use image url- http://res.cloudinary.com/u-and-i/image/upload/v1626699937/images/chrome-capture_1_qh0byh.png

  6. To add meme, type "{{yourFavMemer_meme}}" e.g.{{cat_meme}}, click on Add Meme button, meme will get added to the editor.

    If you want to delete meme, then click on the image and press delete button on keyboard, or backspace will work as well.

  7. If you want to reorder your images in the text editor, just drag and drop anywhere in the editor.