Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mindfiredigital/textigniterjs

A powerful and intuitive HTML Editor.
https://github.com/mindfiredigital/textigniterjs

Last synced: 2 months ago
JSON representation

A powerful and intuitive HTML Editor.

Awesome Lists containing this project

README

        

TextIgniterJS





Version
PRs


Experience a Lightweight , powerful and intuitive HTML Editor built with Core Typescript.

The `@mindfiredigital/textigniterjs` is a tool that allows developers to integrate TextIgniter.


## Live Demo

Click the button below to open the project on StackBlitz.


Open in StackBlitz

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
- [License](#license)


## Features

- **Bold**: When you apply bold formatting to text, it makes the selected text appear thicker and more prominent.
- **Italic**: Italic text is slanted to the right.
- **Underline**: Underlining text places a horizontal line beneath it.
- **Subscript**: Subscript lowers the selected text below the baseline.
- **Superscript**: Superscript raises the selected text above the baseline.
- **Left Align**: This feature aligns text to the left margin, creating a straight left edge.
- **Center Align**: Center alignment places text in the middle of the page or text box.
- **Right Align**: Text is aligned to the right margin, creating a straight right edge..
- **Bullet List**: Bullet lists present information as a series of items with bullets.
- **Numbered List**: Numbered lists provide a sequential order to items.
- **Insert Table**: This feature allows you to create tables to organize data.
- **Insert Layout**: This feature allows you to create Layout to organize data.
- **Heading**: Headings are typically used to divide a document into sections or chapters. They are usually styled differently, such as with larger text or bold formatting.
- **Hyperlink**: A hyperlink is a clickable link that connects to a webpage or another location within the document.
- **Image**: This feature allows you to insert images or graphics into your document to enhance its visual appeal or convey additional information.
- **GETHTML**: This feature allows you to get HTML for the data of editor.
- **GETJSON**: This feature allows you to get JSON for the data of editor.
- **Custom Height**: This feature allows you to set height of editor.


## Installation

To install the `@mindfiredigital/textigniterjs` npm package in your project, use the following command:

```bash
npm install @mindfiredigital/textigniterjs
```


## Getting Started

- **Initialization**: Initialize the TextIgniter in your project.

```javascript




TextIgniterJS



// Initialize the RichTextEditor with specific features
const config = {
features: [
'bold',
'italic',
'underline',
'subscript',
'superscript',
'left_align',
'center_align',
'right_align',
'justify',
'bullet_list',
'numbered_list',
'insert_table',
'insert_layout',
'heading',
'hyperlink',
'image',
],
};
const editor = new TextIgniter('editor', config);

// Example usage of getHtml and getJson methods
function getEditorContent() {
console.log('HTML content:', editor.getHtml());
console.log('JSON content:', editor.getJson());
}

const contentButton = document.createElement('button');
contentButton.innerText = 'Get Content';
contentButton.onclick = getEditorContent;
document.body.appendChild(contentButton);

```


## Contributing

We welcome contributions from the community. If you'd like to contribute to the `textigniterjs` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).

## License

Copyright (c) Mindfire Digital llp. All rights reserved.

Licensed under the MIT license.