https://github.com/apfirebolt/text-editor-in-react-using-material-ui

A text editor in React much like you see on Medium.com and other blogging sites
https://github.com/apfirebolt/text-editor-in-react-using-material-ui

javascript material-icons mui react-html-parser react-material-ui reactjs rich-text-editor text-editor

Last synced: 4 months ago
JSON representation

A text editor in React much like you see on Medium.com and other blogging sites

• Host: GitHub
• URL: https://github.com/apfirebolt/text-editor-in-react-using-material-ui
• Owner: Apfirebolt
• Created: 2023-01-05T20:05:33.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T20:35:46.000Z (over 2 years ago)
• Last Synced: 2025-01-21T00:49:30.021Z (5 months ago)
• Topics: javascript, material-icons, mui, react-html-parser, react-material-ui, reactjs, rich-text-editor, text-editor
• Language: JavaScript
• Homepage:
• Size: 189 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rich Text Editor in React using Material UI

_👀 Medium like text editor in React 

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white)

## Introduction

I was facing issues with implementing a Text Editor in React, previously I had a hassle-free implementation in Vue for one of the projects I have on Github. Many things did not work for me. I tried packages like React Slate, React-draft-wysiwyg and more. But, they had dependency related issues. Many of them lacked concrete examples. This package called **'mui-rte'** did work for me at last in this project bootstrapped with create-react-app.

This also has some warnings though which I might address in the future, but I needed a quick solution for the time being.

## Requirements 🏃

- Node

- React

- Material UI

- Draft JS

## Install  💥

```

npm install

npm start

```

The React app is configured to run by default on port 3000.

## Features

- Text Editor

- Can have hyperlinks and images.

- Can parse HTML output from the editor to send to the back-end server.

## Project Screenshots

Just one screenshot is there. No routes exist, editor is implemented on the main page only which looks something like this. 

![alt text](./screenshots/1.PNG)

## Deployment

Docker deployment using Nginx to be added in the future.

## Development

_Easily set up a local development environment!_

- clone

- `npm install`

- `npm start`

**Start coding!** 🎉

Clone this repo on your machine, navigate to its location in the terminal and run:

## Contributing

All contributions are welcome!