Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/miladsoft/html-editor
Advanced Custom HTML Editor
https://github.com/miladsoft/html-editor
Last synced: 6 days ago
JSON representation
Advanced Custom HTML Editor
- Host: GitHub
- URL: https://github.com/miladsoft/html-editor
- Owner: miladsoft
- License: mit
- Created: 2024-08-29T19:45:01.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-08-29T20:00:51.000Z (2 months ago)
- Last Synced: 2024-10-11T02:49:34.876Z (28 days ago)
- Language: HTML
- Homepage: https://miladsoft.github.io/html-editor/
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📚 Advanced Custom HTML Editor
Welcome to the **Advanced Custom HTML Editor** project! This is a fully customizable HTML editor built with vanilla JavaScript, HTML, and CSS. It provides a wide range of text formatting options, color customization, and even emoji insertion. Perfect for creating rich text content directly in your browser! 😄
## 🚀 Features
- **Font Style & Size**: Easily change the font style and size using the toolbar.
- **Text & Background Color**: Customize text and background colors with built-in color pickers.
- **Text Formatting**: Bold, italicize, underline, and more!
- **Lists**: Create ordered and unordered lists with a single click.
- **Alignment**: Align your text to the left, center, or right.
- **Linking**: Insert and remove hyperlinks.
- **Image Insertion**: Add images by URL.
- **Emoji Support**: Insert popular emojis with ease! 😎 🎉
## 🛠️ Getting Started
### Prerequisites
To use this project, you'll need:
- A modern web browser (Chrome, Firefox, Safari, etc.)
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/miladsoft/html-editor.git
```
2. **Navigate to the project directory**:
```bash
cd advanced-html-editor
```
3. **Open `index.html` in your browser**:
```bash
open index.html
```
or simply drag the `index.html` file into your browser.
## 🎨 Usage
- **Edit Text**: Click inside the editor area and start typing.
- **Format Text**: Use the toolbar to format your text. You can change the font, size, color, and more!
- **Insert Emojis**: Click on the emoji buttons in the toolbar to add emojis to your text.
## 📄 HTML Output
You can see the raw HTML output of your text in the `HTML Output` section below the editor. This output is updated in real-time as you make changes in the editor.
## 🤝 Contributing
Contributions are welcome! Feel free to:
- Fork the repository
- Create a new branch (`git checkout -b feature-name`)
- Make your changes
- Commit your changes (`git commit -m 'Add some feature'`)
- Push to the branch (`git push origin feature-name`)
- Open a Pull Request
## 🐛 Issues
If you encounter any issues, please [report them here](https://github.com/miladsoft/html-editor/issues).
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 📞 Contact
- **Author**: Milad Raeisi
- **GitHub**: [Miladsoft](https://github.com/miladsoft)
- **Email**: [email protected]
---
Made with ❤️ by [Milad](https://github.com/miladsoft)